Add Custom Spinner in Android Application Using Android Studio in a minute

Create Custom Spinner in Android Studio

As we know that spinner is very important widget in android and plays very important role we can complete many tasks with the help of spinners.

But Somestime we need to show some hints below the Spinner Items or Show Some Kind of Images (below, top or left right etc) or checkbox or radio box for this purpose we need to create custom spinners. Custom Spinners implementation method is totally different than regular spinner like an example Picture is given below.

To create and implement Custom Spinner as showing in above picture just follow the steps.

1. First of all create two Java Classes by right Click on App Folder and then Select New and then Java Class and give them names as SpinnerItems.java and CustomAdapter.java.



2. Now you also need to create an xml activities by Right Click on layout folder from left and Select New then Choose Activity and give then name as custom_spinner.xml.

Note!  Here you already have MainActivty.java and main_activity.xml files so you need to create them again.

After Creating above mentioned xml activity and java classed now just copy and paste the following codes in their relevant activity or classes and modify this code according your needs.

Click on Tabs to get your codes and copy these codes in to activities as told as above.

<!--xml version="1.0" encoding="utf-8"?--> <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" tools:context="com.infopalacess.customspinnerexample.MainActivity"> <Spinner android:id="@+id/spinner" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="12dp" /> </RelativeLayout>

<!--xml version="1.0" encoding="utf-8"?--> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textMain" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/textsmall" android:layout_alignParentTop="true" android:layout_margin="16dp" android:layout_toEndOf="@+id/image_view_flag" android:gravity="center" android:text="India" android:textColor="#000000" android:textSize="18dp" /> <TextView android:id="@+id/textsmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="id/textMain" android:layout_alignParentTop="true" android:layout_margin="8dp" android:gravity="center" android:text="Infopalacess" android:textColor="#BDBDBD" android:textSize="9dp" /> </RelativeLayout>

package com.infopalacess.customspinnerexample; public class SpinnerItem { private String mMainTxt; private String mSmallTxt; public SpinnerItem(String mainText, String smallText) { mMainTxt = mainText; mSmallTxt = smallText; } public String getMainText() { return mMainTxt; } public int getSmallText() { return smallText; } }

package com.infopalacess.customspinnerexample; import android.content.Context; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView; import java.util.ArrayList; public class CustomAdapter extends ArrayAdapter<SpinnerItems> { public CustomAdapter(Context context, ArrayList<SpinnerItems> customList) { super(context, 0, customList); } @NonNull @Override public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) { return initView(position, convertView, parent); } @Override public View getDropDownView(int position, @Nullable View convertView, @NonNull ViewGroup parent) { return initView(position, convertView, parent); } private View initView(int position, View convertView, ViewGroup parent) { if (convertView == null) { convertView = LayoutInflater.from(getContext()).inflate( R.layout.custom_spinner, parent, false ); } TextView imageViewFlag smallTextView= convertView.findViewById(R.id.textsmall); TextView textViewName mainTextView= convertView.findViewById(R.id.textMain); SpinnerItems currentItem = getItem(position); if (currentItem != null) { textMain.setText(currentItem.getMainText()); smallTextView.setText(currentItem.getSmallText()); } return convertView; } }

package com.infopalacess.customspinnerexample; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.Spinner; import android.widget.Toast; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private ArrayList<SpinnerItems> customList; private CustomAdapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initList(); Spinner spinner = findViewById(R.id.spinner); mAdapter = new CustomAdapter(this, customList); spinnerCountries.setAdapter(mAdapter); spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<!----> parent, View view, int position, long id) { //getting Spinner Item Selected Postion Spinner clickedItem = (SpinnerItems) parent.getItemAtPosition(position); //converting position of item into String String clickeditemname = clickedItem.getMainText(); //here i am going to show a toast but you can add your own code according to your needs Toast.makeText(MainActivity.this, clickeditemname + " selected", Toast.LENGTH_SHORT).show(); } @Override public void onNothingSelected(AdapterView<!----> parent) { } }); } private void initList() { customList = new ArrayList<>(); customList.add(new SpinnerItems("HTML", "It is Structural Layout")); customList.add(new SpinnerItems("CSS", "It is Presentation Layout")); customList.add(new SpinnerItems("JavaScript", "It is a behavior Layout")); customList.add(new CountryItem("Waqas Ahmed", "I am Software Developer")); } }

That's it you have done this task now you have a custom Spinner. If you still have any problem or confusion then fill the contact form below and let me know. Thanks