[android] How to add a Hint in spinner in XML

I am trying to add a Hint in the spinner widget as there is no option of Hint as in EditText, I want to show Gender as a Hint and when clicked it must show only Male and Female not the hint.

How it can be Done Only Using XML

XML code of spinner.

  <Spinner
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/spinner1"
      android:entries="@array/gender"
      android:layout_marginTop="10dp"
      android:layout_marginLeft="25dp"
      android:layout_marginRight="25dp"
      android:layout_gravity="center_horizontal" />

String Array of the spinner

<string-array name="gender">
     <item>Male</item>
     <item>Female</item>
</string-array>

make your hint at final position in your string array like this City is the hint here

array_city = new String[]{"Irbed", "Amman", "City"};

and then in your array adapter

ArrayAdapter<String> adapter_city = new ArrayAdapter<String>(getContext(), android.R.layout.simple_spinner_item, array_city) {
            @Override
            public int getCount() {
                // to show hint "Select Gender" and don't able to select
                return array_city.length-1;
            }
        };

so the adapter return just first two item and finally in onCreate() method or what ,,, make Spinner select the hint

yourSpinner.setSelection(array_city.length - 1);

In the adapter you can set the first item as disabled. Below is the sample code

@Override
public boolean isEnabled(int position) {
    if (position == 0) {
        // Disable the first item from Spinner
        // First item will be use for hint
        return false;
    } else {
        return true;
    }
}

And set the first item to grey color.

@Override
public View getDropDownView(int position, View convertView,
                                    ViewGroup parent) {
    View view = super.getDropDownView(position, convertView, parent);
    TextView tv = (TextView) view;
    if (position == 0) {
        // Set the hint text color gray
        tv.setTextColor(Color.GRAY);
    } else {
        tv.setTextColor(Color.BLACK);
    }
    return view;
}

And if the user selects the first item then do nothing.

@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
    String selectedItemText = (String) parent.getItemAtPosition(position);
    // If user change the default selection
    // First item is disable and it is used for hint
    if (position > 0) {
        // Notify the selected item text
        Toast.makeText(getApplicationContext(), "Selected : " + selectedItemText, Toast.LENGTH_SHORT).show();
    }
}

Refer the below link for detail.

How to add a hint to Spinner in Android

For Kotlin !!

Custom Array adapter to hide the last item of the spinner

 import android.content.Context
 import android.widget.ArrayAdapter
 import android.widget.Spinner

 class HintAdapter<T>(context: Context, resource: Int, objects: Array<T>) :
    ArrayAdapter<T>(context, resource, objects) {

    override fun getCount(): Int {
        val count = super.getCount()
        // The last item will be the hint.
        return if (count > 0) count - 1 else count
    }
}

Spinner Extension function to set hint on spinner

fun Spinner.addHintWithArray(context: Context, stringArrayResId: Int) {
    val hintAdapter =
        HintAdapter<String>(
            context,
            android.R.layout.simple_spinner_dropdown_item,
            context.resources.getStringArray(stringArrayResId)
        )
    hintAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
    adapter = hintAdapter
    setSelection(hintAdapter.count)
}

How to use: add the extension by passing context and array on Spinner

spinnerMonth.addHintWithArray(context, R.array.months)

Note: The hint should be the last item of your string array

<string-array name="months">
    <item>Jan</item>
    <item>Feb</item>
    <item>Mar</item>
    <item>Apr</item>
    <item>May</item>
    <item>Months</item>
</string-array>

For Kotlin

What will you get:

Gray color if the hint is selected

Drop down list with gray color of the hint

Black color if something else than the hint is selected

I have added 5. step what changes the color of the text in the spinner depending on the selected item, because I couldn't find it here. In this case it is needed to change the text color to gray when the first item is selected in order to it looks like a hint.

1. Define a spinner in your activity_layout.xml

   <Spinner
       android:id="@+id/mySpinner"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
   

