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 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.
Step 2: Create a floating action button
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:gravity = "center" >
< com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
style = "@style/floating1" />
</ LinearLayout >
|
Step 3:
Create an xml file in your drawable folder and copy this code.
<? xml version = "1.0" encoding = "utf-8" ?>
< item >
< shape
android:shape = "oval" >
< gradient
android:startColor = "#FB564A"
android:endColor = "#CF1306" />
</ shape >
</ item >
< item android:gravity = "center" >
< vector android:height = "40dp" android:tint = "#FFFFFF"
android:viewportHeight = "24" android:viewportWidth = "24"
< path android:fillColor = "@android:color/white" android:pathData = "M13.5,7h-3c-1.1,0 -2,0.9 -2,2v6c0,1.1 0.9,2 2,2h3c1.1,0 2,-0.9 2,-2V9C15.5,7.9 14.6,7 13.5,7zM13.5,15h-3V9h3V15zM1,15h4v-2H3c-1.1,0 -2,-0.9 -2,-2V9c0,-1.1 0.9,-2 2,-2h4v2H3v2h2c1.1,0 2,0.9 2,2v2c0,1.1 -0.9,2 -2,2H1V15zM17,15h4v-2h-2c-1.1,0 -2,-0.9 -2,-2V9c0,-1.1 0.9,-2 2,-2h4v2h-4v2h2c1.1,0 2,0.9 2,2v2c0,1.1 -0.9,2 -2,2h-4V15z" />
</ vector >
</ item >
</ layer-list >
|
Step 4:
In your themes file xml file write this code in it.
< style name = "floating1" parent = "Widget.Design.FloatingActionButton" >
< item name = "android:foreground" >
@drawable/sos
</ item >
</ style >
|
Output: