Floating Action Button in Android Using Kotlin

Floating Action Button Example
Android Floating Action Button

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

Learn Android App Development using Kotlin.

Start Learning