Jetpack Compose: Week 3 #AndroidDevChallenge — Part 1: Setting up Themes

Note: The assets and design specs can be found here: https://github.com/android/android-dev-challenge-compose/blob/assets/Bloom.zip

In this part, we need to setup our fonts, colors, shape, and themes that will be reused across our application.

By doing this, we can avoid repetitive declaration of a specific values of a certain styles and it will be easier for us to debug and modify it in any way we want.

Adding Custom Font

1. Copy the custom fonts — (eg. nunito_sans_bold.ttf, nunito_sans_light.ttf, nunito_sans_semi_bold.ttf)
2. Create new directory under res folder named font
3. Paste the custom fonts
4. Under ui/theme directory, double click the Type.kt file
5. Declare the fonts accordingly:

6. Initialize the specific Typography types using the declared fonts and required specs:

• This is kinda same with React’s https://material-ui.com/components/typography/ and maybe any other Material UI

Setting up Colors

1. Under ui/theme double click the Color.kt file
2. On the given specs, declare all the needed colors and name it accordingly:

• The number after the color defines how darker or lighter the color is.
• Defining the Color using hex:

• 0xmeans hex
• FF means the opacity of your chosen color
• FFF1F1 means your chosen color code, standard will be always 6 characters

Modifying Shapes Values

1. Under ui/theme double click the Shape.kt file
2. Modify the values:

• This will be helpful if you want to modify the border of your app’s button, card, and etc.

Assigning Proper Values to Theme

1. Under ui/theme double click the Theme.kt file
2. First we have to define our LightColorPalette and DarkColorPalette values to support the light and dark mode of the device settings.

• We need to override the default color values from lightColors() method same with the darkColors() method using the declared colors in Color.kt

• If you want to use the default color from the said methods, just don’t redeclare it.

• The Composable method MyTheme basically setup your app/screen theme by overriding the default values and reassigning new ones.
• If you try to explore MaterialTheme these are the default values assigned:

Yay! 👏Your app’s theme is now ready!

For Part 2, we’re gonna create our first screen — the Welcome Screen. You may follow me if you want to be notified 🔔

Hello, I’m MJ (just a noobie), still learning about Jetpack Compose. I will try to share anything useful that I’ve learned during this process. Leave a clap/comment/suggestions to improve my skills! Thank you :)