Compose Learning Projects

• Create Layout that divides Screen into four Sections to Display Data.

• App to Practice Layout In Android using Jetpack Compose

@Composable
fun ComposeQuadrantApp() {

    val context = LocalContext.current

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Row(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = context.getString(R.string.first_title),
                desc = context.getString(R.string.first_description),
                backgroundColor = Color(0xFFEADDFF),
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = context.getString(R.string.second_title),
                desc = context.getString(R.string.second_description),
                backgroundColor = Color(0xFFD0BCFF),
                modifier = Modifier.weight(1f)
            )
        }

        Row(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = context.getString(R.string.third_title),
                desc = context.getString(R.string.third_description),
                backgroundColor = Color(0xFFB69DF8),
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = context.getString(R.string.fourth_title),
                desc = context.getString(R.string.fourth_description),
                backgroundColor = Color(0xFFF6EDFF),
                modifier = Modifier.weight(1f)
            )
        }
    }
}

@Composable
fun ComposableInfoCard(title: String, desc: String, backgroundColor: Color, modifier: Modifier) {

    Column(
        modifier = modifier
            .fillMaxSize()
            .background(backgroundColor)
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        Text(
            text = title,
            modifier = Modifier.padding(bottom = 16.dp),
            fontWeight = FontWeight.Bold
        )
        Text(
            text = desc,
            textAlign = TextAlign.Justify
        )

    }

}

• strings.xml

<!-- Compose Quadrant screen -->
<string name="first_title">Text composable</string>
<string name="first_description">Displays text and follows the recommended Material Design guidelines.</string>
<string name="second_title">Image composable</string>
<string name="second_description">Creates a composable that lays out and draws a given Painter class object.</string>
<string name="third_title">Row composable</string>
<string name="third_description">A layout composable that places its children in a horizontal sequence.</string>
<string name="fourth_title">Column composable</string>
<string name="fourth_description">A layout composable that places its children in a vertical sequence.</string>