Jetpack Compose Floating Action Button

Button

A button is a useful UI element consists of text or an icon, or both, that communicates what action occurs when the user taps or click on it.

Floating Action Button (FAB)

Floating Action button is slightly different from a simple button. It is a useful component in Material Design which is usually display in rectangular shape with an icon. It floats on the surface of the interface allowing the user to click on it to perform an action. In Material Design Components we have four sizes of floating action buttons: 

1. Floating action button (ordinary size)

2. Small Floating action button 

3. Large floating action button and

4. Extended floating action button 

In this tutorial we will learn to create all the three types of floating action button

Also Read Tabs in Jetpack Compose

Steps :

Create a New Project and select Empty Activity In my case, application name is Coding Bihar you can use any other name.

MainActivity

Copy this code →

package com.example.codingbihar

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodingBiharTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                   Fab()
                 }
            }
        }
    }
}

Create a separate file for FAB and named it as Fab

Fab

Copy this code →

package com.example.codingbihar

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.LargeFloatingActionButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun Fab() {
    var myFABState by remember {
        mutableStateOf(false)
    }
    Column(modifier = Modifier.padding(30.dp)){

    FloatingActionButton(onClick = { },
        contentColor = Color.Green,
        containerColor = Color.Magenta,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(imageVector = Icons.Default.Add,
            contentDescription ="")
    }
    SmallFloatingActionButton(onClick = { /*TODO*/ },
        modifier = Modifier.padding(8.dp)

    ) {
        Icon(imageVector = Icons.Default.Add,
            contentDescription ="")
    }
    ExtendedFloatingActionButton(
        modifier = Modifier.padding(8.dp),
        text = { Text(text = "Edit FAB") },
        icon = { Icon(imageVector = Icons.Default.Edit,
            contentDescription ="" )},
        expanded = myFABState,
        onClick = { myFABState=!myFABState}
    )
    LargeFloatingActionButton(
        modifier = Modifier.padding(8.dp),
        onClick = { /*TODO*/ }
    ) {
        Icon(imageVector = Icons.Default.Add,
            contentDescription ="")
    }

    }
}

OUTPUT :

********************Finish*************************