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

8. Applying Material Design to Compose
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

Well done! You’ve arrived at the last chapter in this section. In your journey so far, you’ve learned about basic composables in Compose and how to combine, style and use them in a real app where you also had to manage state.

In this chapter, you’ll:

  • Learn how to use Material Design composables, which Jetpack Compose provides for you.
  • Go over state management in more depth.
  • Learn more about Jetpack Compose navigation API.
  • Complete the Save Note screen.
  • Learn about Material theming.
  • Change JetNotes to support a dark theme.

When you finish this chapter, JetNotes will be a completely functional app!

Opening the Notes Screen

Before you can start working on the Save Note screen, you need a way to open it. By looking at the design, you can see that you’ve planned two ways to do that:

  1. By clicking a floating action button (FAB), which will open the Save Note screen in Create mode, where the user can create a new note.
  2. By clicking any note on the Notes screen, which opens it in Edit mode, where the user can edit that specific note.

You’ll start with the first case. However, before adding a floating action button to the Notes screen, you need to learn more about the composable that enables you to have the following layout structure.

Notes Screen
Notes Screen

Take a moment to look at the different parts of the screen. You have the:

  • Top bar
  • Body content
  • Floating action button
  • App drawer

This is a common layout structure for Android apps. Most apps today follow a similar design. To make it easier to implement a layout structure like this, Jetpack Compose provides the Scaffold.

Using Scaffold

To follow along with the code examples, open this chapter’s starter project in Android Studio and select Open an existing project.

Xazog Lkpaiz afm Idk Wnozoc
Niveq Rwbeug izy Ukj Djivoh

Adding Scaffold to Notes Screen

As you just learned, Scaffold() allows you to add app drawer content. It also lets the user pull the drawer out by dragging it from the left side of the screen. Next, you are going to use it for top bar as well. Open NotesScreen.kt and replace Column() with Scaffold(). Also, notice that with the following code snippet you’ll add one more parameter to the NotesScreen():

Zoqur Vhxooj
Kagej Hwbuoq

Memory in Composable Functions

Scaffold() can manage two composables that have state: app drawer and snackbar. Their states, DrawerState and SnackbarHostState, are encapsulated in one object called ScaffoldState.

Using remember

Here’s how remember() looks in code:

remember’s Effect on the Composition Tree

Here’s how the composition tree looks for NotesScreen().

Mocat Zyfaad - Sulbewozioh Xyio
Jikur Dfqaub - Kiblavikaad Gviu

Adding the FAB

A floating action button represents the primary action of a screen. In the Notes screen, the primary action is the action to create a new note.

Cakax Nhxeuv qizw Vniiboht Anpiap Colqoc
Hivev Bzxeal yecy Fzeavogd Udqeuc Serkol

Adding an Entry Point to Save Note Screen

In the previous section, you added the FAB that allows you to open the Save Note screen in the Create mode.

Using Jetpack Compose Navigation API to Change Screens

In the previous chapter, you added the code that opens the Notes screen whenever you start MainActivity. It’s time to add logic to change screens based on navController state.

Connecting MainActivityScreen to MainActivity

Next, you’ll connect this composable to MainActivity, but also connect your app drawer with the navigation graph.

Ijanakz Debi Hihum Wchoow
Ijerirx Qove Heciw Qqfeiy

Adding the Top Bar

Until now, you’ve focused on adding code to open the Save Note screen. But now that you can open it, the Save Note screen is empty. In this section, you’ll add composables to it. :]

Sexa Xafu Xgniul: Ham Jex
Pisu Fuge Mqcius: Cuv Med

Adding SaveNoteTopAppBar

In the Save Note screen, the top bar needs to support two different modes:

Displaying the Top Bar

Now that you’ve prepared the root composable for the top bar, you’ll add the composable that emits the top bar in the UI.

TecuNiyaGirIytFop Nohkehaypi (Oqiledf Reji) — Hreguod
DakeDihaXinErjLod Noswacelya (Aworicf Sewe) — Mkeguak

FiloRuveQajEqxBop Marwizahla (Wuw Hihi Boyu) — Gpenees
DujuDamaTezInkKuh Hulsalakbu (Bus Buve Guru) — Bhuzeax

Displaying the SaveNoteTopAppBar Composable

Now that you’ve created the SaveNoteTopAppBar(), you can display it in the Save Note screen. But before you do that, you need a way of knowing if the user opened the Save Note screen for a new note or an existing note.

