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    lt style name  spinner style  gt           lt item name  android paddingLeft  gt 0dp lt  item gt           lt item name  android dropDownWidth  gt 533dp lt  item gt           lt item name  android showDividers  gt none lt  item gt           lt item name  android dividerHeight  gt 0dp lt  item gt           lt item name  android popupBackground  gt  drawable new bg lt  item gt           lt item name  android dropDownHeight  gt 70dp lt  item gt           lt item name  android scrollbarAlwaysDrawVerticalTrack  gt true lt  item gt           lt item name  android dropDownSelector  gt  android color white lt  item gt    lt  style gt    and the code of my spinner is     lt 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    gt    But nothing seems to be working

User · Accepted Answer

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>

User · Answer

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

User · Answer

Try this i was facing lot of issues when i was trying other solution       After lot of R amp D now i got solution  create custom spinner xml in layout folder and paste this code   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt RelativeLayout xmlns android  quot http   schemas android com apk res android quot  android orientation  quot vertical quot  android layout width  quot match parent quot  android layout height  quot match parent quot  android background  quot  color colorGray quot  gt   lt TextView android id  quot   id tv spinnervalue quot  android layout width  quot match parent quot  android layout height  quot wrap content quot  android textColor  quot  color colorWhite quot  android gravity  quot center quot  android layout alignParentLeft  quot true quot  android textSize  quot  dimen  18dp quot  android layout marginTop  quot  dimen  3dp quot   gt   lt ImageView android layout width  quot wrap content quot  android layout height  quot wrap content quot  android layout alignParentRight  quot true quot  android background  quot  drawable men icon quot   gt   lt  RelativeLayout gt    in your activity Spinner spinner   Spinner view findViewById R id sp colorpalates   String   years     quot 1996 quot   quot 1997 quot   quot 1998 quot   quot 1998 quot    spinner setAdapter new SpinnerAdapter this  R layout custom spinner  years      create a new class of adapter public class SpinnerAdapter extends ArrayAdapter lt String gt    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

User · Answer

This worked for me     ArrayAdapter lt String gt  adapter   new ArrayAdapter lt String gt  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     lt 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    gt

User · Answer

You can create fully custom spinner design like as  Step1  In drawable folder make background xml for a border of the spinner    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt   lt solid android color   android color transparent    gt   lt corners android radius  5dp    gt   lt stroke android width  1dp     android color   android color darker gray    gt   lt  shape gt    Step2  for layout design of spinner use this drop-down icon or any image drop png     lt 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  gt        lt 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    gt        lt 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    gt    lt  RelativeLayout gt    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 lt CharSequence gt  langAdapter   new ArrayAdapter lt CharSequence gt  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   lt  xml version  1 0  encoding  utf-8   gt   lt 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    gt    In layout folder create simple spinner dropdown xml   lt  xml version  1 0  encoding  utf-8   gt   lt 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    gt    In styles  you can add custom dimensions and height as per your requirement    lt style name  spinnerItemStyle  parent  android Widget TextView SpinnerItem  gt   lt  style gt    lt style name  spinnerDropDownItemStyle  parent  android TextAppearance Widget TextView SpinnerItem  gt   lt  style gt    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

User · Answer

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 lt String gt    private List lt String gt  objects  private Context context   public CustomArrayAdapter Context context  int resourceId       List lt String gt  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 lt String gt  myAdapter   new CustomArrayAdapter this  R layout spinner item  options   sp setAdapter myAdapter      where options is the list of dropdown item string

[android] How to customize a Spinner in Android

Examples related to android

Examples related to android-layout

Examples related to android-spinner