Linear Layout equivalent in Jetpack composer

To achieve the same layout using Jetpack Compose, we use Column for the vertical orientation and Row for the horizontal orientation. We can replicate the behavior of android:layout_weight using Modifier.weight().

Here is the Jetpack Compose equivalent:

Jetpack Compose Code:

@Composable
fun LinearLayoutEquivalent() {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        // First Row
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .weight(10f)
                .background(Color(0xFF4CAF50))
                .padding(5.dp)
        ) {
            Button(
                onClick = { },
                modifier = Modifier
                    .weight(1f)
                    .padding(5.dp)
            ) {
                Text("1")
            }
        }

        // Second Row
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .weight(15f)
                .background(Color(0xFF00BCD4))
                .padding(5.dp)
        ) {
            Button(
                onClick = { },
                modifier = Modifier
                    .weight(1f)
                    .padding(5.dp)
            ) {
                Text("2")
            }
            Button(
                onClick = { },
                modifier = Modifier
                    .weight(1f)
                    .padding(5.dp)
            ) {
                Text("3")
            }
        }

        // Third Row
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .weight(15f)
                .background(Color(0xFFFFEB3B))
                .padding(5.dp)
        ) {
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("4") }
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("5") }
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("6") }
        }

        // Fourth Row
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .weight(10f)
                .background(Color(0xFF03A9F4))
                .padding(5.dp)
        ) {
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("7") }
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("8") }
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("9") }
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("10") }
        }

        // Fifth Row
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .weight(20f)
                .background(Color(0xFFCDDC39))
                .padding(5.dp)
        ) {
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("11") }
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("12") }
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("13") }
        }

        // Sixth Row
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .weight(15f)
                .background(Color(0xFFFF9800))
                .padding(5.dp)
        ) {
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("14") }
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("15") }
        }

        // Seventh Row
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .weight(10f)
                .background(Color(0xFF009688))
                .padding(5.dp)
        ) {
            Button(onClick = { }, modifier = Modifier.padding(5.dp)) { Text("16") }
        }
    }
}

Explanation:

1. Column:

• Acts as a vertical layout container, similar to a vertical LinearLayout.
• Each child occupies vertical space proportionally based on Modifier.weight().

1. Row:

• Acts as a horizontal layout container, similar to a horizontal LinearLayout.

1. Modifier.weight():

• Distributes the available space among child components proportionally.

1. Modifier.background(Color):

• Sets the background color of each row.

1. Modifier.padding():

• Adds margins around buttons for proper spacing.

1. Color Codes:

• Used hexadecimal values for colors similar to the XML.

How to Use:

• Add this LinearLayoutEquivalent() function to your setContent block in the MainActivity.
• Compose will render the UI with the same layout structure as your provided XML.

Would you like further explanations or modifications?