Ripple effect on Toolbar cut off

Question

I'm using a Toolbar in my app and am inflating it with a menu. I have a issue here because the ripple effect is automatically added to the button but the left most button's ripple effect is cut off by the boundary of the menu area.
You can see the ripple expand but it is then but off on the left side.
Any idea how to remedy this issue?

Answer 1

I came across this too, after playing around I found our custom ThemeOverlay had its background set.

Try removing android:background from your Toolbar style and theme.

See below I commented out: <item name="android:background">@color/toolbar</item>. It works as expected after that.

<style name="MyTheme.Overlay"
  parent="ThemeOverlay.AppCompat.Dark.ActionBar">
  <item name="android:textColorPrimary">@color/text_primary</item>
  <item name="android:textColorSecondary">@color/text_secondary</item>
  <item name="android:windowBackground">@color/background</item>

  <!--<item name="android:background">@color/toolbar</item>-->

  <!-- colorPrimary is used for the default action bar background -->
  <item name="colorPrimary">@color/toolbar</item>

  <!-- colorPrimaryDark is used for the status bar -->
  <item name="colorPrimaryDark">@color/toolbar</item>

  <!-- colorAccent is used as the default value for colorControlActivated,
     which is used to tint widgets -->
  <item name="colorAccent">@color/accent</item>

</style>

Answer 2

The easiest way is to add button in toolbar like a simple view, for example:

<android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/toolbar"> 

<ImageButton 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="ICON HERE"
        android:background="@null"/>

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

android:background="@null"

it will disable the ripple effect from the button