Custom Android Spinner Tutorial
Custom Android Spinner tutorial describes how to create android spinner linked with multiple values on item selection. Some times we need to bind string value of spinner item with other values as integer …. and set on item selected listener of spinner also describes how to change spinner text size, color and padding.
Create a new android studio project and open main activity XML file. Then add Spinner and TextView that shows the linked value of Spinner Adapter.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" tools:context=".MainActivity" android:orientation="vertical" > <Spinner android:layout_width="match_parent" android:layout_height="40dp" android:id="@+id/myspinner" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_marginTop="50dp"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="email" android:textColor="@color/colorPrimaryDark" android:textSize="25sp" android:id="@+id/email" android:layout_marginTop="100dp" android:gravity="center"/> </LinearLayout>
Custom Spinner Adapter
First, We need to create Spinner data model class that holds the values of Spinner data.
public class SpinnerData {
String firstname;
String email;
int age;
public SpinnerData(String firstname, String email, int age) {
this.firstname = firstname;
this.email = email;
this.age = age;
}
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
Custom Spinner Adapter Java class. Create a new java class which inherits ArrayAdapter class of type SpinnerData model. Then create Context and arrayList of SpinnerData model. Next, Right click and select generate constructor and select the next constructor.
Context context;
ArrayList<SpinnerData> arrayList;
public MySpinnerAdaper(@NonNull Context context, int textViewResourceId, @NonNull ArrayList<SpinnerData> objects) {
super(context, textViewResourceId, objects);
this.context = context;
this.arrayList = objects;
}
Now, We need to override the next 3 methods.
@Override
public int getCount() {
return arrayList.size();
}
@Nullable
@Override
public SpinnerData getItem(int position) {
return arrayList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
Next, We need to override the getView() method and getDropDownView() method.
@SuppressLint("SetTextI18n")
@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
if (arrayList.get(position).getEmail() == null){
TextView textView = new TextView(context);
String name = arrayList.get(position).getFirstname();
textView.setText(name);
textView.setTextColor(context.getResources().getColor(R.color.colorPrimaryDark));
textView.setAllCaps(false);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.gravity= Gravity.CENTER;
params.setMargins(10,10,10,0);
textView.setLayoutParams(params);
textView.setPadding(10,10,10,10);
textView.setGravity(Gravity.CENTER);
textView.setTextSize(30);
return textView;
}
else {
TextView textView = new TextView(context);
String name = arrayList.get(position).getFirstname();
int age = arrayList.get(position).getAge();
textView.setText(name+ " "+age);
textView.setTextColor(context.getResources().getColor(R.color.colorPrimaryDark));
textView.setAllCaps(false);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.gravity= Gravity.CENTER;
params.setMargins(10,10,10,0);
textView.setLayoutParams(params);
textView.setGravity(Gravity.CENTER);
textView.setPadding(10,10,10,10);
textView.setTextSize(30);
return textView;
}
}
@Override
public View getDropDownView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
if (arrayList.get(position).getEmail() == null){
TextView textView = new TextView(context);
String name = arrayList.get(position).getFirstname();
int age = arrayList.get(position).getAge();
textView.setText(name);
textView.setTextColor(context.getResources().getColor(R.color.colorPrimaryDark));
textView.setAllCaps(false);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.gravity= Gravity.CENTER;
params.setMargins(10,10,10,0);
textView.setPadding(10,10,10,10);
textView.setLayoutParams(params);
textView.setGravity(Gravity.CENTER);
textView.setTextSize(30
);
return textView;
}
else {
TextView textView = new TextView(context);
String name = arrayList.get(position).getFirstname();
int age = arrayList.get(position).getAge();
textView.setText(name+ " "+age);
textView.setTextColor(context.getResources().getColor(R.color.colorPrimaryDark));
textView.setAllCaps(false);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.gravity= Gravity.CENTER;
params.setMargins(10,10,10,0);
textView.setLayoutParams(params);
textView.setPadding(10,10,10,10);
textView.setGravity(Gravity.CENTER);
textView.setTextSize(16);
return textView;
}
}
Custom Spinner Adapter full Java code
public class MySpinnerAdaper extends ArrayAdapter<SpinnerData> {
Context context;
ArrayList<SpinnerData> arrayList;
public MySpinnerAdaper(@NonNull Context context, int textViewResourceId, @NonNull ArrayList<SpinnerData> objects) {
super(context, textViewResourceId, objects);
this.context = context;
this.arrayList = objects;
}
@Override
public int getCount() {
return arrayList.size();
}
@Nullable
@Override
public SpinnerData getItem(int position) {
return arrayList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@SuppressLint("SetTextI18n")
@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
if (arrayList.get(position).getEmail() == null){
TextView textView = new TextView(context);
String name = arrayList.get(position).getFirstname();
textView.setText(name);
textView.setTextColor(context.getResources().getColor(R.color.colorPrimaryDark));
textView.setAllCaps(false);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.gravity= Gravity.CENTER;
params.setMargins(10,10,10,0);
textView.setLayoutParams(params);
textView.setPadding(10,10,10,10);
textView.setGravity(Gravity.CENTER);
textView.setTextSize(30);
return textView;
}
else {
TextView textView = new TextView(context);
String name = arrayList.get(position).getFirstname();
int age = arrayList.get(position).getAge();
textView.setText(name+ " "+age);
textView.setTextColor(context.getResources().getColor(R.color.colorPrimaryDark));
textView.setAllCaps(false);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.gravity= Gravity.CENTER;
params.setMargins(10,10,10,0);
textView.setLayoutParams(params);
textView.setGravity(Gravity.CENTER);
textView.setPadding(10,10,10,10);
textView.setTextSize(30);
return textView;
}
}
@Override
public View getDropDownView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
if (arrayList.get(position).getEmail() == null){
TextView textView = new TextView(context);
String name = arrayList.get(position).getFirstname();
int age = arrayList.get(position).getAge();
textView.setText(name);
textView.setTextColor(context.getResources().getColor(R.color.colorPrimaryDark));
textView.setAllCaps(false);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.gravity= Gravity.CENTER;
params.setMargins(10,10,10,0);
textView.setPadding(10,10,10,10);
textView.setLayoutParams(params);
textView.setGravity(Gravity.CENTER);
textView.setTextSize(30
);
return textView;
}
else {
TextView textView = new TextView(context);
String name = arrayList.get(position).getFirstname();
int age = arrayList.get(position).getAge();
textView.setText(name+ " "+age);
textView.setTextColor(context.getResources().getColor(R.color.colorPrimaryDark));
textView.setAllCaps(false);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.gravity= Gravity.CENTER;
params.setMargins(10,10,10,0);
textView.setLayoutParams(params);
textView.setPadding(10,10,10,10);
textView.setGravity(Gravity.CENTER);
textView.setTextSize(16);
return textView;
}
}
}
Good Work, Now open main activity java file and initiate the following obejcts in main activity java class.
Spinner spinner; MySpinnerAdaper mySpinnerAdaper; ArrayList<SpinnerData> arrayList = new ArrayList<>(); TextView email;
Add the following method in main activity java class. This method to fill the Spinner data ArrayList.
private void fillArralyList(){
arrayList.add(new SpinnerData("Select Name",null,0));
arrayList.add(new SpinnerData("Abdelhamid","abdo@gmail.com",29));
arrayList.add(new SpinnerData("Ahmed","ahmed@gmail.com",25));
arrayList.add(new SpinnerData("Ali","ali@gmaio.com",30));
arrayList.add(new SpinnerData("Ibrahim","ibrahim@gmaio.com",20));
arrayList.add(new SpinnerData("Aya","aya@gmaio.com",25));
}
Inside onCreate() method, Initiate the Custom Spinner adapter and cast it to spinner adapter. And call fill array list method before.
spinner= findViewById(R.id.myspinner); fillArralyList(); mySpinnerAdaper = new MySpinnerAdaper(this,android.R.layout.simple_list_item_1,arrayList); spinner.setAdapter(mySpinnerAdaper); mySpinnerAdaper.notifyDataSetChanged(); email = findViewById(R.id.email); spinner.setOnItemSelectedListener(onItemClickListener);
Spinner Adapter On Item Selected Listener
Here, We need to make the action when the user select the item to show the other values linked with spinner data. Add the following method in main activity java class. Adapter on item selection method provide us with integer value of item position that helps us to get the other values from SpinnerData ArrayList. Then, run the app.
AdapterView.OnItemSelectedListener onItemClickListener = new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
if (arrayList.get(position).getEmail() == null){
email.setText("No Name Selected");
}
else {
email.setText(arrayList.get(position).getEmail());
}
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
}
};
Thank You