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    For above fig I wrote my custom spinner like a  spinner xml    lt Spinner android background   drawable spinner background   gt    spinner background xml   lt  xml version  1 0  encoding  UTF-8   gt       lt item android state pressed  true        android drawable   drawable spinner ab pressed new theme bs  gt       lt shape gt            lt solid              android color   color White    gt            lt corners android radius  3dp    gt            lt padding              android bottom  10dp               android left  10dp               android right  10dp               android top  10dp    gt             lt stroke              android width  2dp               android color   color skyblue    gt       lt  shape gt    lt  item gt    lt  -- spinner ab default new theme bs - gt  this image for corner triangle -- gt   lt item      android drawable   drawable spinner ab default new theme bs   gt       lt shape gt           lt solid             android color   color White  gt           lt  solid gt            lt corners android radius  3dp    gt            lt padding             android bottom  10dp               android left  10dp               android right  10dp               android top  10dp    gt            lt stroke              android width  2dp               android color   color gray   gt       lt  shape gt   lt  item gt      And I got output like following image   I tried lot but not achieve my goal please anybody have solution to develop spinner  like above first one image

User · Answer

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

User · Answer

Spinner     lt Spinner     android id    id To Units      style   style spinner style    gt    style xml       lt style name  spinner style  gt             lt item name  android layout width  gt match parent lt  item gt             lt item name  android layout height  gt wrap content lt  item gt             lt item name  android background  gt  drawable gradient spinner lt  item gt             lt item name  android layout margin  gt 10dp lt  item gt             lt item name  android paddingLeft  gt 8dp lt  item gt             lt item name  android paddingRight  gt 20dp lt  item gt             lt item name  android paddingTop  gt 5dp lt  item gt             lt item name  android paddingBottom  gt 5dp lt  item gt             lt item name  android popupBackground  gt  DFFFFFFF lt  item gt        lt  style gt    gradient spinner xml   in drawable folder    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt        lt item gt  lt layer-list gt               lt item gt  lt shape gt                       lt gradient android angle  90  android endColor   B3BBCC  android startColor   E8EBEF  android type  linear    gt                        lt stroke android width  1dp  android color   000000    gt                        lt corners android radius  4dp    gt                        lt padding android bottom  3dp  android left  3dp  android right  3dp  android top  3dp    gt                   lt  shape gt  lt  item gt               lt item  gt  lt bitmap android gravity  bottom right  android src   drawable spinner arrow    gt               lt  item gt           lt  layer-list gt  lt  item gt    lt  selector gt       drawable spinner arrow is your bottom right corner image

User · Answer

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

User · Answer

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    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  rectangle  gt       lt solid android color   color white    gt       lt corners         android bottomLeftRadius enter code here 25dp          android bottomRightRadius  25dp          android topLeftRadius  25dp          android topRightRadius  25dp    gt   lt  shape gt

User · Answer

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    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item         android bottom  8dp          android top  8dp  gt           lt shape gt               lt solid android color   android color white    gt               lt corners android radius  4dp    gt               lt stroke                 android width  2dp                  android color   9E9E9E    gt               lt padding                 android bottom  16dp                  android left  8dp                  android right  16dp                  android top  16dp    gt           lt  shape gt       lt  item gt   lt  layer-list gt    Place this in the drawable folder and use it as a background for spinner  Like this    lt 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  gt            lt 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    gt        lt  RelativeLayout gt

User · Answer

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   amp  loading that spinner in a relative layout with your color set in   btn  dropdown is as    lt selector xmlns android  http   schemas android com apk res android  gt   lt item     android state window focused  false  android state enabled  true      android drawable   drawable spinner default    gt   lt item     android state window focused  false  android state enabled  false      android drawable   drawable spinner default    gt   lt item     android state pressed  true      android drawable   drawable spinner pressed    gt   lt item     android state focused  true  android state enabled  true      android drawable   drawable spinner pressed    gt   lt item     android state enabled  true      android drawable   drawable spinner default    gt   lt item     android state focused  true      android drawable   drawable spinner pressed    gt   lt item     android drawable   drawable spinner default    gt   lt  selector gt    where the various states  of pngwould define your various States of spinner seleti

User · Answer

This is a simple one   your layout xml   lt android support v7 widget AppCompatSpinner   android layout width  match parent    android layout height  wrap content    android background   drawable spinner background    gt    In the drawable folder  spinner background xml   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt     lt item gt  lt layer-list gt       lt item gt           lt shape gt               lt solid                 android color   color colorWhite  gt               lt  solid gt                lt corners android radius  3dp    gt                lt padding                 android bottom  10dp                  android left  10dp                  android right  10dp                  android top  10dp    gt               lt stroke                 android width  2dp                  android color   color colorDarkGrey   gt           lt  shape gt       lt  item gt       lt item  gt           lt bitmap android gravity  bottom right          android src   drawable ic arrow drop down black 24dp    gt       lt  item gt     lt  layer-list gt  lt  item gt   lt  selector gt    Preview

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

Examples related to android

Examples related to android-layout