Building a Real-World App

The previous chapters explored various aspects of Jetpack Compose. For example, Chapter 2, Understanding the Declarative Paradigm, compared the traditional view system to composable functions and explained the benefits of the declarative approach. Chapter 4, Laying Out UI Elements in Compose, gave you a solid understanding of important built-in layout composables, such as Box(), Row(), and Column(). In Chapter 5, Managing State of Your Composable Functions, we looked at state and learned about the important role it plays in a Compose app.

Now, it’s time to see how these key elements work together in a real-world app. In this chapter, you will learn how Compose apps can be themed. We will also look at Scaffold(), an integrational UI element that picks up quite a few concepts that were originally related to activities, such as toolbars and menus. Finally, we will learn how to add screen-based navigation.

In this chapter, we will cover the following...

Technical requirements

Please refer to the Technical requirements section in Chapter 1, Building Your First Compose App, for information on how to install and set up Android Studio, as well as how to get the example apps. This chapter includes one example app, ComposeUnitConverter, as shown in the following screenshot:

Figure 6.1 – The ComposeUnitConverter app

Styling a Compose app

Most of your Compose UI will likely use the built-in composable functions from the androidx.compose.material3 package. They implement the design language known as Material Design and its successor, Material You (which was introduced with Android 12). Material You is the native design language on Android, though it’s also available on other platforms. It expands on the idea of a pen, paper, and cards, and it makes heavy use of grid-based layouts, responsive animations, and transitions, as well as padding and depth effects. Material You advocates large buttons and rounded corners. Custom color themes can be generated from the user’s wallpaper.

Defining colors, shapes, and text styles

While apps should certainly honor both system and user preferences regarding visual appearance, you may want to add colors, shapes, or text styles that reflect your brand or corporate identity. So, how can you modify the look of the built-in Material composable functions...

Integrating toolbars and menus

Early Android versions did not know about action or app bars. They were introduced with API level 11 (Honeycomb). The options menu, on the other hand, has been around since the beginning, but it was opened by pressing a dedicated hardware button and shown at the bottom of the screen. For Android 3, it moved to the top and became a vertical list. Some elements could be made available permanently as actions. In a way, the options menu and the action bar merged. While all the aspects of the action bar were originally handled by the hosting activity, the AppCompat support library introduced an alternative implementation (getSupportActionBar()).

Using Scaffold() to structure your screen

Jetpack Compose includes several app bar implementations that follow Material You specifications. They can be added to a Compose UI through Scaffold(), a composable function that acts as an app frame or skeleton. The following code snippet is the root of the ComposeUnitConverter...

Adding navigation

Scaffold() allows you to put content in a slot at the bottom of the screen using its bottomBar parameter. This can, for example, be a BottomAppBar(). Material Design bottom app bars provide access to a bottom navigation drawer and up to four actions, including a floating action button. ComposeUnitConverter adds BottomNavigation() instead. Material Design bottom navigation bars allow movement between primary destinations in an app.

Defining screens

Conceptually, primary destinations are screens, something that, before Jetpack Compose, may have been displayed in separate activities. Here’s how screens are defined in ComposeUnitConverter:

sealed class ComposeUnitConverterScreen(
  val route: String,
  @StringRes val label: Int,
  val icon: ImageVector
) {
  companion object {
    val screens = listOf(
      Temperature,
      Distances...

Summary

This chapter showcased how key elements of Jetpack Compose work together in a real-world app. You learned how to theme Compose apps and how to keep your Compose theme in sync with resource-based themes using colorResource().

Scaffold() acts as an app frame or skeleton. We used its slot API to plug in a top app bar with a menu, as well as a bottom bar to navigate between screens using the Compose version of Jetpack Navigation.

In the next chapter, Exploring App Architecture, we will discuss how to separate UI and business logic. We will revisit ComposeUnitConverter, this time focusing on its use of ViewModels. But there’s more. I will also explain how to make sure your app feels snappy by introducing side effects.

Questions

1. What parts does a Compose theme consist of?
2. How can your app react to changes between light mode and dark mode?
3. What is Scaffold() used for and what are its main elements?
4. What are the basic Compose Navigation building blocks and how do they work?