Spinner's background image appears stretched

Question

I have created a dropdown spinner with a background custom image. I have placed the spinner in a linear layout and I have aligned items using weight.

Here is my code -

XML -

<LinearLayout
    android:id="@+id/csbar"
    android:windowSoftInputMode="adjustPan"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:background="#101010"
    android:layout_height="wrap_content">

    <ImageButton
        android:id="@+id/run"
        android:layout_width="0dp"
        android:layout_height="@dimen/height"
        android:layout_weight="1"
        android:background="@null"
        android:contentDescription="@string/nul"
        android:src="@drawable/ic_action_play" />

    <ImageButton
        android:id="@+id/save"
        android:layout_width="0dp"
        android:layout_height="@dimen/height"
        android:layout_weight="1"
        android:background="@null"
        android:contentDescription="@string/nul"
        android:src="@drawable/ic_action_save" />

    <Spinner
        android:id="@+id/more"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="@drawable/ic_action_sort_by_size"
        android:layout_height="@dimen/height"/>

</LinearLayout>

Java -

int firstC = 0;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

    /////I have removed rest of the code to make it more legible/////

    Spinner more = (Spinner) rootView.findViewById(R.id.more);

    ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(getActivity(),
            R.array.more, android.R.layout.simple_spinner_item);
    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    more.setAdapter(adapter);

    more.setOnItemSelectedListener(this);

}

@Override
public void onItemSelected(AdapterView<?> parent, View view, int position,
        long id) {
    ((TextView)view).setText(null);
}

Here is the output -

As you can see the sort by size icon (icon on right) appears stretched.

How I want it to look like -

What is wrong with my code? Please help.

Answer 1

The background image takes all the given space - 1/3 of the the LinearLayout width. If you don’t want it to stretch, you could create a drawable layout, e.g. drawable/my_sort_icon:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_action_sort_by_size"
    android:tileMode="disabled"
    android:gravity="center" />

and use it as a background image in your Spinner:

<Spinner
    android:id="@+id/more"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:background="@drawable/my_sort_icon"
    android:layout_height="@dimen/height"/>