FloatingActionButton Example

FloatingActionButton in Android.

FloatingActionButton (FAB) is a popular UI element in Android apps. It is a circular button that hovers above the UI and is used to perform the primary action in the app. FAB is a part of the Material Design Guidelines by Google and is widely used in modern Android apps.

In this article, we will discuss how to implement FloatingActionButton in Android using Kotlin. We will go step by step and see how to add FAB to your app.

Step 1: Create a new project

Create a new project in Android Studio and select Kotlin as the programming language. We will create a simple app that contains a FAB and a TextView.

Step 2: Add the FAB dependency

Add the FAB dependency to your project by adding the following code to your app-level build.gradle file.

implementation 'com.google.android.material:material:1.3.0'

This will add the Material Design Library to your project.

Step 3: Add the FAB to your layout file

Add the FAB to your layout file by adding the following code to your activity_main.xml file.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@android:drawable/ic_dialog_email" />

This will add the FAB to your app and set its position to the bottom right corner of the screen.

Step 4: Add a click listener to the FAB

Add a click listener to the FAB by adding the following code to your MainActivity.kt file.

fab.setOnClickListener {
    // Add your code here
}

This will add a click listener to the FAB and execute the code inside the block when the FAB is clicked.

Step 5: Add functionality to the FAB

Add functionality to the FAB by adding the following code to the click listener block.

fab.setOnClickListener {
    textView.text = "Hello World!"
}

This will change the text of the TextView to "Hello World!" when the FAB is clicked.

Step 6: Final code

The final code for your MainActivity.kt file should look like this.

class MainActivity : AppCompatActivity() {

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

        val textView: TextView = findViewById(R.id.text_view)
        val fab: FloatingActionButton = findViewById(R.id.fab)

        fab.setOnClickListener {
            textView.text = "Hello World!"
        }
    }
}

Examples

In this section we will explore some floating action button examples for absolute beginners. This tutorial is meant for beginners and teaches you how to use a floating action button. First you render a floating action button on the screen at the right bottom corner of the screen then handle it's click events.

Example 1: Kotlin Android FloatingActionButton Example

A simple floating action button example for beginners. Here is the demo:

Step 1: Dependencies

We do not need any third party dependencies. Instead we will place the material package as a gradle dependency as follows:

implementation 'com.google.android.material:material:1.1.0'

Step 2: Design Layout

In your main activity layout simply add the floating action button as below:

<?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"
    android:textDirection="ltr"
    android:layoutDirection="ltr">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:srcCompat="@android:drawable/sym_action_call"
        tools:layout_editor_absoluteX="339dp"
        tools:layout_editor_absoluteY="636dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="50dp"
        tools:ignore="MissingConstraints" />

</RelativeLayout>

Step 3: Write Kotlin Code

There is no major code written in the main activity. All we do is reference the floating action button using kotlin synthetics and then handle it's click event:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        floatingActionButton.setOnClickListener {
            Toast.makeText(this,"floatingActionButton",Toast.LENGTH_SHORT).show()
        }
    }
}

Run

Finally run the project.

Reference

Below are the source code download links:

No.	Link
1.	Download code
2.	Browse code
3.	Follow code author

Conclusion

In this article, we have seen how to implement FloatingActionButton in Android using Kotlin. We have gone step by step and added the FAB to our app. We have also added a click listener to the FAB and added functionality to it. The FAB is a simple but powerful UI element in Android apps and can be used to improve the user experience of your app.