Floating Action Button In Android Using Kotlin

Learn how to create Floating Action Button(FAB) and Extended Floating Action Button in Android using Kotlin with an example.

Android Floating Action Button using Kotlin

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.

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.
FAB and Extended FAB Demo

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!