Jetpack Compose Search Bar Impl.

Photo by Brooke Cagle on Unsplash

If you’re looking to implement a search bar in your app using Jetpack Compose, you’ve come to the right place. In this article, we’ll be exploring how to create a search bar, from the basics all the way to more complex examples.

The Basics: TextField Composable

To start, let’s create a simple TextField composable. This will serve as the foundation for our search bar.

@Composable
fun SearchBar() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Search") },
        modifier = Modifier.fillMaxWidth()
    )
}

In the above code, we’ve defined a composable SearchBar. It contains a TextField where we can input our search terms. The text variable is mutable and remembered across recompositions, allowing us to change and keep track of the input.

Adding an Icon

Next, let’s add an icon to our search bar. We’ll use the leadingIcon parameter of the TextField composable.

@Composable
fun SearchBar() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Search") },
        leadingIcon = { Icon(Icons.Filled.Search…