How to add border to a spinner without affecting its popup menu

Question

I'm trying to add border to my spinners.

This is what I've done so far:

In my styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <!-- ... -->       
      <item name="android:spinnerItemStyle">@style/spinnerItemStyle</item>
      <!-- ... -->
</style>

<style name="spinnerItemStyle">
        <item name="android:padding">@dimen/form_horizontal_padding_normal</item>
        <item name="android:textAppearance">@style/TextAppearance.AppCompat.Subhead</item>
        <item name="android:background">@drawable/spinner_border</item>
        <item name="android:textColor">@color/secondary_text</item>
 </style>

spinner_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:radius="6dp"/>
    <stroke
        android:width="1dp"
        android:color="@color/detail_accent_pane_background"/>

</shape>

Without the changes this is how the popup menu looks:

After the changes the spinners have the border

But the popup menu also has the the border, which is not what I want.

How can I add border to spinners without affecting their popup menus?

Thanks.

Hacienda

Well i tried your drawable xmland applied your styles as well. Its working really fine (Tested on Samsung Tab runnig kitkat. And Amazon Kindle fire) Tell us on which device you are testing it and share the xml where you are using spinner and applying the borders – Quality

I'm also testing on a Samsung tab running kitkat and no matter what I tried I can't make the popup menu look as it did before the changes (like the first image in my question) – Hacienda

I don't think so. I do use elevations but not in that activity. Can I really add borders to the Spinner without affecting the popupBackground? – Hacienda

Is it possible for you to share your xml where you are using Spinners.? – Quality

Of course, but I can't see how that would help because I have lots of spinners in my app and all I have the same problem. Is it really possible to add some sort of border to the spinner when it is closed, but keeping the popup menu like the first image? – Hacienda

#8980661 Try this one – Quality

@AdeelTurk Just one question? The layout that is used to inflate the items is the same that is shown when the spinner is closed? All I wanted to do was to show a rectangle around the spinner NOT around each and every item :( – Hacienda

sorry i was out of city where i dont have internet. Is your problem solved? – Quality

Answer 1

This might be helpful to you

backgroud_spinner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:width="0dp" android:color="#80FFFFFF" />
    <solid android:color="#80FFFFFF"/>
</shape>

And apply this,

 android:popupBackground="@drawable/backgroud_spinner"

It will make the popup fully transparent, But I don't know whether it suits you or not, When I used your drawables, it didn't show the image as you've shown in image.

Salyer

Thank you Shree I tried adding the spinner_border.xml drawable, but the popup menus still have borders and round corners and what I need is for them to look exactly as the first image :( – Hacienda

But that all didn't show in my list, Will you post your spinner xml as well as other related things exactly same as it is. So that I can debug that. – Salyer

I think the problem is the my spinners use the material design style because I use the app support:appcompat-v7 and that popup menu in the first image seems to have some sort of elevation which the drawables clearly don't have – Hacienda

May be, So that it will be helpful if you post as many codes as possible. – Salyer

Why dnt you use custom adapter with single textview and attached it to spinner. – Lum

@ShreeKrishna Just one question? The layout that is used to inflate the items is the same that is shown when the spinner is closed? All I wanted to do was to show a rectangle around the spinner NOT around each and every item :( – Hacienda

Is it a custom layout or you used simple_spinner_dropdown_item ? Yah I understood that the border should be removed from each Item, But the code you provided isn't sufficient. It works on our device as per you want. It doesn't show the border at each element. – Salyer

Answer 2

Add

android:popupBackground="@android:color/transparent" 

to your <Spinner/> view in xml

Sivie

Thank you. I tried your solution but unfortunately it didn't work. The popup menu still has borders and round corners :( – Hacienda

Can you post the xml? – Sivie

Well, it worked for my custom spinner. Helped me to remove the border / outline color on the popupBackground. Thanks @ShadabAnsari – Estaestablish