Widgets Used in composables - devrath/urban-octo-jetpack-compose GitHub Wiki

Contents
Row & Columns
Spacer
Box
Surface

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 verticalAlignmentor 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)
            )
        }