Compose TextField in android.

SearchListData.kt

fun actorsData(): List<Actors> {
    val actorsList = ArrayList<Actors>()
    data.forEach {
        actorsList.add(Actors(it))
    }

    return actorsList
}

private val data = listOf(
    "Mariann Aalda", "Aaliyah", "Angela Aames", "Caroline Aaron", "Bonnie Aarons",
    "Dorothy Abbott", "Diahnne Abbott", "Loretta Abbott", "Rose Abdoo", "Paula Abdul",
    "Betty Aberlin", "Donzaleigh Abernathy", "Amanda Abizaid", "Whitney Able", "Amy Acker",
    "Iris Acker", "Jean Acker", "Bettye Ackerman", "Leslie Ackerman", "Danneel Ackles",
    "Anabelle Acosta", "Acquanetta", "Ava Acres", "Adele Exarchopoulus", "Isabella Acres",
    "Jane Actman", "Belle Adair", "Kathryn Adams Doty", "Janeshia Adams-Ginyard",
    "Amy Adams", "Beverly Adams", "Brooke Adams", "Catlin Adams", "Dora Mills Adams",
    "Dorothy Adams", "Eadie Adams", "Edie Adams", "Freya Adams", "Genevieve Adams",
    "Jane Adams", "Joey Lauren Adams", "Julie Adams", "Lillian Adams", "Marla Adams",
    "Mary Kay Adams", "Mary Adams", "Neile Adams", "Jane Adams", "Stella Adams",
    "Yolanda Adams", "Calpernia Addams", "Nancy Addison", "Celia Adler", "Joanna P. Adler",
    "Sara Adler", "Stella Adler", "Gideon Adlon", "Pamela Adlon", "Iris Adrian",
    "Uzo Aduba", "Aarthi Agarwal", "Keiko Agena", "Shohreh Aghdashloo", "Dianna Agron",
    "Christina Aguilera", "Lassie Lou Ahern", "Peggy Ahern", "Jennie Ahlstrom", "Rita Rani Ahuja",
    "Betsy Aidem", "Mary Ainslee", "Helen Ainsworth", "Malin Åkerman", "Andra Akers",
    "Karen Akers", "Desiree Akhavan", "Shuko Akune", "Mackenzie Aladjem", "Natasha Alam",
    "Lori Alan", "Morjana Alaoui", "Jessica Alba", "Maria Alba", "Viola Alberti",
    "Mabel Albertson", "Tessa Albertson", "Patricia Alice Albrecht", "Lola Albright", "Beatrice Alda",
    "Elizabeth Alda", "Rutanya Alda", "Mary Alden", "Elizabeth Alderfer", "Mari Aldon",
    "Kay Aldridge", "Raquel Alessi", "Denise Alexander", "Jaimie Alexander", "Jane Alexander",
    "Katharine Alexander", "Khandi Alexander", "Olivia Alexander", "Sasha Alexander",
    "Gloria Alexandra", "Tiana Alexandra", "Sadie Alexandru", "Ajiona Alexus", "Kristian Alfonso",
    "Khalilah Ali", "Sophia Ali", "Tatyana Ali", "Veronica Porché Ali", "Mary Alice",
    "Ana Alicia", "Bianca Allaine", "Louise Allbritton", "Gia Allemand", "Amy Allen",
    "Barbara Jo Allen", "Billie Allen", "Christa B. Allen", "Crystal Allen", "Debbie Allen",
    "Diana Allen", "Dorothy Allen", "Georgia Allen", "Gracie Allen", "India Allen",
    "Jo Harvey Allen", "Joan Allen", "Jonelle Allen", "Judith Allen",
)

SearchScreen.kt

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Clear
import androidx.compose.material.icons.rounded.Search
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.developersbreach.composeactors.R


@Composable
fun SearchScreen(
    searchViewModel: SearchViewModel = viewModel(),
) {
    Surface(
        color = MaterialTheme.colors.background
    ) {
        Scaffold(
            topBar = { SearchAppBar(searchViewModel) }
        ) {
            Box {
                ActorsList(searchViewModel)
            }
        }
    }
}

@Composable
private fun ActorsList(
    viewModel: SearchViewModel,
) {
    val actorsList = viewModel.list.observeAsState().value

    LazyColumn(
        modifier = Modifier.padding(bottom = 48.dp)
    ) {
        if (!actorsList.isNullOrEmpty()) {
            items(actorsList) { actor ->
                Text(
                    text = actor.actorName,
                    style = MaterialTheme.typography.h6,
                    color = MaterialTheme.colors.onBackground,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 20.dp, vertical = 12.dp)
                        .wrapContentWidth(Alignment.Start)
                )
            }
        }
    }
}

@Composable
private fun SearchAppBar(
    viewModel: SearchViewModel,
) {
    // Immediately update and keep track of query from text field changes.
    var query: String by rememberSaveable { mutableStateOf("") }
    var showClearIcon by rememberSaveable { mutableStateOf(false) }

    if (query.isEmpty()) {
        showClearIcon = false
    } else if (query.isNotEmpty()) {
        showClearIcon = true
    }

    TextField(
        value = query,
        onValueChange = { onQueryChanged ->
            // If user makes changes to text, immediately updated it.
            query = onQueryChanged
            // To avoid crash, only query when string isn't empty.
            if (onQueryChanged.isNotEmpty()) {
                // Pass latest query to refresh search results.
                viewModel.performQuery(onQueryChanged)
            }
        },
        leadingIcon = {
            Icon(
                imageVector = Icons.Rounded.Search,
                tint = MaterialTheme.colors.onBackground,
                contentDescription = "Search Icon"
            )
        },
        trailingIcon = {
            if (showClearIcon) {
                IconButton(onClick = { query = "" }) {
                    Icon(
                        imageVector = Icons.Rounded.Clear,
                        tint = MaterialTheme.colors.onBackground,
                        contentDescription = "Clear Icon"
                    )
                }
            }
        },
        maxLines = 1,
        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
        placeholder = { Text(text = stringResource(R.string.hint_search_query)) },
        textStyle = MaterialTheme.typography.subtitle1,
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
        modifier = Modifier
            .fillMaxWidth()
            .background(color = MaterialTheme.colors.background, shape = RectangleShape)
    )
}

SearchViewModel.kt

import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import com.developersbreach.composeactors.model.Actors

class SearchViewModel : ViewModel() {

    private var _list = MutableLiveData<List<Actors>>()
    val list: LiveData<List<Actors>>
        get() = _list

    init {
        loadActors()
    }

    fun loadActors() {
        _list.postValue(actorsListData())
    }

    fun performQuery(
        query: String,
    ) {
        val filteredList = ArrayList<Actors>()
        actorsListData().forEach { actors ->
            if (actors.actorName.lowercase().contains(query.lowercase())) {
                filteredList.add(Actors(actors.actorName))
            }
        }
        _list.postValue(filteredList)
    }

    private fun actorsListData(): List<Actors> {
        val data = listOf("Adele Exarchopoulos", "timothee chalamet", "Al Pacino")
        val actorsList = ArrayList<Actors>()
        data.forEach {
            actorsList.add(Actors(it))
        }

        return actorsList
    }
}