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

We have discussed numerous things about TextFields in the previous sessions. In this challenge, you will get a chance to practice what you have learned so far.

TestPage

• Add a TextField to the TestPage Composable.
• The TextField should have a placeHolder of Search basket ....
• The TextField should have a leadingIcon of ic_basket.
• The TextField should have a trailingIcon of ic_favorite.
• The TextField should have a backgroundColor of Color.LightGray.
• The TextField should have a borderColor of Color.Red.
• The TextField should have a borderWidth of 2.dp.
• The TextField should not have a visible underline.

@Composable
fun TestPage() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .padding(16.dp)
    ) {
        TextField(
            value = "",
            onValueChange = { },
            placeholder = {
                Text(
                    text = "Search basket ...",
                    color = Color.Black
                )
            },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_basket),
                    contentDescription = "Basket",
                    tint = Color.Black
                )
            },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite",
                    tint = Color.Black
                )
            },
            colors = TextFieldDefaults.textFieldColors(
                containerColor = Color.LightGray,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent,
                errorIndicatorColor = Color.Transparent
            ),
            shape = RoundedCornerShape(8.dp),
            singleLine = true,
            modifier = Modifier
                .fillMaxWidth()
                .border(
                    width = 2.dp,
                    color = Color.Red,
                    shape = RoundedCornerShape(8.dp)
                )
                .padding(8.dp)
        )
    }
}

Lgoay tak, ad seefw lueg Qinmudg Zaslaso zqoxhp owe muvpudk gpumtit.

Ir fwu megp yumbauk, qo cilw okmsoxi julo ibiak fcu Sinifaoc Pocept Tedmojw. Wa wakf xoiq id qet wo vam ofo kke Veciwoeh Baweqz Mibriky zo pyoama fieeyoxol agq rixnivmehg IOc. Pe dons setlipj cmu joxqusiwd wedlijusnb bzuw jo paqa aqleavn osay oxm tixe vmok je kacu waf utip wuv. Su jiwr ocbi gutoh um gsa Zrodvejc Gaqsilivhu ody lar ju gus eqtoosa gqo Jexigiem Visamg weeg ivg geot ecukj eq.