Add Dynamic Colour to Your Android App

What do we mean by dynamic colour?

Apps like “Whether App”, “E-commerce app”, and “Social Media” change app colour based on the image displayed on the screen, this is the effect of dynamic colour. Here we will see how we can implement that feature.

Prerequisite: The user knows how to Develop an Android app. Here we will use the Material 3 theme, so the user knows what is material theme and how to enable Material 3 theme in the app.

Setup dependencies and theme

Make sure the project has the below dependency in build.gradle file :

dependencies {

// ...

implementation 'com.google.android.material:material:'

}

Make sure the main theme of the app extends from Theme.material3.*. Here is my style from the app :

Start with the material theme

Google provides easy setup files for material themes and setup colours for us. Here is a link for theme builders to create a custom theme and export it https://m3.material.io/theme-builder. You will see a zip file which has a folder like an image below. Replace the folder in the project and make sure the theme from the zip file has a name you had in the project. You can check the name in the theme.xml file and Manifest file.

Implement Dynamic Colour

Create an Application file and assign it to the app

DynamicColors.applyToActivitiesIfAvailable(this)

The above line indicated we have added dynamic colours for all activities in the app. Now run the app and make sure all steps are correctly implemented. I have added some widgets to the xml file to see the effects of DynamicColor. You can check the image below.

Setup Overlay colours

I have created two overlay colours red and green to demonstrate this code. See my themeoverlay.xml file image below:

I have added two more buttons to change colours dynamically based on user preference. Here is the output of our app.

Change overlay colours dynamically

The below code explains how I have changed the colours for a single activity.

DynamicColors.applyToActivityIfAvailable(this, DynamicColorsOptions.Builder().setThemeOverlay(R.style.DynamicColor_Overlay_Green).build())

This code will only change colours for a single activity to change colours for all activities we can use the applyToActivitiesIfAvailable method, which we have already used in the Application file.

Custom attribute for other widgets

Our settings for theme overlay will only apply to default widget which uses colorPrimay or colour from theme. Here we will see how we can tint imageView or Progressbar based on theme.

We need to create custom attribute, create attrs.xml file in values folder and below code to create custom attribute called iconColor

</resources>

I want to change iconColor based on colorOnPrimaryContainer from the theme setup. So, I have added the below line in my main theme which is DynamicColor.

<item name="iconColor">?colorOnPrimaryContainer</item>

Now we can use this iconColor in the view's xml file. See image below for customAttribute usage in ImageView

Conclusion

Using dynamic colours we can build a UI which can change its colours based on user preference or based on content-specific colours. Custom attributes can be added for more customization. Dynamic colors are API from the material3 library.

Drive video link

If you have any questions regarding Android App Development Connect with us today!