2. Define the string array in string.xml where the first item will be a hint.

   <string-array name="your_string_array">
       <item>Hint...</item>
       <item>Item1</item>
       <item>Item2</item>
       <item>Item3</item>
   </string-array>
   

3. Set up the spinner in the onCreate method in your Activity.kt

   Get string array from resources

       val items= resources.getStringArray(R.array.your_string_array)
   

   Create spinner adapter

       val spinnerAdapter= object : ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, items) {
   
       override fun isEnabled(position: Int): Boolean {
           // Disable the first item from Spinner
           // First item will be use for hint
           return position != 0
       }
   
       override fun getDropDownView(
           position: Int,
           convertView: View?,
           parent: ViewGroup
       ): View {
           val view: TextView = super.getDropDownView(position, convertView, parent) as TextView
           //set the color of first item in the drop down list to gray
           if(position == 0) {
               view.setTextColor(Color.GRAY)
           } else {
               //here is it possible to define color for other items by
               //view.setTextColor(Color.RED)
           }
           return view
       }
   
   }
   

4. Set drop down view resource and attach the adapter to your spinner.

   spinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)     
   mySpinner.adapter = spinnerAdapter
   

5. Change the color of the text in the spinner depending on the selected item

   mySpinner.onItemSelectedListener = object: AdapterView.OnItemSelectedListener{
       override fun onNothingSelected(parent: AdapterView<*>?) {
       }
   
       override fun onItemSelected(
           parent: AdapterView<*>?,
           view: View?,
           position: Int,
           id: Long
       ) {
           val value = parent!!.getItemAtPosition(position).toString()
           if(value == items[0]){
               (view as TextView).setTextColor(Color.GRAY)
           }
       }
   
   }
   

What worked for me is you would set your spinner up with a list of items including the hint at the beginning.

    final MaterialSpinner spinner = (MaterialSpinner) findViewById(R.id.spinner);

    spinner.setItems("Select something in this list", getString(R.string.ABC), getString(R.string.ERD), getString(R.string.KGD), getString(R.string.DFK), getString(R.string.TOE));

Now when the user actually selects something in the list, you would use the spinner.setItems method to set the list to everything besides your hint:

       spinner.setOnItemSelectedListener(new MaterialSpinner.OnItemSelectedListener<String>() {

            @Override public void onItemSelected(MaterialSpinner view, int position, long id, String item) {
                spinner.setItems(getString(R.string.ABC), getString(R.string.ERD), getString(R.string.KGD), getString(R.string.DFK), getString(R.string.TOE));

}

The hint will be removed as soon as the user selects something in the list.

It is very simple if position is '0' then call onNothingSelected method in OnItemSelectedListener. It worked fine for me.

      spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
        @Override
        public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

            **if (position == 0)
            {
                onNothingSelected(parent);
            }**
            else {

                String mechanicType = mechanicTpes[position];
                Toast.makeText(FirstUser.this, "Mechanic Tpye : "+mechanicType, Toast.LENGTH_SHORT).show();
            }




        }

        @Override
        public void onNothingSelected(AdapterView<?> parent) {
            Toast.makeText(FirstUser.this, "NOTHING SELECTED IN SPINNER", Toast.LENGTH_SHORT).show();


        }
    });

Step 1:

Your array looks like. last item your hint

Ex : private String[] yourArray = new String[] {"Staff", "Student","Your Hint"};

Step 2:

Create HintAdpater.java (Just copy & paste)

This class not return last item.. So your Hint not displays.

HintAdapter.java

package ajax.com.vvcoe.utils;

import android.content.Context;
import android.widget.ArrayAdapter;

import java.util.List;


