Basic Jetpack Compose Modifiers with Exercise

In this Jetpack Compose tutorial for the Little Lemon restaurant app, the focus is on using basic modifiers to enhance the UI. Steps include positioning text and a button at the top, applying a themed background color, and customizing text appearance. The tutorial introduces an image to the layout, adjusting its size and centering it horizontally. Additionally, padding is added to the text components for better spacing. Overall, the tutorial provides a concise guide to using modifiers for background color, size adjustments, and padding in Jetpack Compose.

🟢 ANDROID WITH MACHINE LEARNING! (COURSE)

🟢 KOTLIN DEVELOPMENT! (COURSE)

Firstly, the button color is modified to match the Little Lemon theme by updating the background color property.

@Composable
fun OrderScreen() {
    Column(
        Modifier
            .fillMaxWidth()
            .background(Color.Magenta),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.Top
    ) {

    /*TODO*/

}

Next, the button’s position is adjusted by moving it inside the parent column. The description text is introduced on the left side of the image by adding a new text composable above the image in the row. The width, text color, and font size are configured for better visual harmony.

@Composable
fun OrderScreen() {
    Column(
        Modifier
            .fillMaxWidth()
            .background(Color.Magenta),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.Top
    ) {
        Text(
            text = "Little Lemon",
            fontSize = 32.sp,
            color = Color.Green,
            modifier = Modifier.padding(start = 20.dp, top = 20.dp)
        )
        Text(
            text = "Chicago",
            fontSize = 32.sp,
            color = Color.Black,
            modifier = Modifier.padding(start = 20.dp)
        )

        Button(
            onClick = { /*TODO*/ },
            border = BorderStroke(1.dp, Color.Red),
            shape = RoundedCornerShape(10.dp),
            colors = ButtonDefaults.buttonColors(containerColor = Color.Gray)
        ) {
            Text(text = stringResource(R.string.order))
        }
    }
}

To refine the image, its height is adjusted, and rounded corners are added using the clip modifier with RoundedCornerShape.

        Row(
            Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {

            Text(
                text = stringResource(id = R.string.description_short),
                modifier = Modifier.width(200.dp),
                color = Color.White,
                fontSize = 21.sp
            )
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_background),
                modifier = Modifier.height(200.dp).clip(RoundedCornerShape(20.dp)),
                contentDescription = ""
            )
        }

By following these steps, you’ve successfully customized various UI elements to align with the Little Lemon theme, demonstrating the power of modifiers in Jetpack Compose.

Preview;

@Preview(showBackground = true)
@Composable
fun OrderScreenPreview() {
    OrderScreen()
}

onCreate;

class LittleLemonOrder: ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
        super.onCreate(savedInstanceState, persistentState)
        setContent {
            MetaJetpackComposeCourseTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    OrderScreen()
                }
            }
        }
    }
}

📱Finallllllyy, Jetpack Compose App 🎉

İbrahim Can Erdoğan

LINKEDIN

YOUTUBE

UDEMY

GITHUB