How to customize a Spinner in Android

Question

I want to add a custom height to the dropdown of a Spinner, say 30dp, and I want to hide the dividers of the dropdown list of Spinner.

So far I tried to implement following style to the Spinner:

<style name="spinner_style">
        <item name="android:paddingLeft">0dp</item>
        <item name="android:dropDownWidth">533dp</item>
        <item name="android:showDividers">none</item>
        <item name="android:dividerHeight">0dp</item>
        <item name="android:popupBackground">@drawable/new_bg</item>
        <item name="android:dropDownHeight">70dp</item>
        <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
        <item name="android:dropDownSelector">@android:color/white</item>
 </style>

and the code of my spinner is :

<Spinner
            android:id="@+id/pioedittxt5"
            android:layout_width="543dp"
            android:layout_height="63dp"
            android:layout_toRightOf="@+id/piotxt5"
            android:background="@drawable/spinner"
            style="@style/spinner_style"
            android:dropDownVerticalOffset="-53dp"
            android:spinnerMode="dropdown"
            android:drawSelectorOnTop="true"
            android:entries="@array/travelreasons"
            android:prompt="@string/prompt" />

But nothing seems to be working.

http://stephenpengilley.blogspot.com/2013/01/android-custom-spinner-tutorial.html http://custom-android-dn.blogspot.com/2012/12/how-to-use-and-custom-spinner-control.html — Houcine, May 22 '13 at 15:00
None of the style is applied ? popupBackGround or anything else ? Strange. — Chintan Soni, May 22 '13 at 15:09
@Houcine : i already tried those examples .. i want to adjust height of the dropdown list — Shruti, May 23 '13 at 05:42
@Shruti see this http://www.youtube.com/watch?v=JX9RmLAoOUY&feature=g-upl — Chirag Patel, May 23 '13 at 08:04
@ComeIn , it's not an Android style, but a custom one he created. That's why he has just "style=" — CyberClaw, Nov 21 '16 at 10:28
There are main steps to fully customize the default Spinner. Step 01 - Create a layout Step 02 - Create an Adapter Step 03 - Create drawables Finally marge all the elements. Here is the complete guide : https://dailycoding.in/android-custom-spinner/ — Subhojit Halder, Jun 18 '21 at 10:07

score 212 · Accepted Answer · edited Aug 22 '17 at 08:36

212

Create a custom adapter with a custom layout for your spinner.

Spinner spinner = (Spinner) findViewById(R.id.pioedittxt5);
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
        R.array.travelreasons, R.layout.simple_spinner_item);
adapter.setDropDownViewResource(R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);

R.layout.simple_spinner_item

<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/text1"
    style="@style/spinnerItemStyle"
    android:maxLines="1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ellipsize="marquee" />

R.layout.simple_spinner_dropdown_item

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

In styles add your custom dimensions and height as per your requirement.

 <style name="spinnerItemStyle" parent="android:Widget.TextView.SpinnerItem">

  </style>

  <style name="spinnerDropDownItemStyle" parent="android:TextAppearance.Widget.TextView.SpinnerItem">

  </style>

edited Aug 22 '17 at 08:36

Sira Lam

5,179
3
34
68

answered Jun 20 '13 at 12:10

Tarun

13,727
8
42
57

I tried using the styles options that you suggested. But it is not working for me! I added: ` 40sp 15sp` in between the `spinnerItemStyle` tag but of no use. Could you please help me out as the default spinner size is too small! – 7bluephoenix Jun 28 '13 at 11:33
4

Try changing `` to `` – Tarun Jun 28 '13 at 11:45
1

