Create a Jetpack Compose Floating Action Button (FAB)

If you’re looking to add some extra flair to your app’s user interface, a Floating Action Button (FAB) is a great place to start. With Jetpack Compose, creating a FAB is easier than ever. In this guide, we’ll walk you through the steps to create a FAB that will elevate your UI design skills and make your app stand out.

Understanding Floating Action Buttons.

A Floating Action Button (FAB) is a circular button that floats above the UI and is used to promote the primary action of the app. It’s a common design pattern in modern Android apps and is often used for actions like adding a new item, creating a new post, or initiating a search. In Jetpack Compose, creating a FAB is easy and can be done with just a few lines of code. Let’s dive in and learn how to create one!

Creating a Floating Action Button in Jetpack Compose

To create a Floating Action Button in Jetpack Compose, you first need to add the Material Design library to your project. Once you have done that, you can create a FAB by using the FloatingActionButton component. You can customize the FAB by changing its background color, content color, and icon. Just create a @Composable function named is FloatingActionButtonCompose and configure the FAB

package com.composefloatingactionbutton

import androidx.compose.foundation.shape.CornerSize
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import com.composefloatingactionbutton.ui.theme.Accent

@Composable
fun FloatingActionButtonCompose() {
  val context = LocalContext.current

  FloatingActionButton(shape = MaterialTheme.shapes.large.copy(CornerSize(percent = 50)),
    backgroundColor = Accent,
    contentColor = Color.White,
    onClick = { makeToast(context, "Fab clicked") }) {
    Icon(Icons.Default.Add, contentDescription = null)
  }
}

Adding Functionality to the Floating Action Button

Once you have created your Floating Action Button in Jetpack Compose, you can add functionality to it. This can be done by using the onClick parameter of the FloatingActionButton component. You can specify a function that will be called when the user clicks on the FAB. This function can perform any action you want, such as opening a new screen, displaying a message, or performing a calculation. I am display a toast just for demo purpose.

    onClick = { makeToast(context, "Fab clicked") }) {
    Icon(Icons.Default.Add, contentDescription = null)
    }

How to use Floating Action Button Compose function

In the Scaffold compose function pass the floatingActionButton and bottomBar params just like below. I have written a separate tutorial on the Bottom bar using compose. You can check out that for details

package com.composefloatingactionbutton

import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import com.composefloatingactionbutton.ui.theme.ComposeFloatingActionButtonTheme

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      ComposeFloatingActionButtonTheme {
        // A surface container using the 'background' color from the theme
        Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
          ComposeScaffold()
        }
      }
    }
  }
}

@Composable
fun ComposeScaffold() {
  val context = LocalContext.current
  val scaffoldState = rememberScaffoldState()
  Scaffold(
    bottomBar = { BottomAppBarCompose(context) },
    floatingActionButton = { FloatingActionButtonCompose() },
    scaffoldState = scaffoldState
  ) {

  }
}

Customizing the Floating Action Button

You can change the color, shape, and size of the FAB to match your app’s design. To change the color, you can use the backgroundColor parameter and specify a color resource or a color value.

To change the shape, you can use the shape parameter and specify a shape resource or a custom shape. And to change the size, you can use the size parameter and specify a size resource or a custom size.

Placement of FAB button

  Scaffold(
    bottomBar = { BottomAppBarCompose(context) },
    floatingActionButton = { FloatingActionButtonCompose() },
    floatingActionButtonPosition = FabPosition.End, // FabPosition.Center
    scaffoldState = scaffoldState
  )

The shape of FAB Button and embedded bottom bar

Customizing the Shape of FAB using shape param like below

  FloatingActionButton(
    shape = MaterialTheme.shapes.large.copy(CornerSize(percent = 50)),
    backgroundColor = Accent,
    contentColor = Color.White,
    onClick = { makeToast(context, "Fab clicked") }) {
    Icon(Icons.Default.Add, contentDescription = null)
    }

Dock in Bottom Bar

Make true isFloatingActionButtonDocked param,

  Scaffold(
    bottomBar = { BottomAppBarCompose(context) },
    floatingActionButton = { FloatingActionButtonCompose() },
    floatingActionButtonPosition = FabPosition.End,
    isFloatingActionButtonDocked = true,
    scaffoldState = scaffoldState
  )

Finally, The Compose function looks like below

Now you really want to check out the code, that code looks like below

package com.composefloatingactionbutton

import androidx.compose.foundation.shape.CornerSize
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import com.composefloatingactionbutton.ui.theme.Accent

@Composable
fun FloatingActionButtonCompose() {
  val context = LocalContext.current

  FloatingActionButton(
    shape = MaterialTheme.shapes.large.copy(CornerSize(percent = 50)),
    backgroundColor = Accent,
    contentColor = Color.White,
    onClick = { makeToast(context, "Fab clicked") }) {
    Icon(Icons.Default.Add, contentDescription = null)
    }
}

Scaffold config for FAB button with the bottom bar

Now open the activity and simply configure the the Scaffold compose functions as per code snnipts

package com.composefloatingactionbutton

import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import com.composefloatingactionbutton.ui.theme.ComposeFloatingActionButtonTheme

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      ComposeFloatingActionButtonTheme {
        // A surface container using the 'background' color from the theme
        Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
          ComposeScaffold()
        }
      }
    }
  }
}

@Composable
fun ComposeScaffold() {
  val context = LocalContext.current
  val scaffoldState = rememberScaffoldState()
  Scaffold(
    bottomBar = { BottomAppBarCompose(context) },
    floatingActionButton = { FloatingActionButtonCompose() },
    floatingActionButtonPosition = FabPosition.End,
    isFloatingActionButtonDocked = true,
    scaffoldState = scaffoldState
  ) {

  }
}

fun makeToast(ctx: Context, msg: String) {
  Toast.makeText(ctx, msg, Toast.LENGTH_SHORT).show()
}

Conclusion

That is all about FAB, Using jetpack compose easily you can create Floating Action Button for beauty in your android application. I hope this compose tutorial will help you. If you have any questions please put them into the comment box, I will be happy to answer that.

Please keep in touch and follow us on social media for latest android and cross-platform articles. Please share this blog on own personal facebook and linked profile, That help me to reach out more people for better blog,