Floating Action Button in Android using Jetpack Compose

Floating Action Button is added to the android application to perform some important within the android application. These are implemented in the android application UI for some primary actions within the application. There are different types of floating action buttons such as simple, square and extended floating action buttons.

Steps to Implement Floating Action Button

Step 1: Create a New Project in Android Studio

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Step 2: Working with Color.kt file

Navigate to app > java > {package-name} > ui.theme > Color.kt file and add the below code to it. Comments are added in the code to get to know in detail. 

Color.kt:

Step 3: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

MainActivity.kt:

Using Floating Action Button with Scaffold (Recommended Approach)

In real-world applications, Floating Action Buttons are generally used inside a Scaffold, which provides a dedicated slot for FAB placement as per Material Design guidelines.

Output:

Note: The video output corresponds to the initial Floating Action Button examples without Scaffold. For production-level applications, refer to the Scaffold-based implementation discussed above.