Android development - make a spinner look like a spinner

Question

I'm creating a spinner programmatically in my activity class. The "Spinner" looks like a dropdown rather than a spinner. I guess I want it to look more like a picker (ie date picker / time picker / number picker) where you can spin through all the text options.

I would use a picker type widget if there was a text picker available but I can't seem to find such a widget - only a number picker. Here is the code I'm using in my activity.

        ArrayAdapter <String>lv1List = new ArrayAdapter<String>(this.getApplicationContext(),android.R.layout.simple_spinner_item,  new String[]{"item 1","item 2","item 3"});
        Spinner sp = new Spinner(getApplicationContext());
        sp.setAdapter(lv1List);
        sp.setOnItemSelectedListener(this);

You can combine a `TextView` and two `ImageButton`'s with a list of items to make a traditional spinner. — S.D., Sep 04 '12 at 19:11
I recommend creating a narrow ListView. If you add a gradient fade-to-black at the top and bottom it will look much like the basic Android [Clock or Timer UI](https://encrypted-tbn0.google.com/images?q=tbn:ANd9GcRlB3VzygBVwe0xmxp9M8yFPNbqH1GgjqKvW5BoWllQd9mqzrzcAQ). (This image has three "wheels" which support fling gestures and the rounded effect is an optical illusion.) If you don't want to program it from scratch dig around, I'm sure there are packages you can buy that already have this. — Sam, Sep 04 '12 at 19:21
Well, it's not too tricky to populate a `NumberPicker` with text rather than numbers; [have a look here](http://stackoverflow.com/questions/8227073/using-numberpicker-widget-with-strings). If you search around, I'm sure you'll be able to find custom components offering similar functionality too. — MH., Sep 04 '12 at 19:24

score 1 · Accepted Answer · answered Sep 04 '12 at 19:24

1

Take a look at Android Wheel. You can have text or pretty much anything on it. Works perfectly.

answered Sep 04 '12 at 19:24

ohra

496
3
12

Thanks - I think that is exactly what Im looking for. Ill check out the code and reply back. – George Sep 05 '12 at 05:28

score 0 · Answer 2 · answered Sep 04 '12 at 20:26

Quick ( and inefficient) example if you want to create your own spinner. (Works with List View Adapters):

Layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
        android:orientation="horizontal">

    <FrameLayout android:id="@+id/container"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:layout_gravity="center_vertical"
              />

    <LinearLayout android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_gravity="center_vertical"
                  android:orientation="vertical">
        <Button android:id="@+id/btn_up"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="up"/>
        <Button android:id="@+id/btn_down"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="down"/>
    </LinearLayout>

</LinearLayout>

CustomSpinner Class:

public class CustomSpinner extends FrameLayout{
// ------------------------------ FIELDS ------------------------------

    private FrameLayout mContainer;
    private SpinnerAdapter mAdapter;
    private int index = 0;

// --------------------------- CONSTRUCTORS ---------------------------

    public CustomSpinner(Context context) {
        super(context);
        init(context);
    }

    public CustomSpinner(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context){
        this.addView(LayoutInflater.from(context).inflate(R.layout.custom_spinner,this,false));

        findViewById(R.id.btn_up).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                index--;
                refresh();
            }
        });

        findViewById(R.id.btn_down).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                index++;
                refresh();
            }
        });

        mContainer = (FrameLayout) findViewById(R.id.container);
    }

// -------------------------- OTHER METHODS --------------------------

    public void setAdapter(SpinnerAdapter adapter) {
        this.mAdapter = adapter;
        refresh();
    }

    private void refresh() {
        //----needs recycling for better performance---
        //---now, we'll just clear up--
         mContainer.removeAllViews();

        //---do we need to refresh ? -----
        if(mAdapter == null || mAdapter.getCount() == 0){return;}

        //--clamp index--
        index = Math.max(0,index);
        index = Math.min(mAdapter.getCount() - 1, index);

        //--get view and show it-----
        View currentView = mAdapter.getView(index,null,mContainer);
         mContainer.addView(currentView);
    }
}

Use Case:

Layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical"
        >

 <com.example.CustomSpinner android:id="@+id/custom_spinner"
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
                               />
</LinearLayout>

Activity:

public class MyActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,
                new String[]{"Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"});

        ((CustomSpinner)findViewById(R.id.custom_spinner)).setAdapter(adapter);

    }
}

thanks for the reply. This is close to what I want and I considered doing it before but I don't want to require button clicks. There will be many options in the list and I would rather a smooth scroll without having to click. — George, Sep 05 '12 at 05:27

Android development - make a spinner look like a spinner

2 Answers2