Erbufp fgi Sol Qox nu blo Cinu Jafa Hgveen
Obkacl fpi Keq Cew su wze Lone Hedi Chxiaf

Opening the Save Note Screen in Editing Mode

In the previous section, you implemented a way to open the Save Note screen in Create mode. Now, you’ll add the logic that allows the user to edit an existing note.

Ceqo Zepu Vrcioc ud Icak Nafa
Cafu Xope Csceup ac Odun Teye

Creating a Content Composable

You need to be able to edit notes in the Save Note screen, so your next step is to create a content composable to do that.

Displaying the Selected Color

To do this, go to SaveNoteScreen.kt and add the following composable below SaveNoteTopAppBar():

GeckorJowagLupyamedf Wafgokebto — Hkiveum
YugmibCeqorVahjetagy Nuhrunasfu — Whusaas

Letting Users Check off a Note

In some cases, your users might want to check off a note — when they’ve completed a task, for example. By default, there’s no option to indicate a note has been completed. Users need to mark notes as checkable if they want that feature. Your next step is to give them the possibility.

SehMoSrurjitIhgHopmeqerj Tajkovunne — Rhikuut
VomTeJkasdoyOqbVahhezegl Jebxekenta — Rpateer

Adding a Title and Content

So far, you’ve added composables to represent the note’s color and whether the user can check the note off when they complete a task. But you still have to add composables for the most important parts of the note: its title and content.

DotkajdJuyrGeokw Xavqikarxi — Pruhael
HobjijlKirtYuoxk Sagqadofde — Stiyael

Building the Save Note Content

The next thing you’ll do is put together all the composables that you created to make the Save Note screen content.

Fegcupr Kawxegorvu — Hfinaib
Jiscadq Juvwomiwja — Jsaveap

Wrapping up the Save Note Screen

Great job so far! You have just one more step before you’re done with the UI for the Save Note screen. You’ll now focus on MainViewModel, which you need to complete the Save Note screen.

Adding ViewModel Support

In MainViewModel, you already added the code to expose the noteEntry state, but you still need to add one more state. In the Save Note screen, the user can choose a color for a note. To display the list of colors the user can choose, you need to provide them to SaveNoteScreen().

Changing the noteEntry State

Next, you need to add support for changing the noteEntry state when the user interacts with the Save Note screen.

Connecting the SaveNoteScreen to the MainViewModel

Now that MainViewModel is ready, you can complete the UI part of the Save Note screen. Open SaveNoteScreen.kt and update Scaffold() in SaveNoteScreen():

Judo Rade Mnnooy
Howa Roqi Mtyeel

Changing the Note’s Color

There is still one thing missing: You still can’t change the color of the notes. To fix that, update SaveNoteScreen() like this:

Koxov Recgay it Zemi Mora Fvgiiy
Muken Xocdum or Duru Niwo Frriuw

Confirming a Delete Action

While the Save Note screen is now functionally complete, it’s always nice to pay attention to the details.

Inumh Moapux ow Nage Hora Zdhuen
Ogedj Guenev ej Satu Boli Fxwoim

Using Material Design Composables in the Notes Screen

The Material Design composables that Jetpack Compose provide are all built with basic composables. When you built the Notes screen, you implemented the top app bar and note cards in the same way. But since Material Design composables offer additional support for theming, it’s useful to replace the composables you built with Material Design’s.

Using a Material Composable for Note

There’s one more thing you can replace with Material Design composables: your Note().

Theming in Compose

Every Android app has a specific color palette, typography and shapes. Jetpack Compose offers an implementation of the Material Design system that makes it easy to specify your app’s thematic choices.

Lebq Ltoni
Bizb Qjiwe

Key Points

  • Jetpack Compose provides composables that make it easy to follow Material Design.
  • With remember(), Compose lets you store values in the composition tree.
  • Using Jetpack Compose navigation allows you to easily navigate between your composables. Navigation is structured around back stack.
  • Jetpack Compose offers a Material Design implementation that allows you to theme your app by specifying the color palette, typography and shapes.
  • Using MaterialTheme(), you define a theme for your app, that customizes colors, typography and shapes.
  • To define light and dark colors for different themes, you use lightColors() and darkColors(), respectively.

Where to Go From Here?

Hopefully, this was a fun ride for you. You’ve come a long way, from using just basic composables to managing states with Material Design composables. In the next section, you’ll work on a more complex app, JetReddit! There, you’ll learn more about how to build complex UI, how animations work and more.

7. Managing State in Compose
9. Using ConstraintSets in Composables
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