Introduction

In the previous lesson, you added some simple styling to the app, adding padding, arranging the positioning of UI elements, and styling some text. At the end of the lesson, your chat app UI looked like this:

By the end of this lesson, your app UI will look like this:

That looks a lot more like a real chat app! To get to this point, you’ll add many more composables and put them together with nesting and layouts. You’ll also refactor the code to place the layout into its own package and files.

By the end of this lesson, you’ll be able to:

• Understand the purpose of layout groups in Jetpack Compose.
• Nest composables.
• Refactor composables into individual files.
• Use previews with Jetpack Compose.

It’s time to build the chat interface!