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.
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!