Question

I’m trying to put in a Spinner on each row of a ListView within a ListFragment.

I want it to look like a vertical overflow image like in the store but I’m not able to figure out how to show the vertical overflow image that is clickable to show the options.

It always looks like below instead. I would like to remove “Options” and have the overflow image instead.

Any help is appreciated.

Answer 1

Found relevant ideas from other posts and combined them, thank you Stack Overflow.

Android: How to set spinner selector to own image/icon?

Declaring a custom android UI element using XML

How to get width and height of the image?

The idea is that you create a 0dp width Spinner with an ImageView over it. When you click the image, it shows the drop down. I haven’t tested it’s behavior when the Spinner is at the edge of the screen yet and may very well cause trouble. I also need to tweak the position of the Spinner, but this works for now.

My plan is to catch the selection from the Spinner and then open a dialog / intent based on what was clicked. Here is what it looks like. (the ImageView is faint but it’s mostly a placehodler for me right now)

Before click

After click

Here is the general code I used since this seems desirable to others.

values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="OverflowSpinner">
        <attr name="imageResource" format="string" />
        <attr name="spinnerTextResource" format="string" />
    </declare-styleable>
</resources>

values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="spinner_array">
        <item>Skip</item>
        <item>View log</item>
    </string-array>
</resources>

layouts/row.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:awesome="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!-- stuff -->
    <com.blah.package.OverflowSpinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        awesome:imageResource="@drawable/ic_menu_moreoverflow_normal_holo_light"
        awesome:spinnerTextResource="@array/spinner_array"
        /> 
</RelativeLayout>

OverflowSpinner.java

public class OverflowSpinner extends RelativeLayout {
    int mImage;
    int mStrings;

    public OverflowSpinner(Context context) {
        super(context);
    }

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

    public OverflowSpinner(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs);
        setupDisplay(context);
    }

    private void init(AttributeSet attrs) { 
        TypedArray attribs = getContext().obtainStyledAttributes(attrs, R.styleable.OverflowSpinner);
        // get attributes
        mImage = attribs.getResourceId(R.styleable.OverflowSpinner_imageResource, -1);
        mStrings = attribs.getResourceId(R.styleable.OverflowSpinner_spinnerTextResource, -1);

        attribs.recycle();
    }

    private void setupDisplay(Context context) {
        BitmapDrawable bitmap = (BitmapDrawable)this.getResources().getDrawable(mImage);
        int height = bitmap.getBitmap().getHeight();

    // set size of Spinner to 0 x height so it's "hidden"
    // the height is used to help position the Spinner in a nicer spot 
        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(context, mStrings, android.R.layout.simple_spinner_item);

        // setup spinner
        final Spinner spinner = new Spinner(context);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(adapter);
        spinner.setLayoutParams(lp);
        this.addView(spinner);

        // set size of image to be normal
        lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        lp.addRule(ALIGN_PARENT_BOTTOM);

        ImageButton option = new ImageButton(context);
        option.setBackgroundResource(android.R.color.transparent);
        option.setImageResource(mImage);
        option.setLayoutParams(lp);
        // when clicking the image button, trigger the spinner to show
        option.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                spinner.performClick();
            }
        });
        this.addView(option);
    }
}