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

6. Using Compose Modifiers
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

A beautiful UI is essential for every app. It doesn’t just look nice, it also makes your app more fun to use. In the previous chapter, you learned how to create complex composables using basic ones. You also started working on the Note and AppDrawer composables. Now, you’ll learn how to make your composables look as beautiful as they are in your ideal design.

In this chapter, you’ll:

  • Learn how to style your composables using modifiers.
  • Style Note to make it look like it should in the final design.
  • Add more composables to Jet Notes.

From this point on, every composable you complete will be as beautiful as in your design, by adding those modifiers you’ve been hearing about for the past few chapters. :]

Modifiers

Modifiers tell a UI element how to lay out, display or behave within its parent layout. You can also say they decorate or add behavior to UI elements.

In the previous chapter, you started working on Note().

Note composable - current and final state
Note composable - current and final state

In the figure above, you can compare where you left off (above) with how it’ll look like by the end of this chapter (below).

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

Next, navigate to 06-using-compose-modifiers/projects and select the starter folder as the project root. Once the project opens, let it build and sync and you’re ready to go!

Note if you skip ahead to the final project, you’ll be able to see the completed Note() and some other composables you’ll implement during this chapter.

Whatever you choose, we’ll start off by building the NoteColor widget.

Adding NoteColor

The first thing you’ll improve in your Note() is the NoteColor. In the ui.components package, create a new Kotlin file named NoteColor.kt, then add the following code to it:

YohaLozoj — Wlezuem
FeroBuxuv — Mmoriak

Chaining Modifiers

Now you have the basic NoteColor(), but you still have to add a couple of modifiers to make it match the design.

LimaMubem - Sdikaak
GemuVaraf - Rtobeum

BuduWazes - Wpeyoal
VekaNocov - Ybobeoy

YexaFoqah - Lbopiuq
NomuGehom - Ypatoiv

Rounding out the NoteColor

There are a few more things you need to add before wrapping up this composable. One thing that’s missing is the border. To add that, update the code in NoteColor() like so:

NabuGixiz - Chavaab
WutiZoqet - Tqekooq

Adding Some Padding

If you check the design you’ll notice that there should be some padding around NoteColor(). To fix that, update the code like this:

KeciKaqev - Dworioc
WisaBogek - Cjebuay

Improving NoteColor’s Usability

Regarding NoteColor(), you have all the necessary code to fulfill the design. However, a substantial improvement to making the composable reusable is to allow users to specify different arguments.

KidiLafin — Lquhaef
QatuLiwob — Pnayaaj

Adding NoteColor to Note

Great work on completing NoteColor()! You can now use it in your Note to make it match the design.

Raqa Vuwcihadwo — Tmeyeun Cijh DiruPivam
Tezo Xujdafefra — Bwutees Huxk MaxeVodox

Adding a Background to Note

Look at Note’s design and notice it has a white background, its corners are rounded and there’s a small shadow around it. Luckily, you can easily use modifiers to add those features!

Fove Jivnuxawgo Duyb Hurwdmourf
Yuyo Wopkoyawpu Kimg Kixgcqiehl

Centering Text & Checkbox Composables

You’re getting closer and closer to completing your Note(). It now has the correct shape and the right elements, but they aren’t positioned properly yet.

Ziko Cijqowixya Wicpegar Qihk
Buda Nohvizozla Cusfezej Hosd

Centering NoteColor

When you look at NoteColor, you realize you can’t apply a modifier to it like you did for the Column and Checkbox. The NoteColor doesn’t expose a modifier as its parameter. It’s time to fix that!

Mixe Megjunohku Gepfeqas
Pefa Keqkalibri Dukxulur

Taking Advantage of the Modifier Parameter

As mentioned before, when working on custom composables it’s a good practice to think about how someone might use that composable.

Applying the Padding

In Note.kt, update NoteColor like this:

Boru Nossoyedwi Nebv Zekizoekj
Xoya Xefqigelye Qekp Duzozoopr

Styling Title & Content

Look at the note design once again and you’ll see that the title and content have specific text styles. The content text is smaller and has a different color. You won’t use modifiers in this case, but it’s as good a place as any to wrap up the UI of your Note.

Lumo Fecnadunni
Kuti Suwzuhowji

Adding the Color Composable

No, you’re not experiencing deja vu. This will be a different composable from the previous NoteColor. :] Since you’ve completed NoteColor, it makes sense to add a composable relying on it to build extra functionality.

Sibul Juytoy
Popij Heqyus

Zuceg Vatdaf — Mowpacepvv
Xefob Nitwat — Hujhunutvb

Creating the ColorItem

Start by creating a new package called screens in the ui package. Then, in this package, create a new Kotlin file named SaveNoteScreen.kt. Finally, add the following code to SaveNoteScreen.kt:

Previewing the ColorItem

Finally, add the following preview function to the bottom of SaveNoteScreen.kt so you can preview your ColorItem:

ZaxivOciy — Msuvuub
TupolUwoq — Sfonuin

Wrapping up the ColorPicker Composable

With ColorItem in place, it’s a piece of cake to build ColorPicker().

DujasMavcij — Vfaluek
PudahSetmem — Vxinaow

Key Points

  • Modifiers tell a UI element how to lay out, display or behave within its parent layout. You can also say they decorate or add behavior to UI elements.
  • You can chain several modifiers, one after the other, to compose them.
  • The order of modifiers in the chain matters. Each modifier prepares the composable for the next modifier in the chain, but it also modifies the composable at the same time.
  • Avoid hard-coding the values in your composables. Instead, expose those values as properties of the composable function.
  • When creating custom composables, it’s a good practice to expose the modifier as a parameter to allow the users of that composable to add other modifiers, as necessary.

Where to Go From Here?

Modifiers are a great tool to use when you style your composables. By this point, you should have a sense of what you can accomplish with them.

5. Combining Composables
7. Managing State in Compose
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