Jetpack Compose: Getting Started

You have looked at how to add a TextField Composable to the app. You have also looked at how to use some of the parameters available on the TextField Composable to customize its appearance.

In this session, you will learn how to customize the appearance of the TextField Composable. You will look at how to attach other Composables to the TextField Composable and even customize the colors within the TextField Composable.

Let us get a small reminder of what we know so far about TextFields.

• A TextField is used to get user input. It is used to get user input such as text, numbers, email addresses, etc.
• In order to add a TextField to our app, we can use the TextField Composable. This Composable has two Mandatory parameters:
  • value: This is used to specify the value of the TextField. It is of type String and has no default value.
  • onValueChange: This is used to specify the action to perform when the value of the TextField changes. It is of type (String) -> Unit and has no default value.
• This Composable also has a number of Optional parameters that we can use to customize the appearance of the TextField. Some of these input parameters include:
  • label: This is used to specify the label of the TextField. It is of type @Composable (() -> Unit)? and has a default value of null.
  • placeholder: This is used to specify the placeholder text of the TextField. It is of type @Composable (() -> Unit)? and has a default value of null.
  • modifier: This is used to modify the TextField. It is of type Modifier and has a default value of Modifier.
  • enabled: This is used to specify whether the TextField is enabled or not. It is of type Boolean and has a default value of true.

With Material Design 3, TextFields can have icons attached to them. These icons can be used to perform actions such as clearing the TextField or showing/hiding the password.

These Icons are full Composables and can be added to the TextField using the leadingIcon and trailingIcon parameters.

The leadingIcon is the icon that is displayed on the left side of the TextField.

The trailingIcon is the icon that is displayed on the right side of the TextField.

The Icon Composable is used to display monochromatic images that follow Material Design guidelines. It has two Mandatory parameters:

• painter: This is used to specify the image to display. It is of type Painter and has no default value.
• contentDescription: This is used to specify the content description of the image. It is of type String? and has a default value of null.

Adding Icons to the TextField

Let us add the leading and trailing icons to the SearchBar TextField.

TextField(
        modifier = Modifier
            .fillMaxWidth(),
        value = "",
        onValueChange = {  },
        leadingIcon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_baseline_search_24),
                contentDescription = "Search Icon",
            )
        },
        leadingIcon = {
          Icon(
              painter = painterResource(id = R.drawable.ic_search),
              contentDescription = "search") },

        trailingIcon = {
          Icon(
              painter = painterResource(id = R.drawable.ic_filter),
              contentDescription = "filter") },

        placeholder = {
          Text(
              text = "Search for food ...",
              modifier = Modifier
                  .fillMaxWidth(),
              textAlign = TextAlign.Center,
          )
        }
)

Since the leadingIcon and trailingIcon parameters are of type @Composable (() -> Unit)?, we can use a lambda expression to specify any type of Composable to use as the icon. This can be a Text, Image, Icon, etc.

You can also add interactivity to individual icons. For example, you can add a Clickable modifier to the Icon Composable to make it clickable.

TextField Colors

You can customize the colors of the TextField using the colors parameter. This parameter is of type TextFieldColors and has a default value of TextFieldDefaults.textFieldColors().

These colors range from outline color to icon colors. Here are a few of the colors that you can customize:

• containerColor: This is used to specify the background color of the TextField.
• cursorColor: This is used to specify the color of the cursor in the TextField.
• placeholderColor: This is used to specify the color of the placeholder text in the TextField.

Changing the TextField Colors

Let us change the colors of the TextField.

TextField(
        modifier = Modifier
            .fillMaxWidth(),
        value = "",
        onValueChange = {  },
        leadingIcon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_baseline_search_24),
                contentDescription = "Search Icon",
            )
        },
        leadingIcon = {
          Icon(
              painter = painterResource(id = R.drawable.ic_search),
              contentDescription = "search") },

        trailingIcon = {
          Icon(
              painter = painterResource(id = R.drawable.ic_filter),
              contentDescription = "filter") },

        placeholder = {
          Text(
              text = "Search for food ...",
              modifier = Modifier
                  .fillMaxWidth(),
              textAlign = TextAlign.Center,
          )
        },
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = Color.White,
            cursorColor = Color.Black,
            placeholderColor = Color.Black,
            // leave for last. delete above
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
        )
)

Conclusion

Our TextField is looking great. We have added icons to the TextField and also changed the colors of the TextField.

In our next episode, we will focus on using the Image Composable to display images in our application.