Overview
Hello folks, hope you are doing well. So you all know that Google has launched Android 13 and has introduced “Material You” which is also called “Material 3” along with Android 12. So, as a developer, you all are curious to know about how to implement Material You in your project.
What is Material You?
The simple answer is Material You is an enhanced version or we can say a newer version of material design. Previously in material design, dynamic colour was not introduced but in Material You dynamic colour is the main highlight. So now the question is what is dynamic colour? The dynamic colour means the app will take its colour according to your device’s theme colour. Now I hope you have an idea about Material You.
How to implement/update to Material 3?
In this blog, I am going to create one small and simple application which is named Rent & Ride and we will see implementation in steps so you can have a proper idea of how to implement it. But before we start you must have a basic theme and material components knowledge. So let’s start with step one.
Step 1: The first thing you should do in your build.gradle file is to update/add material dependency to the latest version. In my case, the latest one is 1.5.0-alpha04.
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}Change the compileSdkVersion and targetSdkVersion to
android {
compileSdkVersion 31
defaultConfig {
// ...
targetSdkVersion 31
}
}
- Note: Whenever you create a theme for material 3 then your theme must change to Theme.MaterialComponents.* To Theme.Material3.* in your theme.xml file
- Now your theme.xml looks like
<style name="Theme.DynamicColorDmo" parent="Theme.Material3.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#1C1B18</item>
<item name="colorPrimaryVariant">#FFC107</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/blue</item>
<item name="colorSecondaryVariant">@color/blue_dark</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">@color/material_dynamic_primary10</item>
</style>
</resources>
As well as color.xml file
<resources> <color name="color_primary">#1C1B18</color> <color name="color_primary_variant">#FFC107</color> <color name="purple_200">#FFBB86FC</color> <color name="blue">#3F51B5</color> <color name="blue_dark">#132170</color> <color name="purple_700">#FF3700B3</color> <color name="teal_200">#FF03DAC5</color> <color name="black">#FF000000</color> <color name="white">#FFFFFFFF</color> </resources>
Your file structure will be
NOTE: You may get an error message about your AndroidManifest.xml file and Android 12 apps needing to specify an explicit value for android:exported for the activity.
Step 2: Now firstly check-in your AndroidManifest.xml that the android:exported value to be true because due to that you may get an error message. And in Android 12 apps need to specify an explicit value for android:exported=”true” for the activity.
<application
……
>
<activity
…
android:exported="true">
…
</activity>
</application>
Step 3: Now add your dynamic colours to the application. For that, you have to create a class file that extends Application() class. In my case, I have created a DynamicColor named file and extended it with Application class as you can see below.
class DynamicColor: Application() {
override fun onCreate() {
super.onCreate()
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Now the main thing is what the applyToActiviesIfAvaliable(this) method means right?
- So this method will add dynamic colours to all the activities which are present in your project.
- In case you want to apply your theme given theme to activities then just add one param applyToActiviesIfAvaliable(this,R.style.<YOUR_THEME_NAME>)
Add class name to AndroidManifest.xml with . symbol.
<application android:name=".DynamicColor" ..... </application>
Step 4: Now we are almost done with dynamic colour implementation and now we will apply colours to our views but you must use Material 3 below. You can see the example.
<com.google.android.material.textview.MaterialTextView … android:textColor="@color/material_dynamic_primary0" … />
- As seen above, I’ve used color.material_dynamic_primary0. The reason is this colour is system generated color if you remember then we had declared color_primary in color.xml file and assign it to <item name=”colorPrimary”>@color/color_primary</item> so android Material 3 generates its different variants of that colour which is different in shades material_dynamic_primary_0 means the darker shade and material_dynamic_primary100 means the lightest shade. In between there are many more like material_dynamic_primary10, material_dynamic_primary200, etc. just remember one thigh as you increase the value the colour will become lighter in shade.
- The last thing is that you must have an Android 12 or above device or emulator and to enable the theme app icon go to your device setting -> Wallpapers and Style -> Change the theme colours. And see the reflection in your application.
- So that’s it we had successfully done with material 3 just run and check output is the same as below.
How to set dynamic a Icon?
- Dynamic icons are easy to implement. Firstly you need to make one change in build.gradle file just change compileSdkVersion 31
To compileSdkPreview “Tiramisu”. - Google recently released Android 13 Developer Preview 2 so Tiramisu is the official name of Android 13 you can read more here.
- Now you have to choose any icon for your app. One thing to keep in mind is to choose an icon as simple as the reason is It will look more beautiful with the theme app icon. I have chosen.
- One more thing to keep in mind that Google recommends is that the logo fits within a 36 x 36 dp area inside a 90 x 90 dp container. If the logo needs to be larger, it can be a maximum of 60 x 60 dp.
- Now add your app icon in the project the same way as you are adding the icon still shown below.
- Just want to add an icon then follow the below steps:
- Right-click on drawable -> New -> vector assets -> choose path of icon -> click on Next and Finish button.
- Add icon along with icon background colour changes then:
- Right-click on drawable -> New -> Image Assets (customize your icon with colour, height, width, etc) -> click on Next then Finish button.
- Just want to add an icon then follow the below steps:
- Add your app icon in AndroidManifest.xml and check if android:roundIcon and android:icon are both in your manifest then you must remove the reference (delete the directory) of android:roundedIcon or add a monochrome icon in the drawable defined by the android:roundedIcon attribute. In my case, I have removed the rounded icon directory.
Now the final thing is to open path rootDirectory -> app -> src -> main -> res -> mipmap-anydpi-v26 -> open ic_launcher.xml (in my case there is ic_launcher_logo.xml) the file looks like
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_launcher_background"/> <foreground android:drawable="@drawable/ic_launcher_logo"/> </adaptive-icon>
- And add <monochrome android:drawable=“@drawable/<YOUR_APP_ICON>”/> below the <foreground android …./> this will add support for dynamic icons.
- The last thing is that you must have an Android 12 or above device or emulator and to enable the theme app icon go to your device setting -> Wallpapers and Style -> enable Themed Icon.
That’s it. The output will be as below.
Conclusion:
Congratulations ??? you have added support for dynamic icons in your project. Want to see the full project? Here’s the github repo link.
You may also like
How do you Integrate AI and Personalization Features into Your ecommerce App?
In the ever-evolving digital landscape with the changing pre...
Redefining Healthcare Experiences: Gamification in Healthcare: Benefits, Trends & Examples
Gamification in healthcare apps reveals a new possibility in...
Gamification in Education: The Winning Trio of AR, VR & AI
Relying on conventional techniques for modern-day challenges...
