How to Change Colors of a Floating Action Button in Android?

Last Updated : 24 Jul, 2022

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 applications we want to change the color of our floating action button dynamically. In this article, we will take a look at How to change the color of the Floating action button in android. A sample video is given below to get an idea about what we are going to do in this article.

Note: This Android article covered in both Java and Kotlin languages.

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: Working with the activity_main.xml file

Navigate to app > res > layout > activity_main.xml and add the code below. Comments are added in the code to get to know in 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:id="@+id/idRLContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"> 
  
    <!--on below line we are creating 
        a text for our app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/idFAB"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Changing color of Floating Action Button in Android"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" /> 
  
    <!--on below line we are creating a simple floating action button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/idFAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="20dp"
        android:src="@drawable/ic_android"
        app:backgroundTint="@color/purple_200"
        app:tint="@color/white" /> 
  
</RelativeLayout>

Step 3: Working with the MainActivity file

Navigate to app > java > your app’s package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject 
  
import android.content.res.ColorStateList 
import android.graphics.Color 
import android.os.Bundle 
import android.widget.Toast 
import androidx.appcompat.app.AppCompatActivity 
import com.google.android.material.floatingactionbutton.FloatingActionButton 
import kotlin.random.Random.Default.nextInt 
  
class MainActivity : AppCompatActivity() { 
  
    // on below line creating a variable. 
    lateinit var fabAction: FloatingActionButton 
      
    override fun onCreate(savedInstanceState: Bundle?) { 
        super.onCreate(savedInstanceState) 
        setContentView(R.layout.activity_main) 
  
        // on below line we are initializing our variables. 
        fabAction = findViewById(R.id.idFAB) 
  
        // on below line we are adding click listener  
        // for our simple button 
        fabAction.setOnClickListener { 
            // on below line we are generating a random color 
            // for our floatingaction button. 
            val color = Color.argb(255, nextInt(256), nextInt(256), nextInt(256)) 
  
            // on below line we are updating color for our floating  
           // action button using above color 
            fabAction.backgroundTintList = ColorStateList.valueOf( 
                color 
            ) 
            // on below line we are displaying a toast message. 
            Toast.makeText(this, "Color of FAB changed..", Toast.LENGTH_SHORT).show() 
        } 
  
    } 
}

Java

package com.gtappdevelopers.kotlingfgproject; 
  
import android.content.res.ColorStateList; 
import android.graphics.Color; 
import android.os.Bundle; 
import android.view.View; 
import android.widget.Toast; 
import androidx.appcompat.app.AppCompatActivity; 
import com.google.android.material.floatingactionbutton.FloatingActionButton; 
import java.util.Random; 
  
public class MainActivity extends AppCompatActivity { 
  
    // on below line we are creating variables. 
    private FloatingActionButton fabAction; 
  
    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
  
        // on below line we are initializing our variables. 
        fabAction = findViewById(R.id.idFAB); 
  
        // on below line we are adding click listener for our simple button 
        fabAction.setOnClickListener(new View.OnClickListener() { 
            @Override
            public void onClick(View v) { 
                // on below line we are generating a random color 
                // for our floating action button. 
                Random rnd = new Random(); 
                int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256)); 
                  
                // on below line we are updating color for our floating action button 
                // using above color 
                fabAction.setBackgroundTintList(ColorStateList.valueOf(color)); 
                  
                // on below line we are displaying a toast message. 
                Toast.makeText(MainActivity.this, "Color of FAB changed..", Toast.LENGTH_SHORT).show(); 
            } 
        }); 
    } 
}