How to create custom spinner like border around the spinner with down triangle on the right side?

Question

I want to develop custom spinner like line around spinner with triangle at right bottom corner.
like following image

enter image description here

For above fig I wrote my custom spinner like a

spinner.xml

 <Spinner android:background="@drawable/spinner_background"/>

spinner_background.xml

<?xml version="1.0" encoding="UTF-8"?>

<item android:state_pressed="true"
      android:drawable="@drawable/spinner_ab_pressed_new_theme_bs">
    <shape>

        <solid 
            android:color="@color/White" />

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

        <padding 
            android:bottom="10dp" 
            android:left="10dp" 
            android:right="10dp" 
            android:top="10dp" />

         <stroke 
            android:width="2dp" 
            android:color="@color/skyblue" />
    </shape>
 </item>
 <!-- spinner_ab_default_new_theme_bs -> this image for corner triangle -->
<item

    android:drawable="@drawable/spinner_ab_default_new_theme_bs" >
    <shape>
        <solid
            android:color="@color/White">
        </solid>

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

        <padding
            android:bottom="10dp" 
            android:left="10dp" 
            android:right="10dp" 
            android:top="10dp" />
         <stroke 
            android:width="2dp" 
            android:color="@color/gray"/>
    </shape>
</item>

And I got output like following image
enter image description here

I tried lot but not achieve my goal please anybody have solution to develop spinner.
like above first one image.

Samadhan Medge · Accepted Answer · 2015-10-07T09:10:08.957

143

Spinner

<Spinner
    android:id="@+id/To_Units"
    style="@style/spinner_style" />

style.xml

    <style name="spinner_style">
          <item name="android:layout_width">match_parent</item>
          <item name="android:layout_height">wrap_content</item>
          <item name="android:background">@drawable/gradient_spinner</item>
          <item name="android:layout_margin">10dp</item>
          <item name="android:paddingLeft">8dp</item>
          <item name="android:paddingRight">20dp</item>
          <item name="android:paddingTop">5dp</item>
          <item name="android:paddingBottom">5dp</item>
          <item name="android:popupBackground">#DFFFFFFF</item>
     </style>

gradient_spinner.xml (in drawable folder)

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

    <item><layer-list>
            <item><shape>
                    <gradient android:angle="90" android:endColor="#B3BBCC" android:startColor="#E8EBEF" android:type="linear" />

                    <stroke android:width="1dp" android:color="#000000" />

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

                    <padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
                </shape></item>
            <item ><bitmap android:gravity="bottom|right" android:src="@drawable/spinner_arrow" />
            </item>
        </layer-list></item>

</selector>

@drawable/spinner_arrow is your bottom right corner image

edited Oct 07 '15 at 09:10

answered Jun 21 '13 at 09:31

Samadhan Medge

2,049
2
16
24

i want to ask question is when spinner is pressed that selector color should change means change the style. do you have any idea about to do this. – nilesh wani Jun 21 '13 at 13:34
4

What is fillWidth_wrapHeight is it another style? – SatanEnglish Jan 30 '14 at 22:49
@SatanEnglish I guess it's a predefined style not included. It probably defines the `layout_width` and `layout_height` attributes and set them to `match_parent` (rather than the deprecated `fill_parent`) and `wrap_content` respectively. – ar34z Jun 06 '14 at 08:12
1

When my text is too long then it overlaps with the spinner arrow. Any suggestions about avoiding that? – tanay tandon Jul 18 '14 at 10:46
if spinner value is long then triangle hides. – Anitha Jul 03 '15 at 10:36
1

@SatanEnglish it was another style I reoved it and merge into spinner_style – Samadhan Medge Oct 07 '15 at 09:11
@Anitha Please check the updated answer in that android:paddingRight added which will solve your issue – Samadhan Medge Oct 07 '15 at 09:13
If I want to remove border means just put arrow and horizontal line below text, what change I need to do here? – Suhas Patil Jan 06 '16 at 06:08
Why is the shape in a selector if it only contains one item ? – 2Dee Feb 10 '16 at 19:00
@drawable/spinner_arrow -- where is this thing? I believe an image is needed to set inside that block. Could you please help with this? – Karan Thakkar May 08 '17 at 05:33
@KaranThakkar You can set any image as per your need, this image is only to show drop down arrow of the spinner – Samadhan Medge May 16 '17 at 16:59
what should be the size of the image...because I want to use my application with API level 17 and I don't want to use the vector drawable – Abdulmalek Dery Aug 22 '19 at 17:32
Worked like charm! – Shailendra Madda Dec 15 '21 at 10:38

score 41 · Answer 2 · edited Jun 27 '18 at 10:16

This is a simple one.

your_layout.xml

<android.support.v7.widget.AppCompatSpinner
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/spinner_background"
/>

In the drawable folder, spinner_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item><layer-list>
    <item>
        <shape>
            <solid
                android:color="@color/colorWhite">
            </solid>

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

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
            <stroke
                android:width="2dp"
                android:color="@color/colorDarkGrey"/>
        </shape>
    </item>
    <item >
        <bitmap android:gravity="bottom|right"
        android:src="@drawable/ic_arrow_drop_down_black_24dp" />
    </item>
  </layer-list></item>
