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

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

Setting up Colors

  • 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

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

Assigning Proper Values to Theme

  • 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 :)

Android Developer | Newbie