How to make rounded corners for Android Spinner and ActionBar popup menu?

60 views Asked by At

I'm trying to make rounded edges for an overflow menu in an ActionBar and rounded edges for a popup list's background in a Spinner. However, due to the ripple effect, I still have artifacts. I tried to disable the ripple effect with the colorControlActivated and colorControlHighlight parameters, but it does not help because these parameters affect other components (text selection, switch, etc). Already tried about 10 different styles and none of them worked. Please tell me, is there a way to round the edges of these components?

My current styles.xml

Main theme

<item name="actionOverflowMenuStyle">@style/PopupMenu</item>
<item name="android:itemBackground">@drawable/popup_style</item>
<item name="itemBackground">@drawable/popup_style</item>
<item name="android:spinnerStyle">@style/SpinnerStyle</item>
<item name="spinnerStyle">@style/SpinnerStyle</item>
<item name="colorControlActivated">@color/color_orange</item>
<item name="colorControlHighlight">@color/color_orange</item>

<style name="PopupMenu" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
    <item name="android:popupBackground">@drawable/shape</item>
    <item name="popupMenuBackground">@drawable/shape</item>
</style>

<style name="SpinnerStyle" parent="Widget.AppCompat.Spinner">
    <item name="android:popupBackground">@drawable/popup_style</item>
    <item name="popupMenuBackground">@drawable/popup_style</item>
</style>

shape.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/color_shape"/>
            <corners android:radius="@dimen/content_corner"/>
        </shape>
    </item>

</layer-list>

popup_style.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/popup_selected"/>
    <item android:state_focused="true" android:drawable="@drawable/popup_normal"/>
    <item android:drawable="@drawable/transparent_ripple"/>
</selector>

popup_normal.xml

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/color_orange"/>
    <corners android:radius="@dimen/content_corner"/>
</shape>

popup_selected.xml

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/color_orange_light"/>
    <corners android:radius="@dimen/content_corner"/>
</shape>

transparent_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <ripple android:color="@color/color_transparent">
            <item>
                <shape>
                    <solid android:color="@color/color_shape"/>
                    <corners android:radius="@dimen/content_corner"/>
                </shape>
            </item>
        </ripple>
    </item>
</selector>

enter image description here

0

There are 0 answers