How to change the spinner background in Android

Question

I am developing an app in which I need to change the spinner background layout to match the background color  I researched and found that I need to create a 9 patch image  I have done creating the 9 patch image and used in the app but it looks bigger than the normal spinner and also I couldn t see the drop down button in the spinner as well   I am so happy if you guys provide me a clear tutorial from start creating the 9 patch image for Spinner and using it in the app     Code for the Spinner    lt Spinner         android id    id spnIncredientone          android layout width  fill parent          android layout height  wrap content          android layout below    id txtMixtureTitle           android layout marginLeft  5dip          android layout marginRight  5dip          android background   drawable spinner background          android prompt   string selectmixture    gt

User · Answer

It is already said in other answers   I did it like placing Spinner inside a CardView and changed the cardBackgroundColor   You could use some other views also and set its background either drawable or color   Thus it doesn t affect Spinner drop down arrow  As the spinner dropdown arrow disappears if we set background to Spinner    lt androidx cardview widget CardView         android id  quot   id cardView quot          android layout width  quot wrap content quot          android layout height  quot wrap content quot          app cardCornerRadius  quot 6dp quot          app cardBackgroundColor  quot  color white quot  gt                    lt Spinner             android id  quot   id spinner quot              android layout width  quot wrap content quot              android layout height  quot wrap content quot              android padding  quot 10dp quot   gt        lt  androidx cardview widget CardView gt

User · Answer

It needs to work with the transparent background in a spinner   spinner enable xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt        lt item gt           lt shape android shape  rectangle  gt               lt solid android color   00000000    gt               lt padding android bottom  2dp    gt           lt  shape gt       lt  item gt        lt item gt           lt shape android shape  rectangle  gt               lt solid android color   00000000    gt           lt  shape gt       lt  item gt        lt item         android bottom  -2dp          android left  -3dp          android right  -3dp          android top  -3dp  gt           lt shape gt               lt solid android color   00000000    gt               lt stroke                  android width  2dp                  android color   00aedb    gt           lt  shape gt       lt  item gt        lt item gt           lt rotate             android fromDegrees  90              android pivotX  100               android pivotY  60               android toDegrees  135  gt               lt rotate                 android fromDegrees  135                  android pivotX  100                   android pivotY  60                   android toDegrees  45  gt                   lt shape android shape  rectangle  gt                       lt stroke                         android width  10dp                          android color   00aedb    gt                       lt solid android color   00aedb    gt                   lt  shape gt               lt  rotate gt           lt  rotate gt       lt  item gt   lt  layer-list gt    spinner disable xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt    lt item gt       lt shape android shape  rectangle  gt           lt solid android color   00000000    gt           lt padding android bottom  2dp    gt       lt  shape gt   lt  item gt    lt item gt       lt shape android shape  rectangle  gt           lt solid android color   00000000    gt       lt  shape gt   lt  item gt    lt item     android bottom  -2dp      android left  -3dp      android right  -3dp      android top  -3dp  gt       lt shape gt           lt solid android color   00000000    gt           lt stroke              android width  2dp              android color   d9dadc    gt       lt  shape gt   lt  item gt    lt item gt       lt rotate         android fromDegrees  90          android pivotX  100           android pivotY  60           android toDegrees  135  gt           lt rotate             android fromDegrees  135              android pivotX  100               android pivotY  60               android toDegrees  45  gt               lt shape android shape  rectangle  gt                   lt stroke                     android width  10dp                      android color   d9dadc    gt                   lt solid android color   d9dadc    gt               lt  shape gt           lt  rotate gt       lt  rotate gt   lt  item gt   lt  layer-list gt    spinner selector xml   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   drawable spinner enable  android state enabled  true  android state pressed  false     gt   lt  -- enable -- gt       lt item android drawable   drawable spinner disable  android state enabled  false    gt   lt  -- disable -- gt   lt  selector gt

User · Answer

