Jetpack Compose: Getting Started
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
A layout can be defined as the structure of a user interface in an application, either an Activity or a Fragment. This is usually made up of a hierachy of Composables. Jetpack Compose provides several Composables that you can use to build layouts. We will discuss the Row, Column, Box and Scaffold Composables in this course.
Adding a Column Composable
Let us add a new package named components to the com.kodeco.android.ui package. This package will contain all the reusable Composables that we will use to build our layouts.
@Composable
fun FoodCategoryItem(
@DrawableRes icon: Int,
category: String
){
}
@Composable
fun FoodCategoryItem(){
@DrawableRes icon: Int,
category: String
}{
Column(
modifier = Modifier.size(75.dp),
horizontalAlignment = Alignment.CenterHorizontally,
){
Image(
modifier = Modifier.size(75.dp),
painter = painterResource(id = icon),
contentDescription = null,
)
Text(
modifier = Modifier.padding(top = 5.dp),
text = category,
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
style = MaterialTheme.typography.bodyMedium
)
}
}
Adding a Row Composable
Add a new file named ProfileBar.kt, this file will have a Composable that will display a profile bar. The bar will contain two images and a text Composable.
@Composable
fun ProfileBar(){
}
@Composable
fun ProfileBar(){
Row(
modifier = Modifier.fillMaxWidth()
.padding(16.dp),
){
Image(
modifier = Modifier.size(50.dp),
painter = painterResource(id = R.drawable.ic_profile),
contentDescription = null,
)
Text(
text = "Hello, Kodeco",
style = MaterialTheme.typography.bodyLarge,
)
Image(
modifier = Modifier.size(50.dp),
painter = painterResource(id = R.drawable.ic_notifications),
contentDescription = null,
)
}
}
Box and Scaffold Composables
Sometimes, we do not need to arrange Composables in a vertical or horizontal manner. We just need to stack them on top of each other. This is where the Box Composable comes in. The Box Composable is used to stack Composables on top of each other.
Adding a Box Composable
We can modify the ProfileBar Composable to hold the trailing image in a specific shape and size.
@Composable
fun ProfileBar(){
Row(
modifier = Modifier.fillMaxWidth()
.padding(16.dp),
){
Image(
modifier = Modifier.size(50.dp),
painter = painterResource(id = R.drawable.ic_profile),
contentDescription = null,
)
Text(
text = "Hello, Kodeco",
style = MaterialTheme.typography.bodyLarge,
)
Box(
modifier = Modifier
.background(color = Color.White, shape = CircleShape)
.size(50.dp)
.clip(CircleShape),
contentAlignment = Alignment.Center,
){
Image(
painter = painterResource(id = R.drawable.ic_notifications),
contentDescription = null,
)
}
}
}
Adding a Scaffold Composable
We can start by creating a new package named screens in the com.kodeco.android.ui package. This package will contain all the screens / pages of the app.
@Composable
fun HomeScreen(){
}
@Composable
fun HomeScreen(){
Scaffold(
topBar = {
ProfileBar()
}
){
}
}
@Composable
fun HomeScreen(){
Scaffold(
topBar = {
ProfileBar()
},
bottomBar = {
Text(text = "Bottom Bar")
}
){
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
){
Text(text = "Home Screen")
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen(){
Scaffold(
topBar = {
ProfileBar()
},
bottomBar = {
Text(text = "Bottom Bar")
}
){
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
){
Text(text = "Home Screen")
}
}
}
Conclusion
We have been able to see how different layout Composables can be used to place items on the screen. We covered the Column, Row, Box and Scaffold Composables. We will explore more about layout Composables in proceeding sessions.