I am trying to make a popup menu with rounded corners and custom font. I am using a Material Menu from material.io. I want to acheive something like this:
What I have tried so far is to use PopupMenu and add styling parameters using a custom background drawable:
- Seeing answers in this question, I used ContextThemeWrapper so that my styling actually takes effect. Without this, style changes are not working
private fun showAddGoalsMenu(view: View) {
val wrapper = ContextThemeWrapper(context, R.style.PopupMenu)
val popupMenu = PopupMenu(wrapper, view)
popupMenu.inflate(R.menu.menu_add_goals)
...
}
- From this material.io menu theming example, I tried to set the properties
popupMenuBackgroundin the main app style, and also tried settingandroid:popupBackgroundin an individual style. But the background doesn't apply:
- From other answers (question 1, question 2, question 3), I found other attributes like
background,android:background,itemBackground,android:itemBackground. From this,
backgroundandandroid:backgroundare only good for setting colors. If I set a custom drawable to background, it messes up the items as well:
itemBackgroundandandroid:itemBackgroundonly set backgrounds to individual items. So if I apply a round background, the result looks like this:
My style code currently looks like this. According to what I have read so far, this should work. But .... sigh. I have commented out all experiments I did.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorSecondary">@color/colorSecondary</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="bottomNavigationStyle">@style/Widget.App.BottomNavigationView</item>
<!--<item name="textAppearanceLargePopupMenu">@style/TextAppearance.App.Subtitle1</item>-->
<!--<item name="textAppearanceSmallPopupMenu">@style/TextAppearance.App.Subtitle1</item>-->
<!--<item name="popupMenuBackground">@drawable/custom_popup_background</item>-->
<item name="popupMenuStyle">@style/PopupMenu</item>
</style>
<style name="PopupMenu" parent="Widget.MaterialComponents.PopupMenu">
<item name="android:dropDownHorizontalOffset">-4dp</item>
<item name="android:dropDownVerticalOffset">4dp</item>
<item name="android:popupBackground">@drawable/custom_popup_background</item>
<!--<item name="android:itemBackground">@drawable/black_popup_background</item>-->
<item name="popupMenuBackground">@drawable/custom_popup_background</item>
<!--<item name="background">@color/colorPrimary</item>-->
<!--<item name="android:background">@drawable/custom_popup_background</item>-->
<item name="android:background">@color/colorPrimary</item>-->
<!-- <item name="itemBackground">@drawable/black_popup_background</item>-->
<item name="textAppearanceLargePopupMenu">@style/TextAppearance.App.Subtitle1</item>
<item name="textAppearanceSmallPopupMenu">@style/TextAppearance.App.Subtitle1</item>
</style>
<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="fontFamily">@font/amaranth</item>
<item name="android:fontFamily">@font/amaranth</item>
<item name="android:textColor">#1E2D58</item>
</style>
And here is my custom background drawable
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorPrimary"/>
<corners
android:radius="16dp"/>
<padding
android:bottom="8dp"
android:top="8dp"/>
</shape>
For testing itemBackground, I created a black_popup_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorSecondary"/>
<corners
android:radius="16dp"/>
<padding
android:bottom="8dp"
android:top="8dp"/>
</shape>
And the output I am getting is:
I have no clue what I am doing wrong. Thanks for all help in advance!



