• Jetpack Compose: Styles and Themes (Part II)
  • By Waseef Akhtar
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: Kimhooo
  • Proofreaders: PingHGao and Jaredliw

Jetpack Compose: Styles and Themes (Part 2)

As of last post, we’ve successfully implemented a RecyclerView (called LazyColumn in Compose) and filled it with a list of puppies for adoption. 🐶

But as I mentioned earlier, we still have a few things to do before we can call it a full Composite application. Now the two things left are:

  1. Design the application according to our final look.
  2. Implement the details page.

In this part of the series, we’ll show you how to use styles and themes in Compose, leverage the application we implemented in the previous article, and give you the final look and feel we want to implement:

To understand where we need to continue, let’s first look at the final result of the previous article:

What we want to see is:

  1. useColor.kt 和 Theme.ktChange the color of the entire application.
  2. See how the dark and light modes work in Compose.
  3. Fix the status bar and system navigation bar to fit the theme of our application.

Let’s get started!

Enable dark mode 💡

As you can see on the final result page, our application looks like it’s enabled in dark mode. If this is how we want the final look (or if we want an application that supports dark mode), it’s pretty simple how our project was originally set up by the Android Studio template. Let’s explore what we mean again.

If you open the project directory, you can see that the project already has the/UI /theme directory. In this directory, there are several Kotlin classes, including Color, Shape, Theme, and Type.

These are the classes where you need to modify the theme and style of your application.

Because in our case, we need to enable dark mode for the application, do the following:

  1. Open the Theme. Kt class.

  2. In BarkTheme Composable, set the dark theme of isSystemInDarkTheme() to true by default.

@Composable
fun BarkTheme(darkTheme: Boolean = true, content: @Composable() () - >Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}
Copy the code
  1. Run the application to see the changes.

We can see that our background has changed… In addition, our text color changed, but the puppy card color did not change.

Let’s fix this quickly:

  1. Open the color. kt class.

  2. Create a new color called graySurface.

val graySurface = Color(0xFF202124)
Copy the code

  1. Now open the Theme. Kt class.

  2. In the DarkColorPalette variable, add a new color definition for the DarkColorPalette and set its value to the color of the graySurface set in Step 2.

Note: In case you’re also wondering what surface is, it’s a color definition provided by the material design color system that affects the surfaces of components such as cards, drawings, and menus:

  1. Finally, if you’ve been following the tutorial, you may remember that when we implemented it in the last article, we hardcoded the colors of the cards, which is not a very good approach. In order to makeColor.ktThe application color values are consistent throughout the application and are best usedColor.ktChange the color value of UI elements instead of changing the color of each UI element individually.

So, in this step, we remove the hard-coded color of the puppy card so that the card shows the real Surface color that we just set.

  1. Open thePuppyListItem.ktClass.
  2. inPuppyListItemIn the composable function, remove this parameter from the card’s composable:backgroundColor value: backgroundColor = Color.White

Run the application to see the changes.

Top of the line! We’ve done everything we need to do.

But…

Have you noticed that the color of the status bar at the top is a little odd? What about the system navigation bar at the bottom? It would be cool if we adjusted them to match our theme.

But there’s a catch. Because the Jetpack Compose library is so young, it currently has some limitations (I’m not even sure if this particular limitation exists). So, to fix the status bar and navigation bar, we’ll use our lovely XML file.

The final adjustment is 👨🎨

To change the status bar color to match our theme:

  1. Open the colors. XML file in the /res folder.

  2. Add the same gray we added to the color.kt class.

<color name="grey"># 202124</color>
Copy the code
  1. Open thethemes.xmlFile.

Note: You may have noticed that there are two themes.xml files in the Themes directory. From now on, when you make changes, it is best to modify the values in both files, as they are related to the dark mode and light mode themes of your application.

  1. Define the statusBarBackground property in theme.bark and set its value to gray.

  2. Now add the statusBarBackground property as the value of Android :statusBarColor.

<! The color of the status bar. -->
<item name="statusBarBackground">@color/grey</item>
<item name="android:statusBarColor" tools:targetApi="l">? attr/statusBarBackground</item>
Copy the code

Now to change the color of the system navigation bar:

  1. Open thethemes.xmlFile.
  2. fornavigationBarColorAdd another item and set its value to? android:attr/windowBackgroundProperty (a color value that automatically changes with system preferences).
<item name="android:navigationBarColor">? android:attr/windowBackground</item>
Copy the code

Run the application to see the changes.

You’re done! This is what our application will end up looking like! 😍

Clap your hands for now that you’ve learned how to create a theme and design style in Compose. 👏

Happy coding! 💻

Final version of the source code

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.