question

XamarinNewBie-6038 avatar image
0 Votes"
XamarinNewBie-6038 asked LeonLu-MSFT answered

ItemBackground with a ripple effect

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?


dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered

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.

84829-image.png

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" 
 />


84730-image.png

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.



image.png (30.4 KiB)
image.png (11.5 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.