Search code examples
androidmaterial-designandroid-toolbarandroid-stylesoverflow-menu

problem to set Android toolbar overFlow menu style (rounded corner with stroke line)


what I am trying to do is to get a simple menu with rounded corner and stroke line like this:my final goal

but what i am getting is this:

what i get

first I made a shape whit ripple in drawable (drop_down_back_0.xml):

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#C54747">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/colorAccent" />
            <stroke android:color="@color/colorPrimary"  android:width="1dp"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>
</ripple>

then i used it in a style:

   <style name="toolbarMenuStyle" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:colorBackground">@android:color/transparent</item>
        <item name="android:textColor">@color/colorPrimaryDark</item>
        <item name="android:background">@drawable/drop_down_back_0</item>
    </style>

finaly I used the style in my activity_layout.xml:

.
.
.
 <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#526C98"
        android:elevation="10dp"
        app:titleTextColor="#fff"
        app:popupTheme="@style/toolbarMenuStyle" >

Solution

  • For the OverflowMenu you can define in your app theme the actionOverflowMenuStyle attribute.

    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
       <item name="actionOverflowMenuStyle">@style/custompopupOverflowMenu</item>
    </style>
    

    With:

      <style name="custompopupOverflowMenu" parent="@style/Widget.MaterialComponents.PopupMenu.Overflow">
        <item name="android:popupBackground">@drawable/my_mtrl_popupmenu_background</item>   
      </style>
    

    where the background is something like:

    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="?attr/colorSurface"/>
    
        <corners
            android:bottomLeftRadius="16dp"
            android:bottomRightRadius="16dp"
            android:topLeftRadius="16dp"
            android:topRightRadius="16dp"/>
    
        <stroke android:color="@color/colorPrimary" 
                      android:width="1dp"/>
    
        <padding
            android:bottom="8dp"
            android:top="8dp"/>
    
    </shape>
    

    enter image description here