How do I make the rounded corners of the menu in the toolbar?

Question

This is my toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_40sdp"
    android:background="@android:color/holo_red_dark"
    android:gravity="center_vertical"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:popupTheme="@style/PopUpTheme"/>

This is how I customized the popup menu in style.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="PopUpTheme" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:popupBackground">@drawable/background_popup_menu</item>
    </style>
</resources>

background_popup_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <corners android:radius="5dp" />
</shape>

That's what I get in the end.

But I need to do like this

Serious

did u find out a solution? – Kinswoman

Answer 1

You can change the background of the overflow menu defining in your app theme the actionOverflowMenuStyle attribute.

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

With:

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

Then define the drawable/my_mtrl_popupmenu_background.xml with something like:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="?attr/colorSurface"/>

  <corners
      android:bottomLeftRadius="8dp"
      android:bottomRightRadius="8dp"
      android:topLeftRadius="8dp"
      android:topRightRadius="8dp"/>
  
</shape>

Resplendence

It doesn't work for me. I have followed above all things. still I am not getting the rounded corners – Twiggy

This worked for me. <item name="android:popupMenuStyle">@style/popupOverflowMenu</item> – Twiggy

Answer 2

But you have rounded corners :) Just try to increase a value of radius like <corners android:radius="25dp" />.

Trichinosis

Try to add android:shape="rectangle" to shape or android:shape="oval" maybe this will help :) – Trichinosis