You can change background color and drop down icon like doing this way  Step1   In drawable folder make background xml for border of spinner    lt shape xmlns android  http   schemas android com apk res android  gt   lt solid android color   android color transparent    gt   lt corners android radius  5dp    gt   lt stroke     android width  1dp      android color   color darkGray    gt   lt  shape gt     edited   Step2  for layout design of spinner use this drop down icon or any image drop pnj     lt RelativeLayout                     android layout width  match parent                      android layout height  wrap content                      android layout marginRight  3dp                      android layout weight   28                      android background   drawable spinner border                      android orientation  horizontal  gt                        lt Spinner                         android id    id spinner2                          android layout width  match parent                          android layout height  wrap content                          android layout centerVertical  true                          android layout gravity  center                          android background   android color transparent                          android gravity  center                          android layout marginLeft  5dp                          android spinnerMode  dropdown    gt                        lt ImageView                         android layout width  wrap content                          android layout height  wrap content                          android layout alignParentRight  true                          android layout centerVertical  true                          android layout gravity  center                          android src   mipmap drop    gt                    lt  RelativeLayout gt    Finally looks like below image and it is every where clickable in round area and no need of to write click Lister for imageView   For more details   you can see Here

User · Answer

As Jakob pointed out  android popupBackground is the key attribute for the dropdown  opened state of the Spinner   but instead of using just a colour  I got the best results with a 9-patch drawable like this    menu dropdown panel 9 png  Note that it s very easy to generate this 9-patch image for the background colour of your choice  for example using this online tool as I explained in this answer   So  my Spinner XML definition looks like    lt Spinner     android id    id spinner      android layout width  wrap content      android layout height  wrap content      android background   color navigationBlue      android spinnerMode  dropdown      android popupBackground   drawable menu dropdown panel        gt    And the result      For custom fonts  as in the screenshot above  a custom SpinnerAdapter is needed too    Works at least on Android 4 0   API level 14

User · Answer

When you set the spinner background color using android background   color your color    your spinner   default arrow will disappear    And also need to add fixed width and height to spinner so you can show the full content of the spinner   so i found a way to do it   just like the above image      Write your spinner code inside a frame layout  here you don t need to use a separate image view for showing drop down icon       lt TextView             android layout width  wrap content              android layout height  wrap content              android text  Floor              android textColor   color white   gt            lt FrameLayout             android layout width  wrap content              android layout height  wrap content              android layout marginLeft   dimen margin short              android background   drawable custom spn background  gt                lt Spinner                 android layout width  wrap content                  android layout height  wrap content                  android dropDownSelector   color colorAccent                  android dropDownWidth   dimen dp 70                  android spinnerMode  dropdown                  android tooltipText  Select floor    gt           lt  FrameLayout gt       Create a new xml for Frame layout background or set   android background   color your color    custom spn background xml   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 corners android radius   dimen dp 5    gt   lt solid android color   color white    gt

User · Answer

I tried above samples but not working for me  The simplest solution is working for me awesome    lt RelativeLayout         android layout width  wrap content          android layout height  wrap content          android background   fff   gt           lt Spinner             android id    id spinner1              android layout width  match parent              android layout height  wrap content              android entries   array Area   gt       lt  RelativeLayout gt

User · Answer

