Jetpack Compose: Getting Started

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)
        )
    }
}

Great job, it seems your Jetpack Compose skills are getting sharper.

In the next session, we will explore more about the Material Design Library. We will look at how we can use the Material Design Library to create beautiful and consistent UIs. We will discuss the different components that we have already used and some that we have not used yet. We will also focus on the Scaffold Composable and how we can achieve the Material Design look and feel using it.