Android Floating Action Button (FAB) Using Kotlin with Example

Last Updated:
Floating Action Button Example

Read later
Save important notes and articles from internet using arusaquotes app.

Create 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 uder 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 Floating Action Button

To add Extended Floating Action Button go to activity_main.xml file. Now put the following XML code uder 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

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

Go to app > java > com.example.fabexample > MainActivity.kt and put the following code after initializing both FAB and Extended FAB.

Adding setOnClickListener on 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 MainActivity.kt

    
    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()
            }
        }
    }

Output

Here is the final output.

android FAB with example
Android FAB and Extended FAB

Recommended Articles

Migrating to Material 3: A Step-by-Step Guide
Mastering Android Bottom Sheets: A Comprehensive Tutorial in Kotlin
Understanding RecyclerView in Android using Kotlin
Creating a Chatbot App like ChatGPT using Kotlin: A Step-by-Step Guide
Android CardView With Image and Text Using Kotlin
Creating an Option Menu in Android with Kotlin

Learn Android App Development using Kotlin.

Start Learning