spinner code    lt TextView     android id    id spinner      android gravity  bottom      android layout marginTop  16dp      android background   drawable spinner selector      android layout width  match parent      android layout height  wrap content      android clickable  true      android paddingLeft  16dp      android textSize  16sp      android text  TextView    gt    spinner selector xml   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   drawable spinner enable  android state enabled  true  android state pressed  false     gt   lt  -- enable -- gt       lt item android drawable   drawable spinner clicked  android state pressed  true   android state enabled  true     gt       lt item android drawable   drawable spinner disable  android state enabled  false    gt   lt  -- disable -- gt   lt  selector gt    spinner disable xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item gt           lt shape android shape  rectangle   gt               lt solid android color   ddf    gt               lt padding android bottom  1dp    gt           lt  shape gt       lt  item gt       lt item android bottom  1dp  gt           lt shape android shape  rectangle   gt               lt solid android color   fff    gt                lt padding                 android left  0dp                  android right  0dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape android shape  rectangle   gt               lt solid android color   fff    gt           lt  shape gt       lt  item gt       lt item         android gravity  center vertical right          android right  8dp  gt           lt layer-list gt               lt item                 android width  12dp                  android height  12dp                  android bottom  10dp                  android gravity  center  gt                   lt rotate                     android fromDegrees  45                      android toDegrees  45  gt                       lt shape android shape  rectangle  gt                           lt solid android color   ddf    gt                           lt stroke                             android width  1dp                              android color   aaaaaa    gt                       lt  shape gt                   lt  rotate gt               lt  item gt               lt item                 android width  30dp                  android height  10dp                  android bottom  21dp                  android gravity  center  gt                   lt shape android shape  rectangle  gt                       lt solid android color   android color white    gt                   lt  shape gt               lt  item gt           lt  layer-list gt       lt  item gt   lt  layer-list gt    spinner clicked xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item gt           lt shape android shape  rectangle   gt               lt solid android color   00f    gt               lt padding android bottom  1dp    gt           lt  shape gt       lt  item gt       lt item android bottom  1dp  gt           lt shape android shape  rectangle   gt               lt solid android color   fff    gt                lt padding                 android left  0dp                  android right  0dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape android shape  rectangle   gt               lt solid android color   fff    gt           lt  shape gt       lt  item gt       lt item         android gravity  center vertical right          android right  8dp  gt           lt layer-list gt               lt item                 android width  12dp                  android height  12dp                  android bottom  10dp                  android gravity  center  gt                   lt rotate                     android fromDegrees  45                      android toDegrees  45  gt                       lt shape android shape  rectangle  gt                           lt solid android color   00f    gt                           lt stroke                             android width  1dp                              android color   aaaaaa    gt                       lt  shape gt                   lt  rotate gt               lt  item gt               lt item                 android width  30dp                  android height  10dp                  android bottom  21dp                  android gravity  center  gt                   lt shape android shape  rectangle  gt                       lt solid android color   android color white    gt                   lt  shape gt               lt  item gt           lt  layer-list gt       lt  item gt   lt  layer-list gt    spinner enable xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt   lt item gt       lt shape android shape  rectangle   gt           lt solid android color   00f    gt           lt padding android bottom  1dp    gt       lt  shape gt   lt  item gt   lt item android bottom  1dp  gt       lt shape android shape  rectangle   gt           lt solid android color   BBDEFB    gt            lt padding             android left  0dp              android right  0dp    gt       lt  shape gt   lt  item gt   lt item gt       lt shape android shape  rectangle   gt           lt solid android color   BBDEFB    gt       lt  shape gt   lt  item gt   lt item     android gravity  center vertical right      android right  8dp  gt       lt layer-list gt           lt item             android width  12dp              android height  12dp              android bottom  10dp              android gravity  center  gt               lt rotate                 android fromDegrees  45                  android toDegrees  45  gt                   lt shape android shape  rectangle  gt                       lt solid android color   00f    gt                       lt stroke                         android width  1dp                          android color   aaaaaa    gt                   lt  shape gt               lt  rotate gt           lt  item gt           lt item             android width  30dp              android height  10dp              android bottom  21dp              android gravity  center  gt               lt shape android shape  rectangle  gt                   lt solid android color   BBDEFB    gt               lt  shape gt           lt  item gt       lt  layer-list gt   lt  item gt   lt  layer-list gt    it works fine without nine-patch pictures  api 21

User · Answer

