Floating Action Button (FAB) is a crucial component in Android app design, providing a prominent action button for common tasks.
With Kotlin’s concise syntax and Android Studio’s powerful tools, implementing a Floating Action Button becomes straightforward.
In this tutorial, we’ll explore how to create and customize a Floating Action Button using Kotlin for your Android app.
Table of Content
Prerequisites
Before we dive into the tutorial, ensure you have the following prerequisites:
- Basic understanding of Kotlin programming language.
- Familiarity with Android Studio and Android app development.
- A working Android Virtual Device (AVD) or a physical Android device for testing.
Setting Up Your Project
Open Android Studio and create a new project. Give the project name FABExample.
How to Create a New Project in Android Studio
Floating Action Button
To add Floating Action Button first change the root tag of activity_main.xml to CoordinatorLayout. Now put the following XML code under the LinearLayout tag.
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginHorizontal="16dp"
android:contentDescription="@string/fab"
android:src="@drawable/ic_round_mode_edit_24" />
Extended FAB
To add Extended Floating Action Button go to activity_main.xml file. Now put the following XML code under the LinearLayout tag.
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="@+id/extendedFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
android:backgroundTint="@color/purple_200"
android:contentDescription="@string/extended_fab"
android:text="@string/write"
app:icon="@drawable/ic_round_mode_edit_24" />
XML Code for FAB and Extended FAB
Here is the final XML code of activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:orientation="vertical">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginHorizontal="16dp"
android:contentDescription="@string/fab"
android:src="@drawable/ic_round_mode_edit_24" />
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="@+id/extendedFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
android:backgroundTint="@color/purple_200"
android:contentDescription="@string/extended_fab"
android:text="@string/write"
app:icon="@drawable/ic_round_mode_edit_24" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Kotlin Code for FAB and Extended FAB
Go to app > java > com.example.fabexample > MainActivity.kt and put the following code after initializing both FAB and Extended FAB.
Adding setOnClickListener on the Floating Action Button
// Set onClickListener on Floating Action Button(FAB)
fab.setOnClickListener {
Toast.makeText(this, "You clicked FAB", Toast.LENGTH_LONG).show()
}
Adding setOnClickListener on Extended Floating Action Button
// Set onClickListener on Extended Floating Action Button(FAB)
extendedFAB.setOnClickListener {
Toast.makeText(this, "You clicked Extended FAB", Toast.LENGTH_LONG).show()
}
Here is the final Kotlin code of the MainActivity.kt class.
package com.example.fabexample
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
import com.google.android.material.floatingactionbutton.FloatingActionButton
class MainActivity : AppCompatActivity() {
private lateinit var fab: FloatingActionButton
private lateinit var extendedFAB: ExtendedFloatingActionButton
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
fab = findViewById(R.id.fab)
extendedFAB = findViewById(R.id.extendedFAB)
// Set onClickListener on Floating Action Button(FAB)
fab.setOnClickListener {
Toast.makeText(this, "You clicked FAB", Toast.LENGTH_LONG).show()
}
// Set onClickListener on Extended Floating Action Button(FAB)
extendedFAB.setOnClickListener {
Toast.makeText(this, "You clicked Extended FAB", Toast.LENGTH_LONG).show()
}
}
}
Testing Your App
Run your app on an Android Virtual Device or a physical device. Verify that the Floating Action Button appears as expected.
Click on the Floating Action Button to ensure it triggers the desired action. Here is the final output screen.
![Floating action button and extended floating action button screenshot.](https://notesjam.com/wp-content/uploads/2024/04/fab-and-extended-fab.webp)
Conclusion
Congratulations! You’ve successfully implemented a Floating Action Button in your Android app using Kotlin.
By following this tutorial, you’ve learned how to add, customize, and implement functionality for the Floating Action Button, a fundamental component of modern Android app design.
Experiment with different attributes and functionalities to enhance your app’s user experience further. Happy coding!