Theming Floating Action Buttons in Android with Example

Prerequisite:

• Floating Action Button (FAB) in Android with Example
• Extended Floating Action Button in Android with Example

Android application developers want to seek the attention of the users by customizing and theming the android application widgets and keep more traffic of customers only by the design of the application. In this article, it has been discussed theming one of the most important UI elements that is Floating Action Buttons (extended as well as normal). Below are some sample images of Theming Floating Action Buttons.

Steps for Creating Theming Floating Action Buttons

Step 1: Create an Empty Activity Android Studio Project

• Create an Empty Activity Android studio project. You may refer to this How to Create/Start a New Project in Android Studio.

Step 2: Add a dependency to the app level Gradle file.

• Here we are using the Floating action button which is designed and developed by Google Material Design Team.
• Add the dependency in the build.gradle(app) file as:

implementation ‘com.google.android.material:material:1.3.0-alpha02’

• Make sure that add the dependency to the app level Gradle file. After adding the dependency you need to click on the “Sync Now” button which appears at the top right corner of the Android Studio IDE.
• When you click on the Sync Now button make sure that you are connected to the network so that it can download the required files.
• Refer the below image if you can’t get the steps mentioned above or if you can’t locate the app level Gradle file:

Step 3: Change the base application theme in the styles.xml file

• The theme needs to be changed as the ExtendedFloating action button is the child class of the Google Material Design Buttons. So it needs the MaterialComponent theme to be applied to the Base theme of the application. Otherwise, the app will crash immediately as soon as we launch the application.
• You may refer to this article: Material Design Buttons in Android with Example, as the ExtendedMaterial design button, is child class of the Material design buttons. The article says, the advantages of having Material design buttons, and why the theme needs to be changed.
• Go to app -> src -> main -> res -> values -> styles.xml and change the base application theme. The MaterialComponents contains various action bar theme styles, one may invoke any of the MaterialComponents action bar theme styles, except AppCompat styles. Below is the code for the styles.xml file.

XML

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your theme here -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

If you are unable to get the things in the step mentioned above you may refer to this image.

Step 4: Import some of the vector icons in the drawable folder

• In this case, simple add vector, add alarm, vector, add person vector icons are imported for demonstration purpose.
• To import any vector in the project one needs to right-click on the drawable folder -> New -> Vector Asset.
• A new pop window will be opened and choose any vector you want by clicking on the Clip Art button.
• You can refer to the following image to how to open the vector asset selector.

• You may refer the following image to how to locate the Clip Art button and choose the vectors.

Step 5: Working with the activity_main.xml file

• Now in the activity_main.xml file, add a normal Floating Action Button and an Extended Floating Action Button. Make sure to use the ConstraintLayout.
• Invoke both of the Floating Action Button, so that it can be seen how these both buttons changes after manipulating the styles.xml file.
• Invoke the following code to add both Floating Action Buttons:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <!--Google material normal Floating Action Button-->
    <!--one needs to keep the margin of 16dp from the screen to button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_add_black_24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <!--Google material Extended Floating Action Button-->
    <!--one needs to keep the margin of 16dp from the screen to button-->
    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:text="Actions"
        app:icon="@drawable/ic_add_black_24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

After invoking the code, the following UI is produced:

• To change the background color of both the FABs invoke the following attribute while defining these two of the FABs in the activity_main.xml file (add backgroundTint manually because all FAB will be applied with the default SmallComponent theme).

android:backgroundTint=”@color/colorAccent”

Now let’s discuss how to change the theme of both of the Floating action Buttons in a single code:

• To change the theme of both FABs we need to override the default theme that is SmallComponent theme in the styles.xml file: 

XML

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--to do the changes in the corner, the cornerFamily
            attribute is the part of the SmallComponent-->
        <!--so we need to override the shapeAppearanceSmallComponent-->
        <!--which is the default theme applied for all of the
            Google MDC buttons it may be FAB or MDC Buttons-->
        <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
    </style>

    <style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">cut</item>
    </style>