Even though it is an older post but as I came across it while looking for same problem so I thought I will add my two cents as well  Here is my version of Spinner s background with DropDown arrow  Just the complete background  not only the arrow   This is how it looks     Apply on spinner like      lt Spinner      android layout width  match parent       android layout height  wrap content       android background   drawable spinner bg    gt    spinner bg xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item gt           lt color android color   color InputBg    gt       lt  item gt       lt item android gravity  center vertical right  android right  8dp  gt           lt layer-list gt               lt item android width  12dp  android height  12dp  android gravity  center  android bottom  10dp  gt                   lt rotate                     android fromDegrees  45                      android toDegrees  45  gt                       lt shape android shape  rectangle  gt                           lt solid android color   666666    gt                           lt stroke android color   aaaaaa  android width  1dp   gt                       lt  shape gt                   lt  rotate gt               lt  item gt               lt item android width  30dp  android height  10dp  android bottom  21dp  android gravity  center  gt                   lt shape android shape  rectangle  gt                       lt solid android color   color InputBg   gt                   lt  shape gt               lt  item gt           lt  layer-list gt       lt  item gt   lt  layer-list gt     color InputBg should be replaced by the color you want as your background   First it fills the background with desired color  Then a child layer-list makes a square and rotates it by 45 degrees and then a second Rectangle with background color covers the top part of rotated square making it look like a down arrow   There is an extra stroke in rotated rectangle with is not really required

User · Answer

You just use this code               lt LinearLayout              android layout width  match parent              android layout height  wrap content              android orientation  horizontal              android baselineAligned  false  gt                lt LinearLayout                 android layout width  0dp                  android layout height  match parent                  android layout weight  0 80  gt                    lt FrameLayout                     android layout width  match parent                      android layout height  match parent                      android layout gravity  center vertical start                      android paddingBottom  5dp                      android paddingTop  5dp  gt                        lt Spinner                         android layout width  match parent                          android layout height  match parent                           android background   drawable spiner back                          android visibility  visible    gt                        lt ImageView                         android layout width  wrap content                          android layout height  wrap content                          android layout gravity  center vertical end                          android src   drawable ic arrow drop down black 24dp    gt                   lt  FrameLayout gt                 lt  LinearLayout gt                lt LinearLayout                 android layout width  0dp                  android layout height  match parent                  android layout weight  0 20  gt                    lt Button                     android layout width  wrap content                      android layout height  wrap content                      android background   color colorred                      android fontFamily   font raleway extrabold                      android text  GO                      android textColor   color colorwhite    gt                lt  LinearLayout gt           lt  LinearLayout gt    And This is background which i used      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 corners android radius  5dp    gt   lt solid android color   color colorwhite    gt      and here we go this is view which i archive

User · Answer

spinner selector xml   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   drawable spinner enabled  android state enabled  true  android state pressed  false    gt   lt  -- enable -- gt       lt item android drawable   drawable spinner clicked  android state enabled  true  android state pressed  true    gt       lt item android drawable   drawable spinner disabled  android state enabled  false    gt   lt  -- disable -- gt   lt  selector gt    spinner enabled xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt    lt item gt       lt shape android shape  rectangle   gt           lt solid android color   00f    gt           lt padding android bottom  2dp    gt       lt  shape gt   lt  item gt    lt item gt       lt shape android shape  rectangle   gt           lt solid android color   fff    gt       lt  shape gt   lt  item gt    lt item gt       lt rotate         android fromDegrees  90          android pivotX  100           android pivotY  60           android toDegrees  135  gt           lt rotate             android fromDegrees  135              android pivotX  100               android pivotY  60               android toDegrees  45  gt               lt shape android shape  rectangle  gt                   lt stroke                     android width  10dp                      android color   00f    gt                   lt solid android color   00f    gt               lt  shape gt           lt  rotate gt       lt  rotate gt   lt  item gt   lt  layer-list gt    spinner disabled xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt    lt item gt       lt shape android shape  rectangle   gt           lt solid android color   ddf    gt           lt padding android bottom  2dp    gt       lt  shape gt   lt  item gt    lt item gt       lt shape android shape  rectangle   gt           lt solid android color   fff    gt       lt  shape gt   lt  item gt    lt item gt       lt rotate         android fromDegrees  90          android pivotX  100           android pivotY  60           android toDegrees  135  gt           lt rotate             android fromDegrees  135              android pivotX  100               android pivotY  60               android toDegrees  45  gt               lt shape android shape  rectangle  gt                   lt stroke                     android width  10dp                      android color   ddf    gt                   lt solid android color   ddf    gt               lt  shape gt           lt  rotate gt       lt  rotate gt   lt  item gt   lt  layer-list gt    spinner focused xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt    lt item gt       lt shape android shape  rectangle   gt           lt solid android color   00f    gt           lt padding android bottom  2dp    gt       lt  shape gt   lt  item gt    lt item gt       lt shape android shape  rectangle   gt           lt solid android color   BBDEFB    gt       lt  shape gt   lt  item gt    lt item gt       lt rotate         android fromDegrees  90          android pivotX  100           android pivotY  60           android toDegrees  135  gt           lt rotate             android fromDegrees  135              android pivotX  100               android pivotY  60               android toDegrees  45  gt               lt shape android shape  rectangle  gt                   lt stroke                     android width  10dp                      android color   00f    gt                   lt solid android color   00f    gt               lt  shape gt           lt  rotate gt       lt  rotate gt   lt  item gt   lt  layer-list gt    it works fine without nine-patch pictures  api 10

