Building User Interfaces Using Jetpack Compose

In this section, you will learn how to use Jetpack Compose to create user interfaces using Kotlin code, how Compose revolutionized the way we built user interfaces, and how we can translate existing applications to Jetpack Compose. By the end of the chapter, you will be familiar with the most common UI elements in Compose and how to handle user actions.

We will cover the following topics in this chapter:

• What is Jetpack Compose?
• Handling user actions
• Theming in Compose
• Adding Compose to existing projects

Technical requirements

The complete code for all the exercises and the activity in this chapter is available on GitHub at https://packt.link/kb5FW

What is Jetpack Compose?

In past chapters, you learned how to set data into the Android View hierarchy and learned how to use different types of views for different purposes. That approach to user interface building is referred to as the imperative approach.

In the imperative approach, when we want to change the state of the user interface, we will need to manually change each user interface element until we reach the desired outcome.

Let’s assume that because of a user action, we want our TextView to change the text and text color. This means that we would need to invoke setText and setTextColor to achieve our desired effect.

As an alternative to the imperative approach, we have the declarative approach, in which we would need to describe the final state that we want our user interface to reach, and internally, the required invocations would be performed.

This means that our TextView would instead have the text and text color as attributes, and we could define different...

Handling user actions

In the previous section, we learned how to build user interfaces using Jetpack Compose. In the exercise, we were unable to collect the data that the user sets in TextField. In this section, we will learn how to handle the user input as well as the state of the user interface.

Let’s assume we have the following example:

@Composable
fun MyScreen() {
    Column { TextField(value = "", onValueChange = {}) }
}

In this example, we define a TextField that is empty and has no handling for the change of the value. As we’ve seen, this won’t let us introduce any new input from the keyboard because it will always set the text to an empty string.

For us to be able to introduce a new text, we will need to create a mutable variable to store the text inside and for it to survive recomposition. In Jetpack Compose, we can use the @Composable function called remember to define a MutableState that will hold our text:

...

Theming in Compose

In the previous section, we learned how to handle user actions and how to manage the state of a particular screen. But how do we keep our application’s user interface elements consistent across the entire application? In this section, we will look at how we can create reusable elements that are linked to the application’s theme.

You may have noticed, when you carried out the previous exercises, that Android Studio created some files in a ui.theme package. This is because Jetpack Compose is built upon the Material Design library and will assign a theme to your application that is built on Material Design. The approach taken is the following:

1. In the Color.kt file, all the colors of the application are declared:

   val Purple200 = Color(0xFFBB86FC)
   val Purple500 = Color(0xFF6200EE)
   val Purple700 = Color(0xFF3700B3)
   val Teal200 = Color(0xFF03DAC5)

In the preceding example, we have the color hexadecimal names.

2. In Shape.kt, the following...

Adding Compose to existing projects

In this section, we will look at what options we have in terms of introducing Jetpack Compose into an existing Android application and how to get Compose to work with different libraries.

When using Jetpack Compose, you should ideally have a small number of activities, or one if possible, and have all your screens built using Compose. For an existing project to be able to achieve this, it would need to start at the bottom of the View hierarchy, meaning that your existing views should start being migrated to be built in Compose.

To facilitate this transition, Jetpack Compose offers the possibility of using ComposeView in your XML layout, as in the following example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android=
      "http://schemas.android.com/apk/res/android"
    android:orientation="vertical"...

Summary

In this chapter, we looked at how we can build user interfaces using Jetpack Compose. We started by creating simple user interface elements, and we looked at how we can make an entire screen using @Composable functions without any XML code.

Then, we analyzed state management and how we can handle user input, and looked at patterns such as state hoisting, in which we keep our functions as stateless as possible to increase reusability. We then looked at how we can define our own user interface elements and apply themes and styles to them, which allows us to change the entire look of an application without modifying the screens that use the changed elements.

Finally, we looked at how we can add Compose to an existing project and how Compose interacts with popular libraries used for app development. In the chapter’s activity, we applied all these concepts and created an application with a consistent user interface definition with multiple screens defined in Compose...