</resources>

Output: Run on Emulator (after making changes to styles.xml):

• One can observe that in the above code the “cornerFamily” attribute is invoked as “cut” value. So let’s overriding the corner family in from the SmallComponent theme.
• The “cornerFamily” attribute contains the two values that are “cut” and “rounded”. For more information on these continue reading the article on how to change the corner size with the help of “cornerSize” attribute.
• So this method of changing the theme affects all of the FAB types whether it may be an Extended or Normal FAB.
• Even it changes the shape and theme of the Google Material Design Buttons if there are implemented in the application. Please refer to this: Material Design Buttons in Android with Example.

Now let’s discuss how to separately change the theme of both type of FABs:

• Now in the same styles.xml file, we need to do small changes.
• In the previous case, we have invoked the item “shapeAppearanceSmallComponent” inside the AppTheme style.
• Now we need to add the items “extendedFloatingActionButtonStyle” for Extended FAB and “floatingActionButtonStyle” for normal FAB, to differentiate the theming of both.
• Refer to the following code on how it has been done: 

XML

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!--this attribute is to change the theme of the extended FAB-->
        <item name="extendedFloatingActionButtonStyle">
            @style/Widget.App.ExtendedFloatingActionButton</item>

        <!--this attribute is to change the theme of the normal FAB-->
        <item name="floatingActionButtonStyle">@style/Widget.App.FloatingActionButton</item>

    </style>
    <!--changing the theme of the base application ends here-->

    <!--Now changing theme of extended FAB begins from here-->
    <!--make sure to change the value of the parent as
        Widget.MaterialComponents.ExtendedFloatingActionButton-->
    <!--as we are only changing the theme of the extended FAB-->

    <!--inside Widget.App.ExtendedFloatingActionButton there are two attribute-->
    <!--which are making the change of the theme of the extended FAB-->
    <!--those are materialThemeOverlay and shapeAppearanceOverlay-->
    <style name="Widget.App.ExtendedFloatingActionButton" parent="Widget.MaterialComponents.ExtendedFloatingActionButton">

        <!--the following attribute will changes in the appearance
            of the extended FAB in terms of colors-->
        <item name="materialThemeOverlay">@style/myCustomThemeForExtendedFab</item>

        <!--the following attribute will change in the
            shape appearance of the extended FAB-->
        <item name="shapeAppearanceOverlay">@style/customExtendedFAB</item>

        <!--to make the code look cleaner and readable, the above
            two children are implemented separately-->
    </style>

    <!--this style is the child of the shapeAppearanceOverlay attribute
        which in turn is the child of materialThemeOverlay-->
    <style name="customExtendedFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">cut</item>

        <!--and the cornerSize makes the cut for all 4 corners of the FAB as 10dp-->
        <item name="cornerSize">10dp</item>

    </style>

    <!--Here no need of mentioning the parent-->
    <!--because this is already the child of the
        shapeAppearanceOverlay which in turn is the child-->
    <!--of the Widget.App.ExtendedFloatingActionButton-->
    <style name="myCustomThemeForExtendedFab" parent="">

        <!--this attribute gives makes the change in the background of the FAB-->
        <item name="colorSecondary">@color/colorPrimary</item>

        <!--this attribute gives makes the change in the text and icon color of the FAB-->
        <item name="colorOnSecondary">@android:color/white</item>

    </style>
    <!--Changing the theme of the extended FAB completes here-->

    <!--Now changing theme of normal FAB begins from here-->
    <!--make sure to change the value of the parent as
        Widget.MaterialComponents.FloatingActionButton-->
    <!--as we are only changing the theme of the normal FAB-->

    <!--inside Widget.App.FloatingActionButton there are two attribute-->
    <!--which are making the change of the theme of the normal FAB-->
    <!--those are materialThemeOverlay and shapeAppearanceOverlay-->
    <style name="Widget.App.FloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton">

        <!--the following attribute will changes in the appearance of
            the normal FAB in terms of colors-->
        <item name="materialThemeOverlay">@style/myCustomThemeForNormalFab</item>

        <!--the following attribute will change in the shape appearance of the normal FAB-->
        <item name="shapeAppearanceOverlay">@style/customNormalFAB</item>

        <!--to make the code look cleaner and readable, the above
            two children are implemented separately-->
    </style>

    <style name="customNormalFAB">

        <!--for the normal FAB the cornerFamily is given the value as the rounded-->
        <!--in this case it has been done to differentiate the
            themes of the normal FAB and extended FAB-->
        <item name="cornerFamily">rounded</item>

        <!--and the cornerSize makes rounded corner for all
            4 corners of the FAB as 20dp radius-->
        <item name="cornerSize">20dp</item>

    </style>

    <style name="myCustomThemeForNormalFab" parent="">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="colorSecondary">@android:color/holo_green_dark</item>

        <!--this attribute gives makes the change in the text and icon color of the FAB-->
        <item name="colorOnSecondary">@android:color/white</item>

    </style>
    <!--Changing the theme of the normal FAB completes here-->

