Skip to content

Custom Spinner background with border XML

Make your spinner border and background like below image:

  • Create an android project.
  • Open activity_main.xml layout file
  • Add a spinner to your activity_main.xml

[xml] <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.shohoz.checkjsonparsing.MainActivity">

<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
[/xml]

  • Now Download this image  
  • Put downloaded image to drawable folder.
  • then create a xml file in your  drawable folder like spinner_border.xml, now copy the below code:
[xml] <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>

<stroke android:width="2dp" android:color="#f58218" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="right|center" android:src="@drawable/ic_spinner" />
</item>
</layer-list></item>

</selector>
[/xml]

 

  • Now go to your spinner then set background
[xml] <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.shohoz.checkjsonparsing.MainActivity">

<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/spinner_border"/>
</RelativeLayout>
[/xml]

Leave a Reply