How to styling MenuItems Toolbar when pressed

2.3k views Asked by At

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?

2

There are 2 answers

4
Tejas Sherdiwala On BEST ANSWER

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

0
Abhinav Puri On

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 ...
  }