Skip to main content

How to filter a ListView based on user input in Kotlin Android

How to filter a ListView based on user input in Kotlin Android.

Here's a detailed step-by-step tutorial on how to filter a ListView based on user input in Kotlin Android.

Step 1: Set up the project​

  1. Create a new Android project in Android Studio.
  2. Set up the necessary dependencies in your project's build.gradle file.

Step 2: Create the layout for the ListView​

  1. Open the activity_main.xml file in the res/layout directory.
  2. Add a ListView element to the layout and give it an id.
<ListView
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>
  1. Create a new XML layout file named search_bar.xml in the res/layout directory.
  2. Add an EditText element for the search input and a Button element for the search button.
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="8dp">

    <EditText
        android:id="@+id/searchEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Search"
        android:inputType="text"/>

    <Button
        android:id="@+id/searchButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Search"/>
</LinearLayout>

Step 4: Create the custom list item layout​

  1. Create a new XML layout file named list_item.xml in the res/layout directory.
  2. Design the layout for a single item in the list. You can include any views you want, such as an ImageView and TextViews.

Step 5: Create the Adapter for the ListView​

  1. Create a new Kotlin class named CustomAdapter that extends ArrayAdapter.
  2. Implement the necessary methods, such as getView(), to bind the data to the custom list item layout.
class CustomAdapter(context: Context, private val itemList: List<String>) :
    ArrayAdapter<String>(context, R.layout.list_item, itemList) {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view = convertView ?: LayoutInflater.from(context).inflate(R.layout.list_item, parent, false)

        val item = itemList[position]

        // Bind the data to the views in the list item layout

        return view
    }
}

Step 6: Set up the ListView in the MainActivity​

  1. Open the MainActivity.kt file.
  2. Initialize the ListView and set the adapter in the onCreate() method.
class MainActivity : AppCompatActivity() {
    private lateinit var listView: ListView
    private lateinit var adapter: CustomAdapter
    private lateinit var searchEditText: EditText
    private lateinit var searchButton: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        listView = findViewById(R.id.listView)
        searchEditText = findViewById(R.id.searchEditText)
        searchButton = findViewById(R.id.searchButton)

        val itemList = listOf("Item 1", "Item 2", "Item 3") // Replace with your own data
        adapter = CustomAdapter(this, itemList)
        listView.adapter = adapter
    }
}

Step 7: Implement the search functionality​

  1. Add a click listener to the search button in the onCreate() method.
  2. Inside the click listener, get the user input from the search EditText.
  3. Filter the list based on the user input and update the adapter's dataset.
  4. Call adapter.notifyDataSetChanged() to refresh the ListView.
searchButton.setOnClickListener {
    val userInput = searchEditText.text.toString().trim()

    val filteredList = itemList.filter { item ->
        item.contains(userInput, ignoreCase = true)
    }

    adapter.clear()
    adapter.addAll(filteredList)
    adapter.notifyDataSetChanged()
}

That's it! You have successfully implemented the functionality to filter a ListView based on user input in Kotlin Android. You can now run the app and test the search feature.