Handling Component Changes Affected by Theme on Android

Photo by Daniele Levis Pelusi on Unsplash

Hey Folks! In this story I will try to explain what we learned while using the same components in different themes and how we managed them?

First thing first, how this journey started? Actually, in Ozan SuperApp we have some mods which is using different themes and some of the screens are almost same with the main application but just needs a bit style changes. Suppose that you have a MaterialTextView with multiple attrs which is defined in style and you just want to change text font when the theme is changed.

Let’s start!

In Ozan SuperApp we are mostly using the material design components and they don’t support the creating or updating views with style. And our first thought was finding a way of changing the components programmatically or using styles when the theme is changed. Then we met with Paris. Actually Paris is an awesome library, it’s able to do what we want but as I said we are using the material design components and Paris doesn’t directly support the material design components. But I want the mention Paris on this story because I think this library can be useful for someone else.

GitHub - airbnb/paris: Define and apply styles to Android views programmatically

Then we added theme parameter to our components for changing them in runtime. This method made us able to change every part of the component in runtime but we don’t need to change everything on runtime. Mostly we need to change them per activities which is using different theme and we love using styles! We prefer to make this component changes on theme/style side instead of the runtime changes.

using theme parameter for component changes

Playing with Styles and Attrs

In Android world we mostly using the attrs for the custom components but we can also use them for styles. Let’s go step by step. Suppose that you have a screen which is used by 2 different themes and component will be same, just we need to change title text style.

First of all just define an attribute :

Then let’s say the themes named as ThemeA and ThemeB, set your themes for this attribute.

And apply this style like this :

All set! Now our component is using the theme for styling the title. ThemeA gonna use Large font and ThemeB gonna use XLarge font.

With this way you can change anything you want like colors, text styles, background etc..

Conclusion

Changing the styles can be painful some times, i.e. when you are trying to change it in runtime. For runtime changes managing them inside of the component will be a better solution. But I hope using attr/theme way will be useful for the theme affected changes, in this story I tried to explain how we can use attrs in themes for our styles.

Thanks for reading! If you enjoyed this story, please click the 👏 button and share it to help others!

If you have any kind of feedback, feel free to connect with me on Twitter.