</resources>

After making changes to the styles.xml file the following UI is produced:

• Now different themes are established separately for the normal FAB and extended FAB.

Note: The colors of both FABs are made different in this case, for demonstration purpose only, as this is not recommended the colors of the all FABs must be same for entire application according to material design recommendations.

Experiment with the customNormalFAB and customExtendedFAB

• Now onward experiment with the children “customNormalFAB” and “customExtendedFAB” (and remaining other things are unchanged) to make changes in the shapes of both the FABs.
• Also experiment with “cornerSizeTopRight”, “cornerSizeTopLeft”, “cornerSizeBottomRight” and “cornerSizeBottomLeft”.
• Now make changes to both children as follows: 

Example 1:

XML

<!--for Extended FAB-->
<style name="customExtendedFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">cut</item>
        <!--this attribute will make changes to Top Right according to value-->
        <item name="cornerSizeTopRight">0dp</item>
        <!--this attribute will make changes to Top Left according to value-->
        <item name="cornerSizeTopLeft">0dp</item>
        <!--this attribute will make changes to Bottom Right according to value-->
        <item name="cornerSizeBottomRight">0dp</item>
        <!--this attribute will make changes to Bottom Left according to value-->
        <item name="cornerSizeBottomLeft">0dp</item>

</style>

<!--for Normal FAB-->
<style name="customNormalFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">cut</item>
        <!--this attribute will make changes to Top Right according to value-->
        <item name="cornerSizeTopRight">0dp</item>
        <!--this attribute will make changes to Top Left according to value-->
        <item name="cornerSizeTopLeft">0dp</item>
        <!--this attribute will make changes to Bottom Right according to value-->
        <item name="cornerSizeBottomRight">0dp</item>
        <!--this attribute will make changes to Bottom Left according to value-->
        <item name="cornerSizeBottomLeft">0dp</item>

</style>

Output UI will be:

Example 2:

XML

<!--for Extended FAB-->
<style name="customExtendedFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">cut</item>
        <!--this attribute will make changes to Top Right according to value-->
        <item name="cornerSizeTopRight">0dp</item>
        <!--this attribute will make changes to Top Left according to value-->
        <item name="cornerSizeTopLeft">14dp</item>
        <!--this attribute will make changes to Bottom Right according to value-->
        <item name="cornerSizeBottomRight">14dp</item>
        <!--this attribute will make changes to Bottom Left according to value-->
        <item name="cornerSizeBottomLeft">0dp</item>

</style>

<!--for Normal FAB-->
<style name="customNormalFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">cut</item>
        <!--this attribute will make changes to Top Right according to value-->
        <item name="cornerSizeTopRight">0dp</item>
        <!--this attribute will make changes to Top Left according to value-->
        <item name="cornerSizeTopLeft">14dp</item>
        <!--this attribute will make changes to Bottom Right according to value-->
        <item name="cornerSizeBottomRight">14dp</item>
        <!--this attribute will make changes to Bottom Left according to value-->
        <item name="cornerSizeBottomLeft">0dp</item>

