Android Floating Action Button (FAB) Using Kotlin with Example

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.

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

Help us create more content by becoming a patron! Our supporters get exclusive access to our android tutorial project source code.

Become a patron