How to Implement Custom Searchable Spinner in Android?
Last Updated :
28 Feb, 2022
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:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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
xmlns:android="http://schemas.android.com/apk/res/android"
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:
Similar Reads
How to Implement Item Click Interface in Android?
When we click on an item in an application either it gives some information or it redirects the user to any other page. In this article, we will learn that how we can implement Item Click Interface in an android application. What we are going to build in this article?In this article, we will be usin
5 min read
How to Implement PDF Picker in Android?
In this article, we are going to see how we can implement a PDF picker in android studio and get the file information of the pdf like file name, size and path. In this application, we will create a launcher to launch the file picker and display the file information after a pdf is picked successfully
5 min read
How to Implement Swipe Down to Refresh in Android
Certain applications show real-time data to the users, such as stock prices, availability of a product on online stores, etc. Showing real-time data requires continuous syncing of the application, and could be possible by implementing a program such as a thread. A Thread could be initiated by the ap
3 min read
How to add Custom Spinner in Android?
Spinner is a widget that is used to select an item from a list of items. When the user tap on a spinner a drop-down menu is visible to the user. In this article, we will learn how to add custom spinner in the app. Steps of Implementing Custom SpinnerStep 1: Create a new layout for each item in Spinn
5 min read
How to Implement Country Code Picker in Android?
Country Code Picker (CCP) is an android library that helps users to select country codes (country phone codes) for telephonic forms. CCP provided a UI component that helps the user to select country codes, country flags, and many more in an android spinner. It gives well-designed looks to forms on t
3 min read
How to implement View Shaker in Android
View Shaker is an animation in which, the UI of screen vibrates for a limited period of time. This can be implemented on the whole layout or some particular widget. It is a very common effect that developers use, especially to show incorrect credentials. View Shaker helps us to animate the widgets.
3 min read
How to Implement TextSwitcher in Android?
In Android, TextSwitcher is a useful tool for displaying text with animations. It can be seen as a special version of ViewSwitcher, where its children are only TextView elements. TextSwitcher allows us to add smooth transitions to text, making it part of the transition widget family. Whenever you ca
3 min read
How to Implement Date Range Picker in Android?
Date Range Picker is a widely used feature in many popular Android apps and an essential component of Material Design. It allows users to select a range of dates such as a start and end date for various purposes including scheduling, filtering data, and setting time boundaries. Some Of The Real Life
4 min read
How to Implement Custom Calendar in Android?
Nowadays in most of the apps, we see Calendar in most of the apps for displaying birth dates or for any appointment application. Displaying the date in the app with the help of the Calendar view gives a better user experience. In this article, we are going to make a custom calendar for our android a
4 min read
How to Implement Polling in Android?
Many times you may have seen on some apps like youtube, LinkedIn, etc. polling is done and users choose their options whatever they want to choose. Here we are going to implement polling in Android Studio. What we are going to build in this article? In this article, we will ask the user a question a
4 min read