public class HintAdapter  extends ArrayAdapter<String> {


public HintAdapter(Context context, int resource) {
    super(context, resource);
}

public HintAdapter(Context context, int resource, int textViewResourceId) {
    super(context, resource, textViewResourceId);
}

public HintAdapter(Context context, int resource, String[] objects) {
    super(context, resource, objects);
}

public HintAdapter(Context context, int resource, int textViewResourceId, String[] objects) {
    super(context, resource, textViewResourceId, objects);
}

public HintAdapter(Context context, int resource, List<String> objects) {
    super(context, resource, objects);
}

public HintAdapter(Context context, int resource, int textViewResourceId, List<String> objects) {
    super(context, resource, textViewResourceId, objects);
}

@Override
public int getCount() {
    // don't display last item. It is used as hint.
    int count = super.getCount();
    return count > 0 ? count - 1 : count;
}
}

Step 3:

Set spinner adapter like this

    HintAdapter hintAdapter=new HintAdapter(this,android.R.layout.simple_list_item_1,yourArray);
    yourSpinner.setAdapter(hintAdapter);
    // show hint
    yourSpinner.setSelection(hintAdapter.getCount());

Credit goes to @Yakiv Mospan from this answer - https://stackoverflow.com/a/22774285/3879847

I modify some changes only..

I've managed to add a 'hint' that is omitted from the drop down list. If my code looks a bit weird it's because I'm using Xamarin.Android so it's in C# but for all intents (heh) and purposes the Java equivalent should have the same effect.

The gist is that I've created a custom ArrayAdapter that will detect if it is the hint in the GetDropDownView method. If so then it will inflate an empty XML to hide the hint from the drop down.

My spinnerItem.xml is ...

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/spinnerText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="@dimen/text_left_padding"
    android:textAppearance="?android:attr/textAppearanceLarge"/>

My 'empty' hintSpinnerDropdownItem.xml which will hide the hint.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

I pass in an array of CustomObj without the hint. That's why I have the additional AddPrompt method to insert the hint at the beginning before it's passed to the parent constructor.

public class CustomArrayAdapter: ArrayAdapter<CustomObj>
{

    private const int HintPosition = 0;
    private const CustomObj HintValue = null;
    private const string Hint = "Hint";

    public CustomArrayAdapter(Context context, int textViewResourceId, CustomObj[] customObjs) : base(context, textViewResourceId, AddPrompt(customObjs))
    {


    private static CustomObj[] AddPrompt(CustomObj[] customObjs)
    {
        CustomObj[] customObjsWithHint = new CustomObj[customObjs.Length + 1];
        CustomObj[] hintPlaceholder = { HintValue };
        Array.Copy(hintPlaceholder , customObjsWithHint , 1);
        Array.Copy(customObjs, 0, customObjsWithHint , 1, customObjs.Length);
        return customObjsWithHint ;
    }

    public override Android.Views.View GetView(int position, Android.Views.View convertView, ViewGroup parent)
    {
        CustomObj customObj = GetItem(position);
        bool isHint = customObj == HintValue;

        if (convertView == null)
        {
            convertView = LayoutInflater.From(base.Context).Inflate(Resource.Layout.spinnerItem, parent, false);
        }

        TextView textView = convertView.FindViewById<TextView>(Resource.Id.spinnerText);
        textView.Text = isHint ? Hint : customObj.Value;
        textView.SetTextColor(isHint ? Color.Gray : Color.Black);

        return convertView;

    public override Android.Views.View GetDropDownView(int position, Android.Views.View convertView, ViewGroup parent)
    {
        CustomObj customObj = GetItem(position);

        if (position == HintPosition)
        {
            convertView = LayoutInflater.From(base.Context).Inflate(Resource.Layout.hintSpinnerDropdownItem, parent, false);
        }
        else
        {
            convertView = LayoutInflater.From(base.Context).Inflate(Resource.Layout.spinnerItem, parent, false);
            TextView textView = convertView.FindViewById<TextView>(Resource.Id.spinnerText);
            textView.Text = customObj.Value;
        }

        return convertView;
    }
}

You can set the spinner prompt:

spinner.setPrompt("Select gender...");

The simplest way I found was this: Creates a TextView or LinearLayout and places it along with the Spinner in a RelativeLayout. Initially the textview will have the text as if it were the hint "Select one ...", after the first click this TextView is invisible, disabled and calls the Spinner that is right behind it.

Step 1:

In the activity.xml that finds the spinner put:

 <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <Spinner
        android:id="@+id/sp_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:spinnerMode="dropdown" />
    <LinearLayout
        android:id="@+id/ll_hint_spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center">
        <TextView

            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="Select..."/>

    </LinearLayout>
</RelativeLayout>

Step 2:

In your Activity.java type:

public class MainActivity extends AppCompatActivity {

    private LinearLayout ll_hint_spinner;
    private Spinner sp_main;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ll_hint_spinner = findViewById(R.id.ll_hint_spinner);
        sp_main = findViewById(R.id.sp_main);
        //Action after clicking LinearLayout / Spinner;
        ll_hint_spinner.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //By clicking "Select ..." the Spinner is requested;
                sp_main.performClick();
                //Make LinearLayout invisible
                setLinearVisibility(false);
                //Disable LinearLayout
                ll_hint_spinner.setEnabled(false);
                //After LinearLayout is off, Spinner will function normally;
                sp_main.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
                    @Override
                    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                        sp_main.setSelection(position);
                    }
                    @Override
                    public void onNothingSelected(AdapterView<?> parent) {
                        setLinearVisibility(true);
                    }
                });
            }
        });
    }
    //Method to make LinearLayout invisible or visible;
    public void setLinearVisibility(boolean visible) {
        if (visible) {
            ll_hint_spinner.setVisibility(View.VISIBLE);
        } else {
            ll_hint_spinner.setVisibility(View.INVISIBLE);
        }
    }
}

