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

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

enter image description here

  • How to disable all click events of a layout?
  • Apply Different Style to Button When Pressed
  • are ad unit id and ppublisher id same?
  • 'java' plugin is not compatible with the Android plugins
  • How can I run Android emulator for Intel x86 Atom without hardware acceleration on Windows 8 for API 21 and 19?
  • Programmatically make a color more transparent
  • 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.

    Thanks in Advance

    Related posts:

    Android - Fix screen orientation for 1 page only (phonegap)
    Handle Android Back Button on Phonegap InAppBrowser
    How to Start the Vuforia AR sample App android?
    switch case statement error: case expressions must be constant expression
    How to get raw scan record (advertising packet) while scanning for classic bluetooth devices in Andr...
    Google cloud messaging sample
  • Invalid project description when importing project into Eclipse
  • How to tell if an X and Y coordinate are inside my button?
  • Android: why setVisibility(View.GONE); or setVisibility(View.INVISIBLE); do not work
  • Custom android AccelerateDecelerateInterpolator
  • AppCompat does not support the current theme features - nothing works
  • How Do You Test the Android 6.0 Full-Backup Behavior?
  • 5 Solutions collect form web for “how to create custom spinner like border around the spinner with down triangle on the right side?”

    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

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

    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>
    

    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

    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.

    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.

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.