ItemBackground with a ripple effect

Question

I'm using the android:itemBackground XML attribute to change the background color of the items in my overflow menu (three dots menu). My styles.xml looks as follows:

xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:itemBackground">@color/colorItemBg</item>
</style>

This works, but makes the ripple effect on the items completely disappear. This effect is critical for my user experience. I tried setting the itemBackground to @drawable/custom_background, which is an XML drawable I defined like so:

xml
<?xml version="1.0" encoding="utf-8" ?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripple_material_dark">
  <item android:id="@android:id/mask"
    android:drawable="@color/colorItemBg" />
</ripple>

But this ignores my custom background altogether and uses the default one. I also tried all answers to this question to no avail.

How can I change the background color of my menu items and keep the ripple effect?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

If you want to change Background and Overflow Icon color in Xamarin Forms.

Firstly, open the style.xml, then add the following style.

   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  
     
   <item name="android:textColorSecondary">#54FF9F</item>  
    </style>  

Then open the toolbar.xml like following screenshot.

Change the namespace from android.support.v7.widget.Toolbar to androidx.appcompat.widget.Toolbar, then Change the value of android:theme to the AppTheme like following code.

   <androidx.appcompat.widget.Toolbar  
      xmlns:android="http://schemas.android.com/apk/res/android"  
      xmlns:app="http://schemas.android.com/apk/res-auto"   
      android:id="@+id/toolbar"  
      android:layout_width="match_parent"  
      android:layout_height="wrap_content"  
      android:background="?attr/colorPrimary"  
      android:theme="@style/AppTheme"  
      android:popupTheme="@style/ThemeOverlay.AppCompat.Light"   
    />  

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.