Example1 SameExample2 SameExample3

The examples of the images I used a custom Spinner, but the result of the last example will be the same.

Note: I have the example in github: click here!

The trick is this line

((TextView) view).setTextColor(ContextCompat.getColor(mContext, R.color.login_input_hint_color));

use it in the onItemSelected. Here is my code with more context

List<String> list = getLabels(); // First item will be the placeholder
        ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(mContext, android.R.layout.simple_spinner_item, list);
        dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(dataAdapter);
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                // First item will be gray
                if (position == 0) {
                    ((TextView) view).setTextColor(ContextCompat.getColor(mContext, R.color.login_input_hint_color));
                } else {
                    ((TextView) view).setTextColor(ContextCompat.getColor(mContext, R.color.primary_text));
                }
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {
            }
        });

This can be done in a very simple way. Instead of setting the adapter using the built-in values (android.R.layout.simple_list_item_1), create your own xml layout for both TextView and DropDown, and use them. In the TextView layout, define Hint text and Hint color. Last step, create and empty item as the first item in the item array defined in Strings.

<string-array name="professional_qualification_array">
    <item></item>
    <item>B.Pharm</item>
    <item>M.Pharm</item>
    <item>PharmD</item>
</string-array>

Create XML layout for Spinner TextView (spnr_qualification.xml)

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:hint="Qualification"
    android:textColorHint="@color/light_gray"
    android:textColor="@color/blue_black" />

Create XML layout for spinner DropDown.(drpdn_qual.xml)

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
style="?android:attr/spinnerDropDownItemStyle"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:ellipsize="marquee"
android:textColor="#FFFFFF"/>

Define spinner in the main XML layout

<Spinner
android:id="@+id/spnQualification"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:paddingLeft="10dp"
android:paddingBottom="5dp"
android:paddingTop="5dp"
/>

And finally in the code, while setting adapter for the spinner, use your custom XML layout.

ArrayAdapter<CharSequence> qual_adapter = ArrayAdapter.createFromResource(this, R.array.professional_qualification_array,R.layout.spnr_qualification);

qual_adapter.setDropDownViewResource(R.layout.drpdn_qual);

spnQualification.setAdapter(qual_adapter)

There are two ways you can use spinner:

static way

android:spinnerMode="dialog"

and then set:

android:prompt="@string/hint_resource"

dynamic way

spinner.setPrompt("Gender");

Note: It will work like a Hint but not actually it is.

May it help!