Jetpack Compose: Getting Started

TextFields are used to get user input. They are 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.

The TextField Composable is part of the material 3 library. We need to opt into this library in order to use the TextField Composable. We can do this by adding the @ExperimentalMaterial3Api annotation to the Composable that uses the TextField Composable.

TextField

Let us add a TextField to the app. In our TestPage Composable, we will add a TextField.

@ExperimentalMaterial3Api
@Composable
fun TestPage() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        TextField(
            value = "",
            onValueChange = { },
            placeholder = {
                Text(text = "Enter your name")
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp)
        )
    }
}

Now that we have added a TextField to our app, it is time for you to do some practice of your own.

• Create a new file in the components folder called SearchBar.kt.
• Create a new Composable called SearchBar.
• Add a Box Composable to the SearchBar Composable.
• Ensure the Box Composable fits the entire width of the screen and has its height set to 75.dp.
• Add a TextField Composable to the Box Composable.
• Ensure the TextField Composable has a placeHolder with a text indicating “Search for food …”.
• Make sure it also fills the entire width of the screen.

SearchBar

@ExperimentalMaterial3Api
@Composable
fun SearchBar() {

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(75.dp)
            .padding(end = 16.dp, start = 16.dp, top = 10.dp)
    ) {

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

Fantastic! You have successfully added a TextField to the app. You have also used different parameters available on the TextField Composable to customize its appearance.

In our next session, we will look into ways of making our TextField more interactive by adding icons and customizing the background colors.