Jetpack Compose App - Search Bar

Objective:

Previously, we added a BottomSheet to display an expanded image when the user clicks on the thumbnail. Today, we'll add a Search View to allow users to filter the results in the list.

Components built

Add or modify the following components:

• SearchView.kt: Add - This component will be displayed in the top app bar to allow filtering results
• AppBar.kt: Modify - add SearchView

Code

SearchView

Add SearchView.kt to the com.coroutines.thisdayinhistory.ui.components package in the app module:

package com.coroutines.thisdayinhistory.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import com.coroutines.thisdayinhistory.ui.utils.lighter
import com.coroutines.thisdayinhistory.ui.viewmodels.IHistoryViewModel

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchView(state: MutableState<TextFieldValue>, viewModel: IHistoryViewModel) {
    val interactionSource = remember { MutableInteractionSource() }


    BasicTextField(
        value = state.value,
        onValueChange = { value -> state.value = value; viewModel.search(state.value.text) },
        modifier = Modifier.padding(0.dp).width(260.dp),
        textStyle = MaterialTheme.typography.bodyMedium.copy(color = MaterialTheme.colorScheme.onBackground),
        keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Search),
        keyboardActions = KeyboardActions(onSearch = { viewModel.search(state.value.text)}),
        interactionSource = interactionSource,
        enabled = true,
        singleLine = true,
        cursorBrush = SolidColor(MaterialTheme.colorScheme.onBackground),
    ) {
        TextFieldDefaults.DecorationBox(
            value = state.value.text.ifEmpty { viewModel.filterKey },
            visualTransformation = VisualTransformation.None,
            innerTextField = it,
            trailingIcon = {
                if (state.value != TextFieldValue("")) {
                    IconButton(
                        onClick = {
                            state.value =
                                TextFieldValue("")
                            viewModel.search("")
                        }
                    ) {
                        Icon(
                            Icons.Default.Close,
                            contentDescription = "",
                        )
                    }
                } else {
                    Icon(
                        Icons.Default.Search,
                        contentDescription = "",
                    )
                }
            },
            interactionSource = interactionSource,
            enabled = true,
            singleLine = true,
            contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                top = 0.dp, bottom = 0.dp
            ),
            shape = RoundedCornerShape(12.dp),
            colors = TextFieldDefaults.colors(
                focusedIndicatorColor = MaterialTheme.colorScheme.background.lighter(0.2f),
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent
            ),
            container = { Box(Modifier.background(MaterialTheme.colorScheme.background.lighter(0.1f), RoundedCornerShape(12.dp) ))}

        
        )
    }
}

AppBar

Modify AppBar.kt in the ccom.coroutines.thisdayinhistory.ui.appbar package in the app module:

package com.coroutines.thisdayinhistory.ui.appbar

import androidx.compose.material3.LocalContentColor
import com.coroutines.thisdayinhistory.R
import com.coroutines.thisdayinhistory.ui.viewmodels.IHistoryViewModel
import androidx.annotation.StringRes
import androidx.compose.foundation.background
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material.icons.rounded.Menu
import androidx.compose.material3.DrawerState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.TextFieldValue
import com.coroutines.thisdayinhistory.ui.components.HistoryDatePickerDialog
import com.coroutines.thisdayinhistory.ui.components.SearchView
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Suppress("LongParameterList")
@Composable
fun AppBar(
    drawerState: DrawerState? = null,
    navigationIcon: (@Composable () -> Unit)? = null,
    historyViewModel: IHistoryViewModel,
    @StringRes title: Int? = null,
    @StringRes cancelButtonText: Int,
    scrollBehavior: TopAppBarScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(),
) {
    TopAppBar(
        modifier = Modifier.background(MaterialTheme.colorScheme.background),
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.background
        ),
        title = {},
        actions = {

        val textState = remember { mutableStateOf(TextFieldValue("")) }
        SearchView(state = textState , viewModel = historyViewModel)

            CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
                var showDatePicker by remember {
                    mutableStateOf(false)
                }

                if (showDatePicker) {
                    HistoryDatePickerDialog(
                        historyViewModel,
                        resIdCancel = cancelButtonText,
                        onDateSelected = {
                            historyViewModel.onDateChanged(it!!)
                        },
                        onDismiss = { showDatePicker = false }
                    )
                }

                IconButton(
                    onClick = {
                        showDatePicker = true
                    },
                    ) {
                    Icon(
                        imageVector = Icons.Filled.DateRange,
                        contentDescription = stringResource(R.string.appbar_calendar)
                    )
                }
            }
        },
        navigationIcon = {
            if (drawerState != null && navigationIcon == null){
                DrawerIcon(drawerState = drawerState)
            } else {
                navigationIcon?.invoke()
            }
        },
        scrollBehavior = scrollBehavior
    )
}


@Composable
private fun DrawerIcon(drawerState: DrawerState) {
    val coroutineScope = rememberCoroutineScope()
    IconButton(onClick = {
        coroutineScope.launch {
            drawerState.open()
        }
    }) {
        Icon(
            Icons.Rounded.Menu,
            tint = MaterialTheme.colorScheme.onBackground,
            contentDescription = "hello"
        )
    }
}