Jetpack compose: How to use Floating Action Button

Jetpack Compose - Using Floating Action Button

This code demonstrates how to create and use a Floating Action Button (FAB) in a Jetpack Compose application. FABs are prominent buttons typically used for primary actions within an app.

Here's a breakdown of the code:

  1. Setting Up:

    • The code starts with a basic MainActivity class extending AppCompatActivity.
    • In onCreate, we set the content of the activity using setContent with the MainContent composable function.

  2. Main Content:

    • The MainContent composable function utilizes the Scaffold composable to structure the screen layout.
    • Scaffold provides functionalities like background color, a top bar, and a slot for a floating action button.
    • We customize the background color and position the FAB at the end of the screen using FabPosition.End.

  3. Creating the FAB:

    • Inside the floatingActionButton parameter of Scaffold, we define the FAB using the FloatingActionButton composable.
    • Properties like onClick define the action triggered when the button is clicked. In this case, a toast message is displayed.
    • We set custom colors for the FAB background and content, along with elevation for a slight shadow effect.

  4. FAB Icon:

    • The FAB content is an Icon composable with the Icons.Filled.Upload icon and a content description for accessibility.

  5. Preview:

    • The ComposablePreview function allows a basic preview of the composable but is currently commented out.

Summary

This example showcases the creation of a simple FAB with a click action and visual customization within a Scaffold layout. You can further customize the FAB by changing the icon, adding text labels, or creating extended FABs with more complex content.


MainActivity.kt 

package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import androidx.activity.compose.setContent
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Upload
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        Scaffold(
            backgroundColor = Color(0xFFFEFEFA),
            floatingActionButtonPosition = FabPosition.End,
            floatingActionButton = {
                FloatingActionButton(
                    onClick = {
                        Toast.makeText(
                            this,
                            "Clicked",
                            Toast.LENGTH_SHORT
                        ).show()
                    },
                    backgroundColor = Color(0xFF88540B),
                    contentColor = Color.White,
                    elevation = FloatingActionButtonDefaults.elevation(6.dp)
                ) {
                    Icon(
                        Icons.Filled.Upload,
                        contentDescription = "Localized description"
                    )
                }
            }
        ){}
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}
More android jetpack compose tutorials