</style>

Output UI will be:

Example 3:

XML

<!--for Extended FAB-->
<style name="customExtendedFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">cut</item>
        <!--this attribute will make changes to Top Right according to value-->
        <item name="cornerSizeTopRight">0dp</item>
        <!--this attribute will make changes to Top Left according to value-->
        <item name="cornerSizeTopLeft">0dp</item>
        <!--this attribute will make changes to Bottom Right according to value-->
        <item name="cornerSizeBottomRight">14dp</item>
        <!--this attribute will make changes to Bottom Left according to value-->
        <item name="cornerSizeBottomLeft">14dp</item>

</style>

<!--for Normal FAB-->
<style name="customNormalFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">cut</item>
        <!--this attribute will make changes to Top Right according to value-->
        <item name="cornerSizeTopRight">0dp</item>
        <!--this attribute will make changes to Top Left according to value-->
        <item name="cornerSizeTopLeft">0dp</item>
        <!--this attribute will make changes to Bottom Right according to value-->
        <item name="cornerSizeBottomRight">14dp</item>
        <!--this attribute will make changes to Bottom Left according to value-->
        <item name="cornerSizeBottomLeft">14dp</item>

</style>

Output UI will be:

Example 4:

XML

<!--for Extended FAB-->
<style name="customExtendedFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">rounded</item>
        <!--this attribute will make changes to Top Right according to value-->
        <item name="cornerSizeTopRight">0dp</item>
        <!--this attribute will make changes to Top Left according to value-->
        <item name="cornerSizeTopLeft">14dp</item>
        <!--this attribute will make changes to Bottom Right according to value-->
        <item name="cornerSizeBottomRight">14dp</item>
        <!--this attribute will make changes to Bottom Left according to value-->
        <item name="cornerSizeBottomLeft">0dp</item>

</style>

<!--for Normal FAB-->
<style name="customNormalFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">rounded</item>
        <!--this attribute will make changes to Top Right according to value-->
        <item name="cornerSizeTopRight">0dp</item>
        <!--this attribute will make changes to Top Left according to value-->
        <item name="cornerSizeTopLeft">14dp</item>
        <!--this attribute will make changes to Bottom Right according to value-->
        <item name="cornerSizeBottomRight">14dp</item>
        <!--this attribute will make changes to Bottom Left according to value-->
        <item name="cornerSizeBottomLeft">0dp</item>

</style>

Output UI will be:

Example 5:

XML

<!--for Extended FAB-->
<style name="customExtendedFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">rounded</item>
        <!--this attribute will make changes to Top Right according to value-->
        <item name="cornerSizeTopRight">14dp</item>
        <!--this attribute will make changes to Top Left according to value-->
        <item name="cornerSizeTopLeft">14dp</item>
        <!--this attribute will make changes to Bottom Right according to value-->
        <item name="cornerSizeBottomRight">0dp</item>
        <!--this attribute will make changes to Bottom Left according to value-->
        <item name="cornerSizeBottomLeft">0dp</item>

</style>

<!--for Normal FAB-->
<style name="customNormalFAB">

        <!--for the extended FAB the cornerFamily is given the value as the cut-->
        <item name="cornerFamily">rounded</item>
        <!--this attribute will make changes to Top Right according to value-->
        <item name="cornerSizeTopRight">14dp</item>
        <!--this attribute will make changes to Top Left according to value-->
        <item name="cornerSizeTopLeft">14dp</item>
        <!--this attribute will make changes to Bottom Right according to value-->
        <item name="cornerSizeBottomRight">0dp</item>
        <!--this attribute will make changes to Bottom Left according to value-->
        <item name="cornerSizeBottomLeft">0dp</item>

</style>

Output UI will be: