Android Floating Action Button in Kotlin
Last Updated :
28 Jul, 2022
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:
Similar Reads
Floating Action Button in Android using Jetpack Compose
Floating Action Button is added to the android application to perform some important within the android application. These are implemented in the android application UI for some primary actions within the application. There are different types of floating action buttons such as simple, square, and e
3 min read
Floating Action Button (FAB) in Android with Example
The floating action button is a bit different button from the ordinary buttons. Floating action buttons are implemented in the app's UI for primary actions (promoted actions) for the users and the actions under the floating action button are prioritized by the developer. For example the actions like
7 min read
Floating Action Button using Fab Option Library in Android
Floating Action Button using Fab Options is another unique way of displaying various options. With the help of this, we can Navigate to different screens easily. This Floating Action button display various menu with Animation. So it increases user experience. In this article, we are going to learn h
3 min read
Theming Floating Action Buttons in Android with Example
Prerequisite: Floating Action Button (FAB) in Android with ExampleExtended Floating Action Button in Android with Example Android application developers want to seek the attention of the users by customizing and theming the android application widgets and keep more traffic of customers only by the d
12 min read
How to Add Image on Floating Action Button in Android?
A floating action button (FAB) is a user interface element in the mobile application that is typically circular and floats above the main content. It usually has a prominent color and icon, and it is used to provide quick access to the most commonly used action within the app. Step-by-Step Implement
1 min read
Counter Floating Action Button in Android with Example
Counter Floating Action button is seen in most of the E-commerce apps where we are using the functionality to display the number of items that are present in the user's shopping cart. In this article, we will take a look at implementing this counter floating action button in our Android app in Andro
3 min read
Extended Floating Action Button in Android with Example
In the Floating Action Button (FAB) article, we have discussed on Normal/Regular Floating Action Button and Mini Floating Action Button. In this article, let's discuss and implement an Extended Floating Action Button in Android which extends when clicked and shrinks when closed and also shows the in
10 min read
How to Change Colors of a Floating Action Button in Android?
Android applications use the Floating Action Button for prompting the user to perform some important action within the android application. Floating Action Buttons in android applications are used to perform some important functionality within android applications. Many times in the android applicat
3 min read
How to change Input Method Action Button in Android?
In this article, IME(Input Method Action) Option is changed in android according to our requirement. Input Method Action Button is located in the bottom right corner of the soft keyboard. By default, the system uses this button for either a Next or Done action unless your text field allows multi-lin
2 min read
How to Handle IME Options on Action Button Click in Android?
We often observe that a keyboard pops up when we try to enter input in editable fields. These inputs are generally accepted by the application for performing specific functions and display desired results. One of the most common editable fields, that we can see in most of the applications in daily u
3 min read