thanx for replying.. tried but to no effect... working on it on/off for last 3-4 days.. Just getting irritated now :( – 7bluephoenix Jun 28 '13 at 12:01
Actually you are using an array to populate the spinner.. What i have done is populated the spinner with an array of objects by implementing the `toString()` method in the class of which the custom array of objects belong. So i can't use the create from resource.. what i have to do is create a custom adapter but i am trying to avoid it. I want to do it so that it is applicable in the entire application without the need for custom adapter for all spinners as i have too many spinners in the application. – 7bluephoenix Jun 28 '13 at 12:13
5

@Tarun, Don't you need `android:id="@+android:id/text1"` in the simple_spinner_dropdown_item.xml file? – batbrat Feb 22 '14 at 11:34
4

In R.layout.simple_spinner_dropdown_item, change android:layout_height value to "?attr/dropdownListPreferredItemHeight" or you will get an error: "Error: Attribute is not public" – Loenix Jun 14 '16 at 06:05
13

_For future visitors to this answer_: **do not wrap TextView and CheckedTextview inside a layout**. Post it directly in your layout_file.xml file. I was stuck here for some hours until I found what was the mistake. – Francisco Romero Aug 04 '16 at 08:57

score 113 · Answer 2 · edited Sep 27 '18 at 19:06

You can create fully custom spinner design like as

Step1: In drawable folder make background.xml for a border of the spinner.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<corners android:radius="5dp" />
<stroke
android:width="1dp"
   android:color="@android:color/darker_gray" />
</shape>

Step2: for layout design of spinner use this drop-down icon or any image drop.png

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="3dp"
    android:layout_weight=".28"
    android:background="@drawable/spinner_border"
    android:orientation="horizontal">

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:layout_marginLeft="5dp"
        android:spinnerMode="dropdown" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:src="@mipmap/drop" />

</RelativeLayout>

Finally looks like below image and it is everywhere clickable in round area and no need to write click Lister for imageView.

Step3: For drop-down design, remove the line from Dropdown ListView and change the background color, Create custom adapter like as

Spinner spinner = (Spinner) findViewById(R.id.spinner1);
String[] years = {"1996","1997","1998","1998"};
ArrayAdapter<CharSequence> langAdapter = new ArrayAdapter<CharSequence>(getActivity(), R.layout.spinner_text, years );
langAdapter.setDropDownViewResource(R.layout.simple_spinner_dropdown);
mSpinner5.setAdapter(langAdapter);

In layout folder create R.layout.spinner_text.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layoutDirection="ltr"
android:id="@android:id/text1"
style="@style/spinnerItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:paddingLeft="2dp"
/>

In layout folder create simple_spinner_dropdown.xml

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
style="@style/spinnerDropDownItemStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:singleLine="true" />

In styles, you can add custom dimensions and height as per your requirement.

<style name="spinnerItemStyle" parent="android:Widget.TextView.SpinnerItem">
</style>

<style name="spinnerDropDownItemStyle" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
</style>

Finally looks like as

According to the requirement, you can change background color and text of drop-down color by changing the background color or text color of simple_spinner_dropdown.xml

in the first code snipped do you mean android:height="1dp" in line 6? — Willi Mentzel, Jun 29 '16 at 13:25
No problem, I just didn't want to edit it myself because I was not sure, if you wanted to specify to height with "1dp" or if it was just a duplicate. good answer though. :) — Willi Mentzel, Jun 30 '16 at 10:45
@BineshKumar Hey may I know where you declared CheckedTextView? Because when I pasted in the code, it told me the element must be declared first — QWERTY, May 18 '17 at 03:43
Man, you could have used names in your layouts and drawables, I have spend half an hour and still no clue what to do. Minus for bad answer. — Anton Kizema, May 02 '18 at 12:41
its easier to put it as github, i could not make it work , sorry am android beginner, i wish some one will — shareef, Mar 16 '19 at 14:53
You have to define your own ArrayAdapter, so you can inflate the RelativeLayout. More details here https://codinginflow.com/tutorials/android/custom-spinner — diogenesgg, Jul 08 '19 at 21:18

score 24 · Answer 3 · answered Oct 13 '14 at 02:43

The most elegant and flexible solution I have found so far is here: http://android-er.blogspot.sg/2010/12/custom-arrayadapter-for-spinner-with.html

Basically, follow these steps:

Create custom layout xml file for your dropdown item, let's say I will call it spinner_item.xml

Create custom view class, for your dropdown Adapter. In this custom class, you need to overwrite and set your custom dropdown item layout in getView() and getDropdownView() method. My code is as below:

public class CustomArrayAdapter extends ArrayAdapter<String>{

private List<String> objects;
private Context context;

public CustomArrayAdapter(Context context, int resourceId,
     List<String> objects) {
     super(context, resourceId, objects);
     this.objects = objects;
     this.context = context;
}

@Override
public View getDropDownView(int position, View convertView,
    ViewGroup parent) {
    return getCustomView(position, convertView, parent);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
  return getCustomView(position, convertView, parent);
}

public View getCustomView(int position, View convertView, ViewGroup parent) {

LayoutInflater inflater=(LayoutInflater) context.getSystemService(  Context.LAYOUT_INFLATER_SERVICE );
View row=inflater.inflate(R.layout.spinner_item, parent, false);
TextView label=(TextView)row.findViewById(R.id.spItem);
 label.setText(objects.get(position));

if (position == 0) {//Special style for dropdown header
      label.setTextColor(context.getResources().getColor(R.color.text_hint_color));
}

return row;
}

}

In your activity or fragment, make use of the custom adapter for your spinner view. Something like this:

Spinner sp = (Spinner)findViewById(R.id.spMySpinner);
ArrayAdapter<String> myAdapter = new CustomArrayAdapter(this, R.layout.spinner_item, options);
sp.setAdapter(myAdapter);

where options is the list of dropdown item string.

The trick for me was overriding getDropDownView, I was overriding getView, but didn't realized I had to override that method. — estebanuri, Aug 08 '17 at 22:14
How do I change the background color of the spinner? Because if I change the background color of ```R.layout.spinner_item``` it does change the background color, but the dropdown arrow and its surroundings stay in the "old" color. — Blaupunkt, May 20 '22 at 06:45

score 10 · Answer 4 · edited Jun 20 '20 at 09:12

Try this

i was facing lot of issues when i was trying other solution...... After lot of R&D now i got solution

create custom_spinner.xml in layout folder and paste this code

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorGray">
<TextView
android:id="@+id/tv_spinnervalue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/colorWhite"
android:gravity="center"
android:layout_alignParentLeft="true"
android:textSize="@dimen/_18dp"
android:layout_marginTop="@dimen/_3dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="@drawable/men_icon"/>
</RelativeLayout>

in your activity

Spinner spinner =(Spinner)view.findViewById(R.id.sp_colorpalates);
String[] years = {"1996","1997","1998","1998"};
spinner.setAdapter(new SpinnerAdapter(this, R.layout.custom_spinner, years));

create a new class of adapter

public class SpinnerAdapter extends ArrayAdapter<String> {
private String[] objects;

public SpinnerAdapter(Context context, int textViewResourceId, String[] objects) {
    super(context, textViewResourceId, objects);
    this.objects=objects;
}

@Override
public View getDropDownView(int position, View convertView, @NonNull ViewGroup parent) {
    return getCustomView(position, convertView, parent);
}

@NonNull
@Override
public View getView(int position, View convertView, @NonNull ViewGroup parent) {
    return getCustomView(position, convertView, parent);
}

private View getCustomView(final int position, View convertView, ViewGroup parent) {
    View row = LayoutInflater.from(parent.getContext()).inflate(R.layout.custom_spinner, parent, false);
    final TextView label=(TextView)row.findViewById(R.id.tv_spinnervalue);
    label.setText(objects[position]);
    return row;
}
}

This gave me the men_icon image on all items after clicking on the spinner, which wasn't what I was looking for. If you don't want the men_icon image (or other customizations) to appear on all rows after clicking on the spinner, then remove the "getDropDownView" override. — Brettins, Feb 08 '18 at 21:28

score 2 · Answer 5 · answered May 17 '16 at 15:20

This worked for me :

ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),R.layout.simple_spinner_item,areas);
            Spinner areasSpinner = (Spinner) view.findViewById(R.id.area_spinner);
            areasSpinner.setAdapter(adapter);

and in my layout folder I created simple_spinner_item:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
android:layout_width="match_parent"
// add custom fields here 
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:gravity="center_vertical"
android:paddingStart="?android:attr/listPreferredItemPaddingStart"
android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:paddingLeft="?android:attr/listPreferredItemPaddingLeft"
android:paddingRight="?android:attr/listPreferredItemPaddingRight" />

score 0 · Answer 6 · answered Apr 05 '20 at 05:41

0

I have build a small demo project on this you could have a look to it Link to project

answered Apr 05 '20 at 05:41

Vivek Barai

1,338
13
26

How to customize a Spinner in Android

6 Answers6

Try this

Linked

Related