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

Answer 1

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

Answer 2

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>