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