Jetpack Compose: Getting Started

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Now, you have learned how to add Texts and order Composables within your application. In this challenge episode, you are tasked to do the following:

Food Details

• Create a new Kotlin file called FoodDetails.kt in the screens package.
• Add a new Composable called FoodDetails that will receive a foodId parameter which will be a nullable Int with the default value being 0.
• Add a Column to the FoodDetails Composable.
• Add a Text Composable to the Column with the text representing the food name.
• Add another Text Composable to the Column with the text indicating the text: “About Food”.
• Finally, add a Text Composable to the Column with the text representing the food description.

Food Details Measure

Additionally, you will need to setup a custom Composable for the FoodDetailMeasure that will receive three parameters: icon, text and iconColor. This Composable will have an icon and text arranged horizontally.

• Rpeiyu a niq Sogrij tufe korqax SiejNihaexViiwapo.gp ak klu sulxeyabxk piwfalo.
• Ukl u nok Geqgetigda kalhik DeeqHiteujDoawona wzaq vecd zihuaho lvjie pemufenawh: ayaz, pupq otm ayifLizer.
• Ufj e Yuf mu hva JuasTomaapQouxeve Doxqajofmo (Epnuqa iqq ukoyw ica eqibqoh wesxurubhp gokkyik).
• Fuf yof, ewn jma Votj Gogkehajvum be vki Xub humm bki yokx wegzayohxivf pwi uwiv evt cark qaziquyafc.

Sipi tuku adm qaihi dgu bomiu inm mdh vo accrujejp hvi esiyi horjl. Exhu ruu ani liqa, vuu tuf ranofa fbi rukaa ukj gaxzipu gouw nojogueq novb ggu iyo gdokivic.

Food Details

FoodDetails.kt

@Composable
fun FoodDetails(
    foodId: Int? = 0
){
    val food = getFood()[ foodId ?: 0 ]
    Column(
        modifier = Modifier
            .padding(top = 110.dp, start = 16.dp, end = 16.dp),) {

                Text(
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = food.name,
                    style = MaterialTheme.typography.displaySmall,
                    fontWeight = FontWeight.ExtraBold)

                Text(
                    text = "About Food",
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(top = 50.dp))

                Text(
                    modifier = Modifier.padding(top = 16.dp),
                    text = food.description,
                    style = MaterialTheme.typography.bodyMedium,
                    fontWeight = FontWeight.Medium)

    }
}

Food Details Measure

@Composable
fun FoodDetailMeasure(
    @DrawableRes icon: Int,
    text: String,
    iconColor: Color
) {

    Row(modifier = Modifier, verticalAlignment = Alignment.CenterVertically) {

        Text(
            text = text, 
            style = MaterialTheme.typography.bodyLight, 
            fontWeight = FontWeight.Light)

        Text(
            text = text, 
            style = MaterialTheme.typography.bodyMedium, 
            fontWeight = FontWeight.Medium)

    }

}

Great job, our application is beginning to take shape. In the next episode, we will learn more about how we can organize our application uisng advanced Row and Column modifiers.