Open In App

How to Implement Custom Searchable Spinner in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

Android Spinner is a view similar to the dropdown list which is used to select one option from the list of options. It provides an easy way to select one item from the list of items and it shows a dropdown list of all values when we click on it. The default value of the android spinner will be the currently selected value and by using an Adapter we can easily bind the items to the spinner objects. In this article, we are going to implement a custom searchable spinner in the Android Studio so that we can provide a better user experience to the user and make it convenient for them to search and select an item in a list of items. Advantages of a searchable spinner:

  • It provides an edge over the normal listview as here the user can directly search an item rather than scrolling the whole list.
  • Searching makes users’ work easier so, many items can be inserted into a single list.

What we are going to build in this article?

Here we are going to take an array list and then insert different items into that list and then using a dialog and adapter we are going to make that list searchable and selectable. Below is a sample video of a custom searchable spinner that we are going to build in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a new project

  • Open a new project.
  • We will be working on Empty Activity with language as Java. Leave all other options unchanged.
  • You can change the name of the project at your convenience.
  • There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?  

Step 2: Add a new vector asset in drawable

Navigate to drawable > right-click > new > vector asset and then select the following drop-down asset from clip art.

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<!-- Relative layout as parent layout -->
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:gravity="center"
    tools:context=".MainActivity">
 
  <!-- text view to show the selected item-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/testView"
        android:hint="Select course"
        android:padding="12dp"
        android:gravity="center_vertical"
        android:drawableEnd="@drawable/ic_arrow"
        android:background="@android:drawable/editbox_background"
        />
 
</RelativeLayout>


 
 

Step 4: Creating a new resource file

 

Navigate to the app > res > layout > right click > New  > Layout Resource File and then name it as dialog_searchable_spinner.

 

 

Use the below code in the dialog_searchable_spinner.xml file

 

XML




<?xml version="1.0" encoding="utf-8"?>
 
<!-- Linear layout as parent layout-->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp"
    android:background="@android:color/white"
    >
   
    <!-- Text view to show the text Select course-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Select Course"
        android:textSize="20sp"
        android:textStyle="bold"
        />
   
    <!-- Edit text to allow user to type name
           of item he/she wants to search-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edit_text"
        android:hint="Search..."
        android:padding="12dp"
        android:singleLine="true"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:background="@android:drawable/editbox_background"
        />
   
      <!-- List view to insert list of items-->
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/list_view"
        />
 
</LinearLayout>


 
 

Step 5: Working with the MainActivity.java file

 

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

 

Java




package com.example.custom_searchable_spinner;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
 
    // Initialize variable
    TextView textview;
    ArrayList<String> arrayList;
    Dialog dialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // assign variable
        textview=findViewById(R.id.testView);
 
        // initialize array list
        arrayList=new ArrayList<>();
 
        // set value in array list
        arrayList.add("DSA Self Paced");
        arrayList.add("Complete Interview Prep");
        arrayList.add("Amazon SDE Test Series");
        arrayList.add("Compiler Design");
        arrayList.add("Git & Github");
        arrayList.add("Python foundation");
        arrayList.add("Operating systems");
        arrayList.add("Theory of Computation");
 
        textview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Initialize dialog
                dialog=new Dialog(MainActivity.this);
 
                // set custom dialog
                dialog.setContentView(R.layout.dialog_searchable_spinner);
 
                // set custom height and width
                dialog.getWindow().setLayout(650,800);
 
                // set transparent background
                dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
 
                // show dialog
                dialog.show();
 
                // Initialize and assign variable
                EditText editText=dialog.findViewById(R.id.edit_text);
                ListView listView=dialog.findViewById(R.id.list_view);
 
                // Initialize array adapter
                ArrayAdapter<String> adapter=new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1,arrayList);
 
                // set adapter
                listView.setAdapter(adapter);
                editText.addTextChangedListener(new TextWatcher() {
                    @Override
                    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
 
                    }
 
                    @Override
                    public void onTextChanged(CharSequence s, int start, int before, int count) {
                        adapter.getFilter().filter(s);
                    }
 
                    @Override
                    public void afterTextChanged(Editable s) {
 
                    }
                });
 
                listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                        // when item selected from list
                        // set selected item on textView
                        textview.setText(adapter.getItem(position));
 
                        // Dismiss dialog
                        dialog.dismiss();
                    }
                });
            }
        });
    }
}


 
 

We have successfully made the Custom Searchable Spinner for our application. The final output is shown below.

 

Output: 

 



Last Updated : 28 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads