Set background color of menu item on hover on Android

Question

I have menu items in my application, and I would like to change the background color of the element when it is clicked (see screenshot - position 1 is pressed)

I just need one color - light blue or dark. However, as you can see, there are two of them on the first element.

Here is my code:

Toolbar in action:

<android.support.v7.widget.Toolbar xmlns:sothree="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_toolbar" sothree:theme="@style/MyActionBar" android:layout_alignParentTop="true" style="@style/toolbarButton"> ... </android.support.v7.widget.Toolbar> 

Styles:

  <style name="toolbarButton"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:clickable">true</item> </style> <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse"> <item name="android:background">@color/material_dark_blue</item> <item name="android:displayOptions">showHome|homeAsUp|showTitle</item> <item name="android:icon">@android:color/transparent</item> <item name="android:centerX">@android:integer/config_shortAnimTime</item> <item name="windowActionBar">false</item> </style> <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:textColor">@color/material_white</item> <item name="android:popupMenuStyle">@style/CustomOverflowBack</item> <item name="android:itemTextAppearance">@android:color/white</item> </style> 

manifest:

 <application android:name=".MyApplication" android:allowBackup="true" android:hardwareAccelerated="false" android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/AppTheme"> 

Any help is appreciated.

UPDATE: Adding CustomOverflowBack :

  <style name="CustomOverflowBack" parent="@android:style/Widget.Holo.Light.ListPopupWindow"> <item name="android:popupBackground">@drawable/menu_item</item> </style> 

Menu_item.xml

 <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape"> <stroke android:width="1dp" android:color="@color/material_dark_blue" /> <solid android:color="@color/actionbar_item_bg_color" /> </shape> 

Answer 1

Replace it

 <style name="toolbarButton"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:clickable">true</item> </style> <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse"> <item name="android:background">@color/material_dark_blue</item> <item name="android:displayOptions">showHome|homeAsUp|showTitle</item> <item name="android:icon">@android:color/transparent</item> <item name="android:centerX">@android:integer/config_shortAnimTime</item> <item name="windowActionBar">false</item> </style> <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:textColor">@color/material_white</item> <item name="android:popupMenuStyle">@style/CustomOverflowBack</item> <item name="android:itemTextAppearance">@android:color/white</item> </style> <style name="CustomOverflowBack" parent="@android:style/Widget.Holo.Light.ListPopupWindow"> <item name="android:popupBackground">@drawable/menu_item</item> </style> 

Wherein:

 <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <item name="actionBarPopupTheme">@style/AppThemeOverlay.Popup</item> </style> <style name="AppThemeOverlay.Popup" parent="ThemeOverlay.AppCompat.Dark"> <item name="android:colorBackground">popup menu background color</item> <item name="colorControlHighlight">selected item color</item> </style> 

Here's how you use it:

 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?actionBarSize" android:background="?colorPrimary" android:elevation="4dp" app:popupTheme="?actionBarPopupTheme"/> 

The above is enough to make it work with API 21 and above.

I left your toolbarButton style because it is not related to the problem.

Here are some tips.

 <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse"> 

Do not use platform styles for AppCompat widgets. If you used AppCompat @style/Widget.AppCompat.ActionBar , you will have to redefine almost none of the attributes.

 <item name="android:background">@color/material_dark_blue</item> 

The background in the theme will be applied to any view that does not cancel it. That is why you see a blue square. android:background - style attribute, use it for widgets. android:colorBackground is an attribute of the theme, and it used (among other things) the color of android:popupBackground , which provides a pop-up menu form.

 <item name="android:textColor">@color/material_white</item> 

Text color is again the style attribute used in TextViews. Commonly used theme attributes: android:textColorPrimary and android:textColorSecondary . Use them instead. android:textColor in the subject may lead to unexpected / unwanted results.

 <item name="android:itemTextAppearance">@android:color/white</item> 

DO NOT put the color resource in the style / text appearance attribute. This will not work or will not work or will not lead to unexpected results without failures.

Answer 2

@ Tom11 you will need to declare a custom style for the toolbar popup.

Create a style that extends ThemeOverlay:

 <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"> <item name="android:colorBackground">@color/colorPrimaryDark</item> <item name="colorControlHighlight">@color/colorAccent</item> </style> 

In the style above, replace @ color / colorPrimaryDark with the background color and @colorAcent with the selected background color.

Then use it in the toolbar declaration.

 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" style="@style/toolbarButton" app:popupTheme="@style/AppTheme.PopupOverlay"/> 

This will fix your problem.

Update: Make the following changes:

• Change android:background="?attr/colorPrimary" to android:background="@color/material_dark_blue" with the background color of the action bar in the toolbar item.

• Remove <item name="android:background">@color/material_dark_blue</item> from your MyActionBar style.

Thus, the updated code for the toolbar and MyActionBar style will look like this:

  <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/material_dark_blue" style="@style/toolbarButton" app:popupTheme="@style/AppTheme.PopupOverlay" app:theme="@style/MyActionBar"/> <style name="MyActionBar" parent="Widget.AppCompat.ActionBar"> <item name="android:displayOptions">showHome|homeAsUp|showTitle</item> <item name="android:icon">@android:color/transparent</item> <item name="android:centerX">@android:integer/config_shortAnimTime</item> <item name="windowActionBar">false</item> </style> 

This should finally work.