Widgets Used in composables - devrath/urban-octo-jetpack-compose GitHub Wiki
Row & Columns
Rows
and columns
are important because, Unless there are rows
and columns
, If we add to views to a container, The views will overlap
- Depending on whether you want to align the views horizontally next to each other or vertically below one another we can use rows and columns respectively.
// Adding rows
@Composable
private fun CurrentScreen() {
CodeTheme {
Surface(color = MaterialTheme.colors.background) {
Row() {
Text(text = "Text1")
Text(text = "Text2")
}
}
}
}
// Adding column
@Composable
private fun CurrentScreen() {
CodeTheme {
Surface(color = MaterialTheme.colors.background) {
Column() {
Text(text = "Text1")
Text(text = "Text2")
}
}
}
}
- Say we use a column then the combination is
verticalArrangement
and horizontalAlignment
or either one of them in combination.
- Say we use a row then the combination would be
horizantalArrangement
and verticalAlignment
or either one of them in combination.
- Just to remember this we can keep
arrangement
for the first preference and alignment
as last.
Spacer
- Spacer is like an empty view used to add a empty composable in a view hierarchy.
Column(Modifier.background(Color.Gray).fillMaxSize()
) {
Text(
modifier = Modifier.background(Color.Magenta), text = "Text1", style = TextStyle(color = Color.White)
)
Spacer(modifier = Modifier.height(10.dp))
Text(
modifier = Modifier.background(Color.Blue), text = "Text2", style = TextStyle(color = Color.White)
)
}
Box
- A
box composable
is similar to a frame layout
that we had.
- Inside the
box composable
we can add other composables and each composable will be stacked one above another.
- We can add it like a container to place the children's in it as we need.
- Many alignment properties are there.
- TopStart
- TopCenter
- TopEnd
- CenterStart
- Center
- CenterEnd
- BottomStart
- BottomCenter
- BottomEnd
- Top
- CenterVertically
- Bottom
- Start
- CenterHorizontally
- End
Surface
- Surface composable makes the code easier and explicitly indicates that the code uses material surface.
- With surface composable we can give a background to the screen also.
- It is kind of similar to
card view
Surface(
color = MaterialTheme.colors.onPrimary,
border = BorderStroke(1.dp, MaterialTheme.colors.secondary),
shape = RoundedCornerShape(8.dp),
elevation = 8.dp
) {
Text(
text = "example",
modifier = Modifier.padding(8.dp)
)
}