Jetpack Compose Ep:6 — Floating Action Button App

Published in

Kotlin Mumbai

4 min readJul 14, 2020

Introducing in a sweet and simple way about Floating Action Button and its attributes using a proper structure.

Jetpack Compose Ep6 — Floating Action Button App

To learn the know or learn about the previous episode, than visit to the below link. Source code of this project is available in the article itself.

Note: In this project, I’m using Android Studio 4.1 Canary 10 with a gradle plugin of classpath “com.android.tools.build:gradle:4.1.0-alpha10”. It may change accordingly with the time, so please do check the current version to avoid version related issues.

What is a Floating Action Button?

A floating action button is also known as FAB in short. It’s a button which represents the primary action of a screen.

Parameters of Floating Action Button

It has some parameter and they are as follow:

modifier — It is used to apply padding to the FAB.
onClick — It is called when an user clicks on it. But, if the onclick is null, the FAB will be disabled.
shape — It provides shape to the FAB
backgroundColor — It is used to change the background color of the FAB
contentColor — It is used to change the color of the content it holds.
elevation — It is used to control the shadow below the button by provided a custom elevation in DP.
icon — It is used to set an icon on the FAB.

Now, let’s begin by creating a ComposableLayout.kt interface and create a custom function named FloatingActionButtonBuild() by declaring it over here as shown below:

interface ComposableLayout {

    @Composable
    fun FloatingActionButtonBuild(
        mModifier: Modifier? = null,
        mShape: Shape? = null,
        mBackgroundColor: Color? = null,
        mContentColor: Color? = null,
        mElevation: Dp? = null,
        mIcon: VectorAsset? = null,
        mIconModifier: Modifier? = null,
        mIconTint: Color? = null
    )
}

Similarly, create a new class file named as ComposableComponent.kt and the implement the interface file ComposableLayout.kt into it. Override the method here and define it over here as shown below:

class ComposableComponent : ComposableLayout {

    @Composable
    override fun FloatingActionButtonBuild(
        mModifier: Modifier?,
        mShape: Shape?,
        mBackgroundColor: Color?,
        mContentColor: Color?,
        mElevation: Dp?,
        mIcon: VectorAsset?,
        mIconModifier: Modifier?,
        mIconTint: Color?
    ) {
        FloatingActionButton(
            onClick = {

            },
            modifier = mModifier ?: Modifier.padding(0.dp),
            shape = mShape ?: CircleShape,
            backgroundColor = mBackgroundColor ?: Color.DarkGray,
            contentColor = mContentColor ?: Color.Black,
            elevation = mElevation ?: 0.dp,
            icon = {
                mIcon?.let {
                    Icon(
                        asset = it,
                        modifier = mIconModifier ?: Modifier.padding(0.dp),
                        tint = mIconTint ?: Color.Black
                    )
                }

            }
        )
    }
}

Then, move to the MainActivity.kt file and create a custom function named as DefaultFloatingActionButtonComponent() as shown below:

@Composable
fun DefaultFloatingActionButtonComponent() {
    ComposableComponent().FloatingActionButtonBuild()
}

Now, to provide a custom color, create a ColoredFloatingActionButtonComponent() function as shown below:

@Composable
fun ColoredFloatingActionButtonComponent() {
    ComposableComponent().FloatingActionButtonBuild(
        mBackgroundColor = Color.Red
    )
}

Create a function named IconFloatingActionButtonComponent() to render a Icon on the button as shown below:

@Composable
fun IconFloatingActionButtonComponent() {
    ComposableComponent().FloatingActionButtonBuild(
        mIcon = Icons.Default.CheckCircle,
        mIconModifier = Modifier.padding(8.dp),
        mIconTint = Color.Yellow
    )
}

Now, create a ShapeFloatingActionButtonComponent() function to display a FAB in a distinct shape as shown below:

@Composable
fun ShapeFloatingActionButtonComponent() {
    ComposableComponent().FloatingActionButtonBuild(
        mShape = RectangleShape,
        mBackgroundColor = Color.Blue,
        mIcon = Icons.Default.Call,
        mIconModifier = Modifier.padding(8.dp),
        mIconTint = Color.White
    )
}

Lastly, create a ElevatedFloatingActionButtonComponent() function to render an elevated FAB as shown below:

@Composable
fun ElevatedFloatingActionButtonComponent() {
    ComposableComponent().FloatingActionButtonBuild(
        mBackgroundColor = Color.White,
        mElevation = 16.dp,
        mIcon = Icons.Default.ShoppingCart,
        mIconModifier = Modifier.padding(8.dp),
        mIconTint = Color.Red
    )
}

Call all the functions in the scope of the setContent() function by wrapping it with AppTheme() as shown below:

AppTheme {
    Column(
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalGravity = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        DefaultFloatingActionButtonComponent()
        ColoredFloatingActionButtonComponent()
        IconFloatingActionButtonComponent()
        ShapeFloatingActionButtonComponent()
        ElevatedFloatingActionButtonComponent()
    }
}