Android Make Spinner look like ImageView

Question

I've seen this post with a solution to make a Spinner look like an EditText.

What I want instead is the spinner to look like an ImageView (the selected Image). This way the Spinner is completely stripped of unnecessary padding and the triangle at the bottom-right. (So on the screen it's an Image, but if you click on it, it opens up like a Spinner.)

PS: I already have a custom Spinner with Images as items, but I still have some padding issues and the spinner-triangle that I would like to remove.

I thought I'd use the code in the post above, and then simply change edit_text to image_view (or something similar), but it turns out R.drawable (reference here) doesn't include ImageViews.

Does anyone know which R.drawable I should use for ImageView, or if I should use an entire different approach to reduce the Spinner to the selected Image only, what would that be?

Thanks in advance for the responses.

Why not generate a list view inside a Fragment popup on click of an imageview? — Skynet, Apr 18 '14 at 08:59
@Nun'eChai Hmm.. That's indeed a good idea. Creating a pop-up is pretty easy. Will try that, thanks! — Kevin Cruijssen, Apr 18 '14 at 09:19
Welcome, dont hesitate to ask if you require more assistance with the popup. — Skynet, Apr 18 '14 at 09:19

score 4 · Accepted Answer · answered Apr 18 '14 at 11:11

After Nun'e Chai's comment I did made a PopupWindow that triggers on the click of an ImageButton. So thanks for that, Nun'e Chai. For those interested, below is the code:

In acitivity_main.xml:

<ImageButton
    android:id="@+id/ibtnSpinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="15dp"
    android:contentDescription="@string/checkbox_content_description"
    android:src="@drawable/checkbox_unchecked"
    android:background="@drawable/transparent_background" />

transparent_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@android:color/transparent" />
    <item android:state_pressed="true" android:drawable="@android:color/transparent" />
    <item android:drawable="@android:color/transparent" />
</selector>

spinner_popup.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/spinnerLayout"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="vertical" >

    <ImageButton
       android:id="@+id/simgUnchecked"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/checkbox_unchecked"
       android:contentDescription="@string/checkbox_content_description"
       android:background="@drawable/transparent_background" />

    <ImageButton
       android:id="@+id/simgChecked"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/checkbox_checked"
       android:contentDescription="@string/checkbox_content_description"
       android:background="@drawable/transparent_background" />

    <ImageButton
       android:id="@+id/simgError"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/checkbox_error"
       android:contentDescription="@string/checkbox_content_description"
       android:background="@drawable/transparent_background" />

    <ImageButton
       android:id="@+id/simgPartly"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/checkbox_partly"
       android:contentDescription="@string/checkbox_content_description"
       android:background="@drawable/transparent_background" />

</LinearLayout>

In MainActivity.java:

private Point p;
private ImageButton spinnerButton;
private PopupWindow spinner;

protected void onCreate(Bundle savedInstanceState) {
    ...

    addListenerToSpinnerButton();
}

private void addListenerToSpinnerButton(){
    spinnerButton = (ImageButton) findViewById(R.id.ibtnSpinner);
    spinnerButton.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v){
            if(p != null)
                showSpinner(MainActivity.this, p);
        }
    });
}

// Get the x and y position after the button is drawn on screen
// (It's important to note that we can't get the position in the onCreate(),
// because at that stage most probably the view isn't drawn yet, so it will return (0, 0))
@Override
public void onWindowFocusChanged(boolean hasFocus){
    int[] location = new int[2];
    ImageButton btn = (ImageButton) findViewById(R.id.ibtnPopup);

    // Get the x, y location and store it in the location[] array
    btn.getLocationOnScreen(location);

    // Initialize the Point with x, and y positions
    p = new Point();
    p.x = location[0];
    p.y = location[1];
}

// The method that displays the spinner
private void showSpinner(final ActionBarActivity context, Point p){
    // Inflate the spinner.xml
    LinearLayout viewGroup = (LinearLayout) context.findViewById(R.id.spinnerLayout);
    LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View layout = layoutInflater.inflate(R.layout.spinner, viewGroup);

    // Creating the PopupWindow
    spinner = new PopupWindow(context);
    spinner.setContentView(layout);
    spinner.setWindowLayoutMode(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    spinner.setFocusable(true);

    // Clear the default translucent background
    // TODO: Fix deprecated to BitmapDrawable(Resource, Bitmap)
    spinner.setBackgroundDrawable(new BitmapDrawable());

    // Displaying the spinner at the specified location, + offsets
    spinner.showAtLocation(layout, Gravity.NO_GRAVITY, p.x, p.y);

    // Getting a reference to the ImageButtons, and close the spinner when clicked
    ImageButton optionUnchecked = (ImageButton) layout.findViewById(R.id.simgUnchecked);
    optionUnchecked.setOnClickListener(spinnerOnClickListener);
    optionUnchecked.setTag(R.drawable.checkbox_unchecked);

    ImageButton optionChecked = (ImageButton) layout.findViewById(R.id.simgChecked);
    optionChecked.setOnClickListener(spinnerOnClickListener);
    optionChecked.setTag(R.drawable.checkbox_checked);

    ImageButton optionError = (ImageButton) layout.findViewById(R.id.simgError);
    optionError.setOnClickListener(spinnerOnClickListener);
    optionError.setTag(R.drawable.checkbox_error);

    ImageButton optionPartly = (ImageButton) layout.findViewById(R.id.simgPartly);
    optionPartly.setOnClickListener(spinnerOnClickListener);
    optionPartly.setTag(R.drawable.checkbox_partly);
}
private OnClickListener spinnerOnClickListener = new OnClickListener(){
    @Override
    public void onClick(View v){
        // Get the id of the ImageButton that is clicked
        ImageButton btn = (ImageButton) v;
        int id = (Integer) btn.getTag(); // We are sure it's an Integer, so the cast from Object to int is safe

        // Change the ImageButton that triggered the spinner to the same Image
        spinnerButton.setImageResource(id);

        // Close the spinner
        if(spinner != null)
            spinner.dismiss();
    }
};

...

Android Make Spinner look like ImageView

1 Answers1

Linked