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:

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

Android Developer | Newbie