Member-only story
Theming in Jetpack Compose for Android
Handling colors, typography, and shapes
In this article, you’ll learn how to implement theming for apps that are built using Jetpack Compose. Themes in Compose have three main aspects: colors, fonts, and shapes. You’ll learn how to create and use all three of them by the end of this article.
Note: Jetpack Compose recently moved to Beta. This means there will no longer be any drastic changes in the API structure. So it would be a great time to learn how to work with the next-generation UI kit for Android development. Beginning with themes is the perfect starting point, so enjoy the article.
You need to install Android Studio Canary, Arctic Fox (2020.3.1) version to use the Jetpack Compose Beta.
Introduction
In the traditional UI kit (i.e. view-/XML-based layouts), we usually use the themes.xml file to design themes. But when it comes to Jetpack Compose, everything will be done in Kotlin files.
Jetpack Compose themes primarily have two advantages over conventional themes.
- It’s a lot simpler to implement custom themes or Day/Night theming options when compared to the traditional approach.
- Themes in Jetpack Compose are based on Material Design, so we no longer need to worry about following Material Design guidelines when using themes in Jetpack Compose.
If you love Kotlin, then you’re going to enjoy using themes in Jetpack Compose. The named parameters, lambda functions, default parameter values, and other cool features of Kotlin make it fun to implement theming in Compose.
Key Areas
When it comes to theming in Compose, there are three important things to focus on: colors, fonts, and shapes. Each area has its importance, so we’ll learn how to create them one by one in detail. At the end, we are going to use them in our Compose theme.
Colors
When it comes to themes, colors are the most important aspect to focus on. In the traditional approach to theming, we would maintain a couple of color resource files in Day and Night segments. It’s not a bad approach, but when it comes to implementing custom themes, we have to…
