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

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();
            }
        });
    }
}

Now run your application to see the output of the application. 

Output: