Jetpack Compose: Styles and Themes (Part II)

If you're new to Jetpack Compose and looking at all the cool UI screens and animations around the internet like me, you're probably a bit overwhelmed but also curious about how things work in compose.

As of Part I, we successfully implemented a RecyclerView (known as LazyColumn in Compose), populating it with a list of puppies that we have for adoption. 🐶

But as I mentioned, we still have some things to do before we call it a complete Compose app. The two things left now are:

1. To style the app to our final look.
2. To implement a detailed view screen.

In this part of the series, we'll look at how styles and themes work in Compose, taking our app from Part I and giving it the final look that we want to achieve:

To look at where we need to continue from, let's first look at the final screen from Part I:

The things we're going to look at:

1. Change color throughout the app using Color.kt and Theme.kt.
2. Look at how dark/light mode works in Compose.
3. Fix status bar and system navigation bar to adapt to our app's theme.

Let's get started!

Previous Post

Jetpack Compose: An easy way to RecyclerView (Part I)

If you’re new to Jetpack Compose and looking at all the cool UI screens and animations around the internet like me, you’re probably a bit overwhelmed but also curious about how things work in compose.

Waseef AkhtarWaseef Akhtar

Enabling Dark Mode 💡

As you can see in our final screen, our app looks like it has dark mode enabled. If that's the final look we want (or if we want an app that has support for Dark mode), it's super easy with how our project is set up initially by the Android Studio template. Let's explore a bit more to see what we mean.

If you open you project directory, you can see that you already have /ui/theme directory and inside that, you have a few Kotlin classes: Color, Shape, Theme, Type.

These are all the classes that you need to modify the theme and styling of your app.

Since in our case, we need to enable dark mode for our app, do the following:

1. Open Theme.kt.
2. Inside BarkTheme composable, replace the darkTheme default value from isSystemInDarkTheme() to true.

3. Run the app to see the changes.

We can see that our background has changed.. but, with that, we also have our text color changed but not the puppy card color.

Let's quickly fix that:

1. Open Color.kt.
2. Add a new color named graySurface.

3. Now open Theme.kt.

4. Inside the DarkColorPalette variable, add a new color definition for surface and set its value to the graySurface color that we set in #2.

Note: In case you want to know what surface is, it's a color definition provided by the color system of Material Design that affect surfaces of components, such as cards, sheets, and menus:

5. Finally, if you've been following the tutorial step by step, you might remember that we hardcoded our card color when we implemented it in Part I, which is not really a great way of doing it. In order to let our app color values from Color.kt work consistently throughout the app, it's always a better idea to change the color values of the UI elements using Color.kt rather than changing each UI element's color individually.

So at this step, we remove that hardcoded color from our puppy card in order for the card to show the true surface color we just set.

1. Open PuppyListItem.kt.
2. Inside PuppyListItem composable function, remove this parameter from the Card composable: backgroundColor value: backgroundColor = Color.White

Run the app now to see the changes.

Super! We've done everything we needed to do at this time.

But..

Do you see that the status bar looks a bit odd at the top with that odd color? And what about the system navigation bar at the bottom? It'd be extra cool if we fixed them to match our overall theme.

But there's a catch. Since Jetpack Compose is still early to work with, it comes with its limitation for the time being (And I'm not entirely sure if there even is this particular limitation). So to fix the status bar and navigation bar, we're going to head to our dear 'ol XML for this.

The Final Fixes 👨‍🎨

In order to change the status bar color to match our theme:

1. Open colors.xml under /res.
2. Add the same gray color we added to our Color.kt.

3. Open themes.xml.

Note: You might notice that you have two themes.xml in themes directory. Make it a good practice from now onwards to change the values in both these files whenever you're making a change because these two files refer to the dark mode and light mode theme of the app.

4. Define the statusBarBackground attribute inside Theme.Bark and set its value to our gray color.

5. Now add this statusBarBackground attribute as our value for android:statusBarColor.

Now in order to change the system navigation bar's color:

1. Open themes.xml.
2. Add another item for navigationBarColor and set its value to ?android:attr/windowBackground attribute (which is a color value that changes automatically with system preferences)

Run the app now to see the changes.

And.. there you go! Thats our final look of the app! 😍

Give yourself a pat on the back at this point for having now learnt how theming and styling are done in Compose. 👏

Up Next

For the next post, we'll look into how to:

1. Implement a detailed view screen for our list view.

You can find it available in the upcoming weeks. Until then, give yourself a pat on the back, and..

Happy coding! 💻

Source code for the Final Version

waseefakhtar/bark

An Android App for the #AndroidDevChallenge. Contribute to waseefakhtar/bark development by creating an account on GitHub.

GitHubwaseefakhtar

Awesome that you came this far! 👏 Now I'd love to know what the most annoying part of this post was or if it was of any help to you. Either ways, you can drop me a DM on: www.twitter.com/waseefakhtar ✌️