How to Create Floating Action Button (FAB) in Android Jetpack Compose

By Mohammed Rashid •  November 19th, 2022 • 

A floating Action Button is a useful UI element to show a floating button at the bottom of the screen. Let’s learn how to create a FAB in Android using Jetpack Compose.

You can create a simple FAB using FloatingActionButton.

FloatingActionButton(onClick = { /*do something*/ },) {
                Icon(Icons.Filled.Add, contentDescription = "Add Button")
            }

Usually, FAB is placed at the bottom end area of the screen. See the complete code given below to place the Floating Action at the bottom right of the layout.

package com.example.myapplication

import android.os.Bundle
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    color = MaterialTheme.colors.background,
                    modifier = Modifier.fillMaxSize()
                ) {
                    FABExample()
                }
            }
        }
    }
}


@Composable
fun FABExample() {
    Box(
        modifier = Modifier.fillMaxSize().padding(20.dp),
    ){
        Row(modifier = Modifier.align(Alignment.BottomEnd)){
            FloatingActionButton(onClick = { /*do something*/ },) {
                Icon(Icons.Filled.Add, contentDescription = "Add Button")
            }
        }

    }
}


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

Following is the output.

Floating action button in Android Jetpack Compose

That’s how you add FAB in Jetpack Compose.

Mohammed Rashid

Keep Reading