Member-only story

Building custom Modifier in Jetpack Compose

Karishma Agrawal
Towards Dev
Published in
9 min readFeb 9, 2025

🌟Members can scroll down to enjoy! Non-members, click here for full access.🌟

Introduction

Modifier, as the name suggests helps to modify something. In the case of compose layout, they help to alter basic views. For example, if you have a TextView and want to style it, add colour to text, provide different sizes, and align with something.

Modifiers allow you to decorate or style a composable. It is responsible for how a compose element will be visible on screen.

Example: Add a box in the centre of the screen

Step 1: Add a Column with full-screen size

Column(
modifier = Modifier.fillMaxSize())

Modifier Object adds modifiers and then you can keep adding all the methods it provides. Here fillMaxSize will set the Column size to fill the screen.

Step 2: Add a box inside it

Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.padding(16.dp)
.background(Color.LightGray, RoundedCornerShape(10.dp))
)

Now we are creating a box with a full screen by using a fillMaxWidth modifier. Then add 200 dp as height using a height(200.dp) modifier, then add padding to it, and then…

--

--

Published in Towards Dev

A publication for sharing projects, ideas, codes, and new theories.

Written by Karishma Agrawal

Android Developer @Eventbrite | Wanted to be a writer so I write code now | Reader

No responses yet

What are your thoughts?