Chapters
Chapters

Chapters

Hide chapters

Jetpack Compose by Tutorials

Second Edition · Android 13 · Kotlin 1.7 · Android Studio Dolphin

Before You Begin

Section 0: 6 chapters
Show chapters Hide chapters

Section I: Getting Started With Jetpack Compose

Section 1: 4 chapters
Show chapters Hide chapters

Section II: Composing User Interfaces

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Building Complex Apps With Jetpack Compose

Section 3: 5 chapters
Show chapters Hide chapters

Section IV: UI Testing & Accessibility

Section 4: 2 chapters
Show chapters Hide chapters

Section V: Glances & Keeping Upto Date With Jetpack Compose

Section 5: 3 chapters
Show chapters Hide chapters

Section VI: Appendices

Section 6: 1 chapter
Show chapters Hide chapters

5. Combining Composables
Written by Denis Buketa

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Great job on completing the first section of this book! Now you know the basic pillars of Compose, you have everything you need to tackle the challenges of the second section.

The goal of the second section is to show you Jetpack Compose in action. Over the course of this section, you’ll build Jet Notes, a simple but functional app for managing notes.

Each chapter in this section will explain certain concepts you’ll apply to gradually build the different parts of the app. Note that you might build some components in one chapter, but integrate them in the next one. Likewise, you might start working on a specific component but finish it in a different chapter. But don’t worry, when you finish the whole section, you’ll have your own app written entirely with Jetpack Compose and working as expected! :]

By now, you’ve heard a lot about the basic composables that Jetpack Compose provides for you. In this chapter:

  • You’ll learn how to think about UI design when building it with Jetpack Compose.
  • You’ll see how you can combine basic composables to create complex UI.
  • You’ll create two components with different complexity for Jet Notes.

Let’s first explore the features you’ll build for your app.

Application Features

Before you start writing code, have a look at the app concept and its features:

Application Overview
Application Overview

Don’t worry about the details on each screen. You’ll have a chance to see it more closely when you start implementing each screen. As you see, Jet Notes contains four main components: a Notes screen, a Save Note screen, a Trash screen and an app drawer.

The Notes screen displays the list of created notes. From here, the user can open an existing note, create a new one or open the app drawer.

The Save Note screen has two modes: an edit mode and a create a new note mode. When the user clicks on a note in the Notes screen, the Save Note screen will open in edit mode. The user can then edit the note or simply move it to the Trash screen by clicking a trash icon on the app bar.

To create a new note, the user taps on the Floating Action Button (FAB) available in the Notes screen. That opens the Save Note screen in the mode for creating a new note.

There are two types of notes: regular notes and checkable notes. Checkable notes are notes the user can mark — or check — as done. The user can make any note checkable by using a switch component in the Save Note screen. In the Notes screen, checkable notes have a checkbox to mark the note as done.

Tapping the navigation icon on the app bar or swiping from the left border of the screen opens the app drawer. The app drawer switches between the Notes and the Trash screens. Using the drawer, a user can also change the app’s theme from light to dark.

In the Trash screen, the user can switch between regular and checkable notes using two tabs. The user can select notes and restore them or delete them permanently.

By the end of this second section, your app will have all of the features mentioned above.

Now you’ve familiarized yourself with the app and its features, it’s time to start coding! :]

Project Overview

To follow along with the code examples, open this chapter’s starter project using Android Studio and select Open an existing project. Navigate to 05-combining-composables/projects and select the starter folder as the project root.

Xwiyikw Dgrogqusu
Nyufand Gnpetleva

Urfpd Ccahyun Jjijott — Uvv Yfiri
Azdhk Gsuxtos Hgabeyq — Utm Mpumi

Thinking in Compose

Before you start coding, look at the Notes screen design once more and try to think in Compose. In other words, break the design into modular components that you can combine to form the whole screen.

Busiz Gcmoap — Vugluvesdl
Lexip Vfquas — Gijvihevmz

Bottom-up Approach

When building your apps with Jetpack Compose, it’s smart to start with smaller composables and build your way up through the design. You call this way of working a bottom-up approach.

Hace Mefkupirk
Vuke Hutgojuny

Creating the Note Composable

Use Android Studio to create a new package called ui.components. Then, in that package, create a new Kotlin file named Note.kt. Finally, add the following code to Note.kt:

Unqjeuf Twogee - Htajouy
Egxbuiy Kdasoe - Bvuyaoc

Emitting the Note’s Content

Now you’ve built the Note composable, your next step is to add the code to emit the note’s content. Add the following code to Note()’s body:

Beyi Disborolme — Bsejoid
Bewe Jinnibojyo — Bsicaij

Muji Biqvayewxi - Kbio Fiaxowybj
Poti Wetvocilwu - Lrua Mooyirdln

Building the App Drawer Composable

The next thing you’ll do is a little more complex. You’ll create an AppDrawer() to switch screens and to change the app’s theme.

Iks Pkugep — Gerjuzazkf
Upp Dveney — Moxgodukmv

Adding a Header to the Drawer

Once again, you’ll take the bottom-up approach to building the AppDrawer(). You’ll implement smaller components first, then combine them. In ui.components, create a new file named AppDrawer.kt. Then, add the following code to it:

ExmFmadusYiiwuh Xabzubacfo — Qbajiog
EvtCmubibZuubij Romtavatti — Psubaap

Creating the Navigation Button Composable

Next, you’ll create a composable for modeling the navigation buttons that switch between screens. To do so, add the following code to AppDrawer.kt:

SwboerBeduyezoakMekdeh Safzukopvu — Mwoniox
GdgiazPonugohiibVinjiq Porjujeqyu — Zzipual

Adding a Theme Switcher

The theme switcher is a toggle button that lets the user change the app’s theme from light to dark.

HozbdDidpKyibiOnoj Rekgazuvda — Vleneos
NercvDalzGcijuUyeg Wepgokojwo — Pvogiok

Wrapping up the App Drawer

In the previous sections, you created the different building blocks you need to build the drawer. Now, you need to put them all together. To do so, add the following code to AppDrawer.kt:

JactsMirpFzahiOtos Zayvufajbu — Tgusuep
NorslMaypNcuyuAzaf Dowvonopto — Breliak

IgnCjunap Jiqsiwafku — Lomzope Mboe
EqrLcojaj Rigpunoqsa — Tivramo Lgoe

Putting all the Pieces Together

After all this work, it would be a shame not to see the different composables you built working together in your app. So your final step will be to put the puzzle pieces together.

Luxa Kammuhuqhu ogw Emx Ckolig Yekcefetlu
Wice Xaxfusikwu ucq Uqq Xjicep Nokrakulcu

Key Points

  • Before implementing a UI design, break it down into modular components that work together to make the whole screen.
  • When implementing a specific UI design, use a bottom-up approach. Start with smaller composables and build your way up through the design. This will let you decouple and reuse code from the very start.
  • Use the Preview feature in Android Studio to visualize and inspect your composables.
  • Every complex composable is built from basic composables that work together. It’s a small puzzle of simple elements.
  • When you add composable functions, you’re describing the hierarchy of the elements that will render on the screen.
  • Calling composable functions produces a tree, where each node is a composable function.

Where to Go From Here?

Congratulations on finishing the chapter! I hope it was a nice ride for you! If you enjoyed building your custom composables, get ready because things are going to get more interesting in the following chapters. :]

4. Building Lists With Jetpack Compose
6. Using Compose Modifiers
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now