Open In App

Theming Floating Action Buttons in Android with Example

Last Updated : 19 Feb, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

Prerequisite:

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.

Theming Floating Action Buttons in Android with Example

Steps for Creating Theming Floating Action Buttons

Step 1: Create an Empty Activity Android Studio Project

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:

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.

Vector Asset

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

Clip art

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: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:

Output UI

  • 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:

Output UI

  • 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: 

Theming Floating Action Buttons in Android with Example

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:

Theming Floating Action Buttons in Android with Example

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:

Theming Floating Action Buttons in Android with Example

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:

Theming Floating Action Buttons in Android with Example

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:

Theming Floating Action Buttons in Android with Example



Similar Reads

Theming Floating Action Button with Bottom Navigation Bar in Android
In the previous article How to Add a Floating Action Button to Bottom Navigation Bar in Android?, it's well discussed how to add the Floating Action Button to the Bottom Navigation Bar in Android. Now to increase the UI/UX experience theming also can be done for the Bottom Navigation Bar. So in this article, it's been discussed how we can theme the
4 min read
Theming Material Design Buttons in Android with Examples
Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android application. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. If you like the way how the UI ele
8 min read
Floating Action Button (FAB) in Android with Example
The floating action button is a bit different button from the ordinary buttons. Floating action buttons are implemented in the app's UI for primary actions (promoted actions) for the users and the actions under the floating action button are prioritized by the developer. For example the actions like adding an item to the existing list. So in this a
9 min read
Extended Floating Action Button in Android with Example
In the Floating Action Button (FAB) article, we have discussed on Normal/Regular Floating Action Button and Mini Floating Action Button. In this article, let's discuss and implement an Extended Floating Action Button in android which extends when clicked and shrinks when closed and also shows the information about the sub-floating action button for
10 min read
Counter Floating Action Button in Android with Example
Counter Floating Action button is seen in most of the E-commerce apps where we are using the functionality to display the number of items that are present in the user's shopping cart. In this article, we will take a look at implementing this counter floating action button in our Android app in Android Studio. What we are going to build in this arti
3 min read
Theming of Material Design EditText in Android with Example
Prerequisite: Material Design EditText in Android with Examples In the previous article Material Design EditText in Android with Examples Material design Text Fields offers more customization and makes the user experience better than the normal text fields. For example, Icon to clear the entire EditText field, helper text, etc. In this article, it'
4 min read
Theming Material Design Snackbars in Android with Example
In the previous article, it's been discussed Snackbar Material Design Components in Android. In this article, it's been discussed how we can theme material design Snackbar and increase the User Experience. Theming Example 1:This method is done using the styles.xml file. Where we need to override the default style of the Snackbar.Have a look at the
5 min read
How To Avoid Snackbar Overlap Floating Action Button in Android?
If one has implemented the Floating Action Button (FAB) in his android application and also there exists a Snackbar implementation in the same application, then the Snackbar is definitely going to overlap the Floating Action Button. Prerequisite: Floating Action Button (FAB) in Android with ExampleHow to add a Snackbar in Android Have a look at the
4 min read
How to Add a Floating Action Button to Bottom Navigation Bar in Android?
The floating action button is a bit different button from the ordinary buttons. Floating action buttons are implemented in the app’s UI for primary actions (promoted actions) for the users and the actions under the floating action button are prioritized by the developer. For example the actions like adding an item to the existing list. Bottom navig
3 min read
Auto-Hide or Auto-Extend Floating Action Button for NestedScrollView in Android
In the previous article Extended Floating Action Button in Android with Example it's been discussed how to implement the Extended Floating Action Button (FAB) in Android and more of its functionalities. In this article it's been discussed it's one of the features to auto-hide or auto-extend the Floating Action Button in Android. Have a look at the
7 min read
Article Tags :