Jetpack Compose 3- Theming
Firstly, Hi all. In this article, which is the 3rd part of our series, we will learn how to set the theme with Jetpack Compose. We will look at concepts such as how the written applications will take styles, which color palettes they will use, which text styles they will apply, etc. in Jetpack Compose and try to apply them.
✨Note: If you have just entered the world of Jetpack Compose, you should read this article after reading the first two articles in our series. You can access these articles from the links below.
Material Theme
Jetpack Compose offers an implementation of Material Design, a comprehensive design system for creating digital interfaces. The Material Design components (buttons, cards, switches, and so on) are built on top of Material Theming, which is a systematic way to customize Material Design to better reflect your product’s brand. A Material Theme contains color, typography and shape attributes. When you customize these attributes, your changes are automatically reflected in the components you use to build your app.
You can also customize your own themes using the Material Theme composable function in Jetpack Compose and apply them to the components you use.
In the attachment above, there is a composable function that comes by default when you start a new compose project. The name of this function is determined by your project name. It is formed by adding the phrase “Theme” to the end of your project name. You can think of this as shaping the generated binding class name when using view binding, according to the name of your xml layout. This composable function also takes two parameters. Let’s see how we can create our own themes with Jetpack Compose by logging in there.
The darkTheme parameter is a parameter used if you are going to support dark themes in your application. Since the colors used will change according to two different themes, we control this parameter and code which color palettes to use according to which theme. Already in the function, you can see that the colors variable is checked and provided according to this parameter.
As the second parameter, a composable function called content is requested. A construct to call your composable functions that will implement this theme. Again, by default, if you send your composable functions designed for your application’s pages as this content parameter in your MainActivity.kt file, you will use the theme throughout the application.
The Material Theme composable function also has 3 parameters such as colors, typography, and shapes. We apply these parameters according to our wishes and specify which colors, font styles, or shapes will be used by the composable functions that will use this theme. When you create a new project, as you can see in the attachment above, the files with these parameters are provided by default.
Color
We determine the colors you use in the application through the color file. We define the colors to be used here using the Color class.
We can define color in several ways. But there are generally 2 styles that are used the most. You can see these two definitions in the gist above. The Color in this gist is not a direct class, these are functions that return the Color class.
We usually used hex format when defining a new color in xml format. The definition here may sound a little different to you. Let’s say we want to define a color with hex code #0000. At this point, if you replace # with 0xFF, you can define this color.
You can give these colors you define to your compenets as in the example above.
There is also a Colors class offered by Compose for modeling the Material Color System. By customizing your material color system through this class, we can ensure that the colors to be used in your application are managed by a single palette. Using this method is highly recommended by android. The reason is, if we are going to support a dark mode or nested theme, it is for convenience and to prevent situations such as refactoring pages.
The Colors class takes every element of the material color system in the above attachment as a parameter. These parameters are used in your components by default.
In the above gist, we defined the colors that we will use in our application through the material color system. The darkColors and lightColors functions used here are functions already provided by Compose that return the Colors class with the given parameters.
If we return to the MaterialTheme composable function from here, we specify the colors to be used in our application by giving the color palettes we defined to the colors parameter according to the dark mode or light mode parameter.
Typography
The Typography class helps you style the texts to be used in your application. You can think about it in the logic of the Colors class above. The MaterailTheme composable function expected a Colors class for the colors we will use throughout the application, and this Colors class was taking colors produced from the Color class according to the material color system as a parameter. Likewise, the Typography parameter is expected as the second parameter, and we define the text styles that we will apply throughout the application through this class. Like the material color system, the Typography class takes the parameters of the Material Type system, and these parameters are provided through the TextStyle class. You can see its usage in the gist below.
Shapes
The last parameter required to create our theme is the shapes parameter. Here, the expected shapes parameter is a class of type Shapes. With this class, we can adjust the appearance of our components.
The Shapes class also expects 3 parameters: small, medium, large. Functions from compose, such as RoundendCornerShape used here, are structures that help us create shapes. Like Colors and Typography, Shapes also affect the components we use by default. It uses Buttons & Text Fields small, Cards and Dialogs medium, and Sheets large shape.
To summarize so far, if we are going to implement a theme in our application, we can do this by providing the colors, typography, and shapes classes we have created through the MaterailTheme composable function. Finally, we shape our application with different themes throughout the application or page-specific by sending composable functions that will apply this theme in the content parameter.
Conclusion
With this article, which is the 3rd article of our series, we tried to learn how to make theme adjustments with Jetpack Compose.
We also reinforced with examples how we applied the color definitions, text styles, and shapes to be used throughout the application. See you in your next article. 👋👋
