How to Add Image on Floating Action Button in Android?

Last Updated : 24 Apr, 2025

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>