Elements of Composable - devrath/urban-octo-jetpack-compose GitHub Wiki

Contents
Surface Composable
Wrapping the content of composable
Aligning the Composables
Multiple composable inside a single parent
Layouts with rows and columns
Extract composables for reuse
Arragments for rows and columns
State Management

Surface Composable

Surface(modifier = Modifier
                   .fillMaxSize()
                   .background(color = Color.Gray)
) {
  // ----> Code for all the view
}

• Adding a surface to a composable is very useful, This helps in determining the size of the current screen so we can add other composables.
• It is one of the simple composable that the jetpack composable provides.
• So the surface we can consider as a root view of the screen.

Wrapping the content of composable

• Wrapping the composable helps in providing the ability for a composable to occupy the space it requires.
• It is one of the modifier types

Text(
     text = context.resources.getString(R.string.hello_world),
     modifier = Modifier
                .wrapContentSize()
                .background(color = Color.Blue)
                .padding(20.dp),
                style = TextStyle(
                          color = Color.White,
                          fontSize = 21.sp
                        )
     )

Aligning the Composables

 Surface(modifier = Modifier
            .fillMaxSize()
            .background(color = Color.Gray),
        ) {
            Text(
                text = context.resources.getString(R.string.hello_world),
                modifier = Modifier
                    .wrapContentSize(
                        align = Alignment.BottomCenter
                    )
                    .background(color = Color.Blue)
                    .padding(20.dp),
                style = TextStyle(
                    color = Color.White,
                    fontSize = 21.sp
                )
            )
        }

• We use the alignment param to align the composable in a particular position with respect to its parent.
• Its a param belonging to ContentSize

Multiple composable inside a single parent

• Solution to this Row, Column, Box composable
• Row -> Here views are placed one after another in horizontal direction.
• Column -> Here views are places one after another in vertical direction.
• Box -> Here the views are placed one above another

Extract composable for reuse

• We can extract the composable into a single function and reuse them as needed just as regular functions and differentiate between them via the input parameters.

Arrangements for rows and columns

• We can use arrangement and alignment for placing the views on the surface to get different output
• Row ---->Horizontal arrangement and Vertical alignment
• Column ---->Vertical arrangement and Horizontal alignment