Theming Floating Action Buttons in Android with Example
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.
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:
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 >
< style name = "AppTheme" parent = "Theme.MaterialComponents.DayNight.DarkActionBar" >
< 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
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
< 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" />
< 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 >
< style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" >
< item name = "colorPrimary" >@color/colorPrimary</ item >
< item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item >
< item name = "colorAccent" >@color/colorAccent</ item >
< 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 >
< style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" >
< item name = "colorPrimary" >@color/colorPrimary</ item >
< item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item >
< item name = "colorAccent" >@color/colorAccent</ item >
< item name = "extendedFloatingActionButtonStyle" >
@style/Widget.App.ExtendedFloatingActionButton</ item >
< item name = "floatingActionButtonStyle" >@style/Widget.App.FloatingActionButton</ item >
</ style >
< style name = "Widget.App.ExtendedFloatingActionButton" parent = "Widget.MaterialComponents.ExtendedFloatingActionButton" >
< item name = "materialThemeOverlay" >@style/myCustomThemeForExtendedFab</ item >
< item name = "shapeAppearanceOverlay" >@style/customExtendedFAB</ item >
</ style >
< style name = "customExtendedFAB" >
< item name = "cornerFamily" >cut</ item >
< item name = "cornerSize" >10dp</ item >
</ style >
< style name = "myCustomThemeForExtendedFab" parent = "" >
< item name = "colorSecondary" >@color/colorPrimary</ item >
< item name = "colorOnSecondary" >@android:color/white</ item >
</ style >
< style name = "Widget.App.FloatingActionButton" parent = "Widget.MaterialComponents.FloatingActionButton" >
< item name = "materialThemeOverlay" >@style/myCustomThemeForNormalFab</ item >
< item name = "shapeAppearanceOverlay" >@style/customNormalFAB</ item >
</ style >
< style name = "customNormalFAB" >
< item name = "cornerFamily" >rounded</ item >
< item name = "cornerSize" >20dp</ item >
</ style >
< style name = "myCustomThemeForNormalFab" parent = "" >
< item name = "colorSecondary" >@android:color/holo_green_dark</ item >
< item name = "colorOnSecondary" >@android:color/white</ item >
</ style >
</ 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
< style name = "customExtendedFAB" >
< item name = "cornerFamily" >cut</ item >
< item name = "cornerSizeTopRight" >0dp</ item >
< item name = "cornerSizeTopLeft" >0dp</ item >
< item name = "cornerSizeBottomRight" >0dp</ item >
< item name = "cornerSizeBottomLeft" >0dp</ item >
</ style >
< style name = "customNormalFAB" >
< item name = "cornerFamily" >cut</ item >
< item name = "cornerSizeTopRight" >0dp</ item >
< item name = "cornerSizeTopLeft" >0dp</ item >
< item name = "cornerSizeBottomRight" >0dp</ item >
< item name = "cornerSizeBottomLeft" >0dp</ item >
</ style >
|
Output UI will be:
Example 2:
XML
< style name = "customExtendedFAB" >
< item name = "cornerFamily" >cut</ item >
< item name = "cornerSizeTopRight" >0dp</ item >
< item name = "cornerSizeTopLeft" >14dp</ item >
< item name = "cornerSizeBottomRight" >14dp</ item >
< item name = "cornerSizeBottomLeft" >0dp</ item >
</ style >
< style name = "customNormalFAB" >
< item name = "cornerFamily" >cut</ item >
< item name = "cornerSizeTopRight" >0dp</ item >
< item name = "cornerSizeTopLeft" >14dp</ item >
< item name = "cornerSizeBottomRight" >14dp</ item >
< item name = "cornerSizeBottomLeft" >0dp</ item >
</ style >
|
Output UI will be:
Example 3:
XML
< style name = "customExtendedFAB" >
< item name = "cornerFamily" >cut</ item >
< item name = "cornerSizeTopRight" >0dp</ item >
< item name = "cornerSizeTopLeft" >0dp</ item >
< item name = "cornerSizeBottomRight" >14dp</ item >
< item name = "cornerSizeBottomLeft" >14dp</ item >
</ style >
< style name = "customNormalFAB" >
< item name = "cornerFamily" >cut</ item >
< item name = "cornerSizeTopRight" >0dp</ item >
< item name = "cornerSizeTopLeft" >0dp</ item >
< item name = "cornerSizeBottomRight" >14dp</ item >
< item name = "cornerSizeBottomLeft" >14dp</ item >
</ style >
|
Output UI will be:
Example 4:
XML
< style name = "customExtendedFAB" >
< item name = "cornerFamily" >rounded</ item >
< item name = "cornerSizeTopRight" >0dp</ item >
< item name = "cornerSizeTopLeft" >14dp</ item >
< item name = "cornerSizeBottomRight" >14dp</ item >
< item name = "cornerSizeBottomLeft" >0dp</ item >
</ style >
< style name = "customNormalFAB" >
< item name = "cornerFamily" >rounded</ item >
< item name = "cornerSizeTopRight" >0dp</ item >
< item name = "cornerSizeTopLeft" >14dp</ item >
< item name = "cornerSizeBottomRight" >14dp</ item >
< item name = "cornerSizeBottomLeft" >0dp</ item >
</ style >
|
Output UI will be:
Example 5:
XML
< style name = "customExtendedFAB" >
< item name = "cornerFamily" >rounded</ item >
< item name = "cornerSizeTopRight" >14dp</ item >
< item name = "cornerSizeTopLeft" >14dp</ item >
< item name = "cornerSizeBottomRight" >0dp</ item >
< item name = "cornerSizeBottomLeft" >0dp</ item >
</ style >
< style name = "customNormalFAB" >
< item name = "cornerFamily" >rounded</ item >
< item name = "cornerSizeTopRight" >14dp</ item >
< item name = "cornerSizeTopLeft" >14dp</ item >
< item name = "cornerSizeBottomRight" >0dp</ item >
< item name = "cornerSizeBottomLeft" >0dp</ item >
</ style >
|
Output UI will be:
Last Updated :
19 Feb, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...