Android Floating Action Button in Kotlin

Floating action buttons are used in android applications to indicate the user for some priority-based task. Generally floating action buttons in the android applications are found aligned to the bottom end of the application. In this article, we will take a look at How to implement the Floating Action Button in Android using Kotlin. A sample video is given below to get an idea about what we are going to do in this article.

Note: If you are looking to implement the Floating action button in android using Java Check out the following article: Floating Action Button in Android using Java

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Add icons for floating action buttons in the drawable folder

Navigate to the app > res > drawable folder. Right-click on it > New > Vector Asset > Now select the icon which you want to add and simply click on finish to add that icon to the drawable folder. 

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

    <!--on below line we are creating a
        vertical linear layout for our fabs.-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="10dp"
        android:orientation="vertical"
        android:padding="10dp">

        <!--on below line we are creating a add fab-->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/idFABHome"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_marginBottom="16dp"
            android:background="@color/purple_200"
            android:contentDescription="@string/app_name"
            android:padding="4dp"
            android:src="@drawable/ic_home"
            android:visibility="gone"
            app:backgroundTint="@color/purple_200"
            app:tint="@color/white" />

        <!--on below line we are creating a home fab
             and setting its visibility to gone-->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/idFABSettings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_marginBottom="16dp"
            android:background="@color/purple_200"
            android:contentDescription="@string/app_name"
            android:padding="4dp"
            android:src="@drawable/ic_settings"
            android:visibility="gone"
            app:backgroundTint="@color/purple_200"
            app:tint="@color/white" />

        <!--on below line we are creating a settings fab
            and setting its visibility to gone-->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/idFABAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_marginBottom="16dp"
            android:background="@color/purple_200"
            android:contentDescription="@string/app_name"
            android:padding="4dp"
            android:src="@drawable/ic_add"
            app:backgroundTint="@color/purple_200"
            app:tint="@color/white" />

    </LinearLayout>

</RelativeLayout>

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.floatingactionbutton.FloatingActionButton

class MainActivity : AppCompatActivity() {

    // on below line we are creating variable for all
    // floating action buttons and a boolean variable.
    lateinit var addFAB: FloatingActionButton
    lateinit var homeFAB: FloatingActionButton
    lateinit var settingsFAB: FloatingActionButton
    var fabVisible = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // initializing variables of floating
        // action button on below line.
        addFAB = findViewById(R.id.idFABAdd)
        homeFAB = findViewById(R.id.idFABHome)
        settingsFAB = findViewById(R.id.idFABSettings)

        // on below line we are initializing our
        // fab visibility boolean variable
        fabVisible = false

        // on below line we are adding on click listener
        // for our add floating action button
        addFAB.setOnClickListener {
            // on below line we are checking
            // fab visible variable.
            if (!fabVisible) {

                // if its false we are displaying home fab
                // and settings fab by changing their
                // visibility to visible.
                homeFAB.show()
                settingsFAB.show()

                // on below line we are setting
                // their visibility to visible.
                homeFAB.visibility = View.VISIBLE
                settingsFAB.visibility = View.VISIBLE

                // on below line we are checking image icon of add fab
                addFAB.setImageDrawable(resources.getDrawable(R.drawable.ic_close))

                 // on below line we are changing
                 // fab visible to true
                fabVisible = true
            } else {

                // if the condition is true then we
                // are hiding home and settings fab
                homeFAB.hide()
                settingsFAB.hide()

                // on below line we are changing the
                // visibility of home and settings fab
                homeFAB.visibility = View.GONE
                settingsFAB.visibility = View.GONE

                // on below line we are changing image source for add fab
                addFAB.setImageDrawable(resources.getDrawable(R.drawable.ic_add))

                // on below line we are changing
                // fab visible to false.
                fabVisible = false
            }
        }

        // on below line we are adding
        // click listener for our home fab
        homeFAB.setOnClickListener {
            // on below line we are displaying a toast message.
            Toast.makeText(this@MainActivity, "Home clicked..", Toast.LENGTH_LONG).show()
        }

        // on below line we are adding on
        // click listener for settings fab
        settingsFAB.setOnClickListener {
            // on below line we are displaying a toast message
            Toast.makeText(this@MainActivity, "Settings clicked..", Toast.LENGTH_LONG).show()
        }
    }
}

Now run your application to see the output of it. 

Output: