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 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
<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 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
<? xml version = "1.0" encoding = "utf-8" ?> < layer-list xmlns:android = "http://schemas.android.com/apk/res/android" > < 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" android:width = "40dp" xmlns:android = "http://schemas.android.com/apk/res/android" > < 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.
XML
< style name = "floating1" parent = "Widget.Design.FloatingActionButton" > < item name = "android:foreground" > @drawable/sos </ item > </ style > |
Output: