Jetpack Compose Modifier

In this tutorial ( by Suraj Maity), we will learn about modifiers in Android Jetpack compose. This feature will help us to build some amazing UI easily. If you know Kotlin, it will be easy for you to build this kind of layout. 

1. How to use the modifier to set the background, width, and fillMaxHeight?

code:


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .width(900.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = "Hey Coders!")
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}




 

2. Use requiredWidth :

code:



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .requiredWidth(900.dp)
            ) {
                Text(text = "Hey Coders!")
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}


 

3. Padding:

code:


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .padding(89.dp)
            ) {
                Text(text = "Hey Coders!")
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}



 

4. Use of padding with x-axis and y-axis

code:



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .padding(top = 23.dp, start = 88.dp)
            ) {
                Text(text = "Hey Coders!")
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}



 

5. Use of offSet():

code:


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .padding(top = 60.dp, start = 88.dp)
            ) {
                Text(text = "Hey Coders!",
                    modifier = Modifier.offset(100.dp, 70.dp)
                        .background(Color.Green))
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}



 


code:



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .padding(top = 50.dp)
            ) {
                Text(text = "Hey Coders!",
                    modifier = Modifier.offset(0.dp, 20.dp))
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}



 

6. Use Spacer():

code:


lass MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .padding(top = 50.dp)
            ) {
                Text(text = "Hey Coders!",
                    modifier = Modifier.offset(0.dp, 20.dp))
                Spacer(modifier = Modifier.height(50.dp))
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}



 

 

7. Use border():

code:


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .padding(top = 50.dp)
                    .border(width = 2.dp, color = Color.Red)
            ) {
                Text(text = "Hey Coders!",
                    modifier = Modifier.offset(0.dp, 20.dp))
                Spacer(modifier = Modifier.height(50.dp))
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}



 

code:


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .border(width = 2.dp, color = Color.Red)
            ) {
                Text(text = "Hey Coders!",
                    modifier = Modifier.offset(0.dp, 20.dp))
                Spacer(modifier = Modifier.height(50.dp))
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}




 

8. How to create different border and use it accordingly without overlapping?

code:



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .border(width = 4.dp, color = Color.Red)
                    .padding(4.dp)
                    .border(width = 8.dp, color = Color.Green)
                    .padding(8.dp)
                    .border(width = 16.dp, color = Color.Blue)
                    .padding(16.dp)
            ) {
                Text(text = "Hey Coders!",
                    modifier = Modifier.offset(0.dp, 20.dp))
                Spacer(modifier = Modifier.height(50.dp))
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}



 

9. Use border(), padding(), offset() randomly:

code:


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .border(width = 4.dp, color = Color.Red)
                    .padding(4.dp)
                    .border(width = 8.dp, color = Color.Green)
                    .padding(8.dp)
                    .border(width = 16.dp, color = Color.Blue)
                    .padding(16.dp)
            ) {
                Text(text = "Hey Coders!",
                    modifier = Modifier
                        .border(2.dp, Color.Black)
                        .padding(10.dp)
                        .offset(x = 20.dp, y = 30.dp)
                        .border(6.dp, Color.Magenta)
                )

                Spacer(modifier = Modifier.height(50.dp))
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
            }
        }
    }
}


 

10. use Clickable() in Text:

code:


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .background(Color.Yellow)
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .border(width = 4.dp, color = Color.Red)
                    .padding(4.dp)
                    .border(width = 8.dp, color = Color.Green)
                    .padding(8.dp)
                    .border(width = 16.dp, color = Color.Blue)
                    .padding(16.dp)
            ) {
                Text(text = "Hey Coders!")
                Spacer(modifier = Modifier.height(50.dp))
                Text(text = "Get.. Set.. CODE ->>>>>>>>>>>")
                Spacer(modifier = Modifier.height(50.dp))
                Text(text = "Click Me",
                    modifier = Modifier.clickable {
                        Toast.makeText(this@MainActivity,
                            "I told you \nI am clickable",
                            Toast.LENGTH_SHORT
                        ).show()
                    }
                )
            }
        }
    }
}





 


















 


















 



















Comments

Post a Comment

Popular posts from this blog

Jetpack Compose Basics

Image
In this blog (by Suraj Maity), we will learn how to work with Jetpack compose to make the layout more easily. Using a few simple basic features, we will make the design more attractive. In Android, XML takes more code to make a layout and is a little hard compared to Jetpack compose. If you know XML, then it is okay to switch to Jetpack. But if you don't know then also no problem, we will learn from the beginning. 1. Create a simple Greeting using Jetpack Compose code: class MainActivity : ComponentActivity() { override fun onCreate (savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { Greeting ( name = "Suraj" ) } } } @Composable fun Greeting (name: String){ Text ( text = "Hello $ name !" ) } @Preview (showBackground = true ) @Composable fun DefaultPreview (){ Jetpack1Theme { Greeting ( name = "Android" ) } } 2. Create a simple Greeting using Jetpack Comp...
Read more