Member-only story
Building custom Modifier in Jetpack Compose
🌟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…