How to make custom spinner with image?

Question

I'm trying to make a custom design for spinner but no luck, i only made it through edittext.

I want something like this.

in edittext i use drawableleft, can someone help me how can i customize my spinner?

in xml:

        <EditText
        android:id="@+id/etBusinessKeywor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_spinner"
        android:cursorVisible="false"
        android:drawableRight="@drawable/ic_keyboard_arrow_down_white_24dp"
        android:hint="SERVICE"
        android:padding="@dimen/_12sdp"
        android:textColorHint="@color/pbr_lightgray"
        android:textSize="@dimen/fontsize_title"
        android:textStyle="bold" />

bg_spinner:

<item>
    <shape>
        <corners android:radius="3dp" />
        <solid android:color="@android:color/white" />
    </shape>
</item>
<item>
    <shape>
        <corners android:radius="3dp" />
        <solid android:color="@color/colorPrimary" />

    </shape>
</item>
<item android:right="50dp">
    <shape>
        <solid android:color="@android:color/white" />
        <corners
            android:bottomLeftRadius="3dp"
            android:topLeftRadius="3dp" />
    </shape>
</item>
<item>
    <shape>

        <solid android:color="@android:color/transparent" />
    </shape>
</item>

rafsanahmad007 · Answer 1 · 2017-02-13T08:29:39.013

try this: wrap spinner with your imageview in RelativeLayout

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="@drawable/spinner_border"
    android:orientation="horizontal">

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerVertical="true"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:spinnerMode="dropdown" />

    <FrameLayout
        android:layout_width="50dp"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@color/colorPrimary"
        android:padding="3dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/dropdown_bar" />
    </FrameLayout>

</RelativeLayout>

in res/drawable/spinner_border use:

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <corners android:radius="5dp" />
    <stroke
        android:width="1dp"
        android:color="@color/colorPrimary" />
</shape>

my problem with this is that my image is separate from the blue background itself. — JAC, Feb 13 '17 at 08:11

score 0 · Answer 2 · edited May 23 '17 at 12:34

0

You can find tons of answer for customizing the spinner in How to customize a Spinner in Android .Also you shouldn't use edittext as spinner.Spinners are made for choosing an option from many chooses.

edited May 23 '17 at 12:34

Community

1
1

answered Feb 13 '17 at 08:11

Alperen Kantarcı

1,038
9
27

score 0 · Accepted Answer · answered Feb 13 '17 at 08:16

Try This,

    <Spinner
        android:id="@+id/spn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_spinner"
        android:popupBackground="#fff"
        android:spinnerMode="dropdown"
        />

selector_spinner.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

        <item>
            <shape android:shape="rectangle" >
                <solid android:color="#000000" />

                <corners
                  android:radius="2dp" />
            </shape>
        </item>
        <item
            android:bottom="1dip"
            android:left="1dip"
            android:right="1dip"
            android:top="1dip">
            <shape android:shape="rectangle" >
                <solid android:color="#FFFFFF" >
                </solid>

                <corners
                    android:radius="2dp"  />

                <padding
                    android:right="5dp"
                    android:top="2dp" />
            </shape>
        </item>
        <item>
            <bitmap
                android:gravity="right|center_vertical"
                android:src="@drawable/ic_down_arrow" />
        </item>

    </layer-list>

How to make custom spinner with image?

3 Answers3