How to change layout of spinner in Android

Question

When O click on this spinner it gives a big dropdown:

I want a very small view as in the second image. Just like dropdowns in ASP.NET. Like this with width little more reduced.

I used the following code. Any help to change the view of second image will be appreciated.

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

Answer 1

This is a good article : Customizing the Action Bar

And also you can try this :

Design you own customized drawable for spinner background and apply to it. For spinnerbackground.xml images you can refer the images from the SDK. recreate the images as per your design requirements

"Android-sdk\platforms\android-9\data\res\drawable-hdpi\*.png"

spinnerbackground.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_window_focused="false" android:state_enabled="true"
        android:drawable="@drawable/wlbtn_dropdown_normal" />
    <item
        android:state_window_focused="false" android:state_enabled="false"
        android:drawable="@drawable/wlbtn_dropdown_disabled" />
    <item
        android:state_pressed="true"
        android:drawable="@drawable/wlbtn_dropdown_pressed" />
    <item
        android:state_focused="true" android:state_enabled="true"
        android:drawable="@drawable/wlbtn_dropdown_selected" />
    <item
        android:state_enabled="true"
        android:drawable="@drawable/wlbtn_dropdown_normal" />
    <item
        android:state_focused="true"
        android:drawable="@drawable/wlbtn_dropdown_disabled_focused" />
    <item
        android:drawable="@drawable/wlbtn_dropdown_disabled" />
</selector>

then for spinner widget apply your custom drawable:

<Spinner android:background="@drawable/spinnerbackground"
         android:id="@+id/spinnerIDr"
         android:layout_height="wrap_content" 
         android:layout_width="fill_parent">
    </Spinner>

Edited :

<Spinner android:background="@drawable/spinnerbackground"
         android:id="@+id/spinnerIDr"
         android:popupBackground="@drawable/popup_background"
         android:layout_height="wrap_content" 
         android:layout_width="fill_parent">
    </Spinner>

where popup_background is :

and

Design your custom layout for spinner texts as (name : custom_spiner.xml)

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="4dp"
    android:textSize="14sp"
    android:typeface="serif"
    android:singleLine="true"
    android:layout_marginLeft="2dip"
    android:layout_marginRight="5dip"
    android:ellipsize="marquee"
    android:textColor="#000000">
</TextView>

and use it as

adapter.setDropDownViewResource(R.layout.custom_spiner);

in your code.

Edited 2:

if you want to do this using java code read about PopupWindow

And may be useful : custom-spinner

Answer 2

Follow these steps. I have already implemented this.

(1) Do not use spinner. Instead use a button with background set to "@android:drawable/btn_dropdown". This button will look exactly same as native spinner. If you want it to look any different use your own resource.

(2) You need to override dialog class and invoke it on button click. In the constructor of the extended Dialog class, you can use your own layout resource.

this.setContentView(R.layout.dropdownlist);

You can also change window look and feel using following code

WindowManager.LayoutParams lp = getWindow().getAttributes();
lp.width = dlgWidth;
lp.height = dlgHeight;
lp.dimAmount = 0;
getWindow().setAttributes(lp);
getWindow().setBackgroundDrawableResource(mBackgroundResId);

(3) You can have a list view in your custom layout and on "OnItemClickListener" of the list, dismiss the dialog and do what you need to do further.

I hope this helps.