How to styling MenuItems Toolbar when pressed

Question

In KitKat, I have a styled options menu in a supported library toolbar defined as following

    <android.support.v7.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:gravity="center"
    android:background="?attr/colorPrimary"
    app:theme="@style/ToolbarText"
    app:popupTheme="@style/optionMenu" 
    />

where the optionMenu style is

<style name="optionMenu">
    <item name="android:textColor">@color/menu_text</item>  
    <item name="android:background">@color/menu_background</item>

</style>

It works as expected, but when i press a MenuItems, it doesn't take the "default grey" color in all available space, but only on the edges around the menu element whose background remains colored as defined in the style. My goal is not to change the style onpressed event, i wish only that the background behind the text looks like the whole rectangular button when pressed

Where am I wrong?

score 2 · Accepted Answer · answered Jun 24 '15 at 06:27

Finally after looking around in the default library for more than a day, I got it working under my application with the following tweaks:

Layout File

<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/ToolBarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/toolbar_color"
    android:minHeight="@dimen/abc_action_bar_default_height_material" />

Styles

 <style name="ToolBarStyle" parent="">
    <item name="android:elevation">@dimen/toolbar_elevation</item>
    <item name="popupTheme">@style/ItemMenuBackground</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

<style name="ItemMenuBackground" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:colorBackground">@android:color/white</item>
    <item name="listChoiceBackgroundIndicator">@android:color/white</item>
</style>

Under the @dimen/toolbar_elevation I have just mentioned "4dp" but that is not of concerns here. With the <item name="android:colorBackground"> I was able to set the normal background and with the <item name="listChoiceBackgroundIndicator"> I was able to set the on-pressed background of the menu items.

I hope this is of help

Do you know perhaps how to do it for the normal action menu items? Currently, when using style "ThemeOverlay.AppCompat.Dark.ActionBar", it sets the background selector to be white-ish ripple on Lollipop and above. — android developer, Dec 10 '15 at 14:48
@androiddeveloper , I am not sure as the question imposed was not for a material design. But I think that a drawable resource might do that trick. Basically you need to replace the color resource with a drawable resource for the ripple effect. Also be sure to include drawable for pre-lollypop devices. The link http://stackoverflow.com/a/26686433/1161911 might be helpful. — Tejas Sherdiwala, Dec 12 '15 at 07:51
Nice. Could be useful. Did you try it? But how do I set it to the toolbar? — android developer, Dec 12 '15 at 10:05
@androiddeveloper Yes I have tried it in my project and it worked like charm. I have already added "ToolBarStyle" in the Toolbar element using the style attribute. — Tejas Sherdiwala, Jan 23 '16 at 04:44

score 0 · Answer 2 · answered Dec 19 '14 at 18:40

Add your own menu buttons and style them accordingly, below is an example of how to do this :

<android.support.v7.widget.Toolbar
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/toolbar"
   android:minHeight="?attr/actionBarSize"
   android:layout_height="?attr/actionBarSize"
   android:layout_width="match_parent">

   <!-- this adds a button at the center of the toolbar -->
   <ImageButton
       android:id="@+id/button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:onClick="buttonHandler"
       android:src="@drawable/ic_launcher"
       android:background="@drawable/backgroundStates"
       android:layout_gravity="center"/>

</android.support.v7.widget.Toolbar>

Now, in your drawable resource, add the file named backgroundStates.xml with following content :

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true" android:drawable="@android:color/holo_blue_light"/>
     <item  android:drawable="@android:color/darker_gray" />
 </selector>

The above will change the color from grey to holo_blue_light whenever someone clicks on your defined button in the toolbar.

Now, create a function in your activity to handle onClicks over the defined button :

 public void buttonHandler(View v){

  // Do stuf you want that should happen on button pressed, you may want to inflate a list view or other stuff ...
  }

How to styling MenuItems Toolbar when pressed

2 Answers2