User · Answer

You need to create a new personalized layout for your spinner items  like this  I will name it   spinner item xml    lt TextView xmlns android  http   schemas android com apk res android      android id   android id text1      android layout width  match parent      android layout height  wrap content      android textSize  20sp      android textColor   ff0000    gt    Then on your spinner declaration  you need to make your spinner use the new layout in the adapter   ArrayAdapter adapter   ArrayAdapter createFromResource this  R layout spinner item  YOUR SPINNER CONTENT   spinner setAdapter adapter     To personalize elements from the dropdown list  you need to create another layout  I will name it spinner dropdown item xml    lt CheckedTextView xmlns android  http   schemas android com apk res android      android id   android id text1      style   android attr spinnerDropDownItemStyle      android singleLine  true  android layout width  match parent  android layout height  wrap content      android ellipsize  marquee      android textColor   aa66cc   gt    and then on the adapter   ArrayAdapter adapter   ArrayAdapter createFromResource this  R layout spinner item  YOUR SPINNER CONTENT   adapter setDropDownViewResource R layout spinner dropdown item   spinner setAdapter adapter

User · Answer

Android Studio has a pre-defined code  you  can directly use it  android popupBackground  HEX COLOR CODE

User · Answer

Spinner code    lt Spinner     android id    id spinner      android layout width  match parent      android layout height  wrap content      android textColor   color text white      android paddingBottom  13dp      android background   drawable bg spinner   gt       bg spinner xml    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item gt           lt shape android shape  rectangle  gt               lt solid android color   color colorPrimaryDark   gt               lt corners android radius  10dp    gt           lt  shape gt       lt  item gt       lt item android gravity  center vertical right  android right  8dp  gt           lt layer-list gt               lt item android width  12dp  android height  12dp   android gravity  center  android bottom  10dp  gt                   lt rotate                     android fromDegrees  45                      android toDegrees  45  gt                       lt shape android shape  rectangle  gt                           lt solid android color   ffffff    gt                           lt stroke android color   ffffff  android width  1dp   gt                       lt  shape gt                   lt  rotate gt               lt  item gt               lt item android width  20dp  android height  10dp  android bottom  21dp  android gravity  center  gt                   lt shape android shape  rectangle  gt                       lt solid android color   color colorPrimaryDark   gt                   lt  shape gt               lt  item gt           lt  layer-list gt       lt  item gt   lt  layer-list gt

User · Answer

You can set the spinners background color in xml like this    android background  YOUR HEX COLOR CODE    and if you use the drop down menu with you spinner you can set its background color like this   android popupBackground  YOUR HEX COLOR CODE

User · Answer

lt FrameLayout         android layout width  match parent          android layout height  wrap content  gt       lt Spinner         android layout marginTop  8dp          android background   drawable edit border          android visibility  visible          android id    id teach repeat          android entries   array on off          android textSize  12sp          android textColor   ffffff          android layout width  match parent          android layout height  40dp    gt           lt ImageView             android layout marginTop  8dp              android layout gravity  end              android src   drawable ic arrow drop down white 18dp              android layout width  wrap content              android layout height  wrap content    gt       lt  FrameLayout gt

[android] How to change the spinner background in Android?

Examples related to android

Examples related to android-spinner

Examples related to nine-patch