How to do i create FloatingActionButton in Jetpack Compose?

Last updated Oct 05, 2021

In this Jetpack compose tutorial we will learn how to use create FloatingActionButton with Jetpack compose in Android application.

Floating action button perform primary action on a screen.

Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Let's create a simple circular floating action button

FloatingActionButton(onClick = {
    Toast.makeText(
        context,
        "You clicked floating action button with circular shape....",
        Toast.LENGTH_LONG
    ).show()
}, content = {
    Icon(
        imageVector = Icons.Default.Add,
        contentDescription = "image",
        tint = Color.White
    )
}, backgroundColor = Color.Blue)

Create Rectangle floating action button

FloatingActionButton(onClick = {
    Toast.makeText(
        context,
        "You clicked floating action button with rectangle shape....",
        Toast.LENGTH_LONG
    ).show()
}, content = {
    Icon(
        imageVector = Icons.Default.Add,
        contentDescription = "image",
        tint = Color.White
    )
}, backgroundColor = Color.Blue, shape = RectangleShape)

Extended floating action button

ExtendedFloatingActionButton(
    backgroundColor = Color.Blue,
    text = {
        Text(text = "Extended FAB", color = Color.White)
    },
    onClick = {
        Toast.makeText(
            context,
            "You clicked extended floating action button ....",
            Toast.LENGTH_LONG
        ).show()
    })

Extended floating action button with icon

ExtendedFloatingActionButton(
    backgroundColor = Color.Blue,
    text = {
        Text(text = "Extended FAB", color = Color.White)
    },
    onClick = {
        Toast.makeText(
            context,
            "You clicked extended floating action button with icon....",
            Toast.LENGTH_LONG
        ).show()
    }, icon = {
        Icon(
            imageVector = Icons.Default.Add,
            contentDescription = "image",
            tint = Color.White
        )
    })

Extended floating action button with rectangle shape

ExtendedFloatingActionButton(
    backgroundColor = Color.Blue,
    text = {
        Text(text = "Extended FAB", color = Color.White)
    },
    onClick = {
        Toast.makeText(
            context,
            "You clicked extended floating action button with rectangle shape....",
            Toast.LENGTH_LONG
        ).show()
    }, shape = RectangleShape)

Full Code

package com.example.jetpack

import android.os.Bundle
import android.view.WindowManager
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
        setContent {
            FloatingActionMenu()
        }
    }
}
@Composable
fun FloatingActionMenu() {
    val context = LocalContext.current
    Column(
        modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        FloatingActionButton(onClick = {
            Toast.makeText(
                context,
                "You clicked floating action button with circular shape....",
                Toast.LENGTH_LONG
            ).show()
        }, content = {
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "image",
                tint = Color.White
            )
        }, backgroundColor = Color.Blue)
        Spacer(Modifier.size(16.dp))
        FloatingActionButton(onClick = {
            Toast.makeText(
                context,
                "You clicked floating action button with rectangle shape....",
                Toast.LENGTH_LONG
            ).show()
        }, content = {
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "image",
                tint = Color.White
            )
        }, backgroundColor = Color.Blue, shape = RectangleShape)
        Spacer(Modifier.size(16.dp))
        ExtendedFloatingActionButton(
            backgroundColor = Color.Blue,
            text = {
                Text(text = "Extended FAB", color = Color.White)
            },
            onClick = {
                Toast.makeText(
                    context,
                    "You clicked extended floating action button ....",
                    Toast.LENGTH_LONG
                ).show()
            })
        Spacer(Modifier.size(16.dp))
        ExtendedFloatingActionButton(
            backgroundColor = Color.Blue,
            text = {
                Text(text = "Extended FAB", color = Color.White)
            },
            onClick = {
                Toast.makeText(
                    context,
                    "You clicked extended floating action button with icon....",
                    Toast.LENGTH_LONG
                ).show()
            }, icon = {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "image",
                    tint = Color.White
                )
            })

        Spacer(Modifier.size(16.dp))
        ExtendedFloatingActionButton(
            backgroundColor = Color.Blue,
            text = {
                Text(text = "Extended FAB", color = Color.White)
            },
            onClick = {
                Toast.makeText(
                    context,
                    "You clicked extended floating action button with rectangle shape....",
                    Toast.LENGTH_LONG
                ).show()
            }, shape = RectangleShape
        )
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    FloatingActionMenu()
}

Image

Floating Action button with Jetpack Compose

Article Contributed By :

1488 Views