</selector>

Preview:

@RaviYadav, instead of `bitmap` you can place your vector drawable: ` ` — Aliton Oliveira, May 09 '20 at 00:21

Karan Thakkar · Answer 3 · 2017-06-09T05:59:35.337

You can achieve the following by using a single line in your spinner declaration in XML:

Just add this: style="@android:style/Widget.Holo.Light.Spinner"

This is a default generated style in android. It doesn't contain borders around it though. For that you'd better search something on google.

Hope this helps.

UPDATE: AFter a lot of digging I got something which works well for introducing border around spinner.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="8dp"
        android:top="8dp">
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="4dp" />
            <stroke
                android:width="2dp"
                android:color="#9E9E9E" />
            <padding
                android:bottom="16dp"
                android:left="8dp"
                android:right="16dp"
                android:top="16dp" />
        </shape>
    </item>
</layer-list>

Place this in the drawable folder and use it as a background for spinner. Like this:

<RelativeLayout
        android:id="@+id/speaker_relative_layout"
        android:layout_width="0dp"
        android:layout_height="70dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/spinner_style"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Spinner
            android:id="@+id/select_speaker_spinner"
            style="@style/Widget.AppCompat.DropDownItem.Spinner"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:entries="@array/select_speaker_spinner_array"
            android:spinnerMode="dialog" />

    </RelativeLayout>

Default styles are also great as said by [Karan Thakkar](https://stackoverflow.com/users/5406239/karan-thakkar), I used this default style: `style="@android:style/Widget.Spinner"`, there are lot of others also available, try it out. — Reejesh PK, Feb 06 '19 at 18:25

score 4 · Answer 4 · answered Jun 11 '21 at 14:18

If you don't prefer to create multiple XML files, try:

<com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:strokeWidth="1dp"
        app:strokeColor="@color/black"
        app:cardCornerRadius="4dp">

        <androidx.appcompat.widget.AppCompatSpinner
            android:id="@+id/spinner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"/>

    </com.google.android.material.card.MaterialCardView>

To change the border color:

app:strokeColor="YOUR_COLOR_HERE"

To change the border's width:

app:strokeWidth="YOUR_DP_WIDTH_HERE"

score 1 · Answer 5 · answered Jun 21 '13 at 09:41

There are two ways to achieve this.

1- As already proposed u can set the background of your spinner as custom 9 patch Image with all the adjustments made into it .

android:background="@drawable/btn_dropdown" 
android:clickable="true"
android:dropDownVerticalOffset="-10dip"
android:dropDownHorizontalOffset="0dip"
android:gravity="center"

If you want your Spinner to show With various different background colors i would recommend making the drop down image transparent, & loading that spinner in a relative layout with your color set in.

btn _dropdown is as:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_window_focused="false" android:state_enabled="true"
    android:drawable="@drawable/spinner_default" />
<item
    android:state_window_focused="false" android:state_enabled="false"
    android:drawable="@drawable/spinner_default" />
<item
    android:state_pressed="true"
    android:drawable="@drawable/spinner_pressed" />
<item
    android:state_focused="true" android:state_enabled="true"
    android:drawable="@drawable/spinner_pressed" />
<item
    android:state_enabled="true"
    android:drawable="@drawable/spinner_default" />
<item
    android:state_focused="true"
    android:drawable="@drawable/spinner_pressed" />
<item
    android:drawable="@drawable/spinner_default" />
</selector>

where the various states of pngwould define your various States of spinner seleti

score 1 · Answer 6 · answered May 23 '17 at 19:30

1

To change only "background" (add corners, change color, ....) you can put it into FrameLayout with wanted background drawable, else you need to make nine patch background for to not lose spinner arrow. Spinner background is transparent.

answered May 23 '17 at 19:30

Gurgen Hakobyan

951
10
13

score 0 · Answer 7 · answered Jun 21 '13 at 09:27

0

You could design a simple nine-patch png image and use it as the background of spinner. Using GIMP you can put both border and right triangle in image.

answered Jun 21 '13 at 09:27

alrama

618
11
17

declare your nine-patch png image as background . Or if you need two backgrounds for pressed/up mode you can declare your nine-patches in xml like here: http://tech.chitgoks.com/2011/06/25/change-spinner-style-in-android/ – alrama Jun 21 '13 at 09:51

score 0 · Answer 8 · answered Jul 23 '19 at 08:18

It's super easy you can just add this to your Adapter -> getDropDownView

getDropDownView:

convertView.setBackground(getContext().getResources().getDrawable(R.drawable.bg_spinner_dropdown));

bg_spinner_dropdown:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <corners
        android:bottomLeftRadius=enter code here"25dp"
        android:bottomRightRadius="25dp"
        android:topLeftRadius="25dp"
        android:topRightRadius="25dp" />
</shape>

How to create custom spinner like border around the spinner with down triangle on the right side?

8 Answers8

Linked

Related