Ripple Effect On Toolbar Cut Off

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

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

<stylename="MyTheme.Overlay"parent="ThemeOverlay.AppCompat.Dark.ActionBar"><itemname="android:textColorPrimary">@color/text_primary</item><itemname="android:textColorSecondary">@color/text_secondary</item><itemname="android:windowBackground">@color/background</item><!--<item name="android:background">@color/toolbar</item>--><!-- colorPrimary is used for the default action bar background --><itemname="colorPrimary">@color/toolbar</item><!-- colorPrimaryDark is used for the status bar --><itemname="colorPrimaryDark">@color/toolbar</item><!-- colorAccent is used as the default value for colorControlActivated,
     which is used to tint widgets --><itemname="colorAccent">@color/accent</item></style>

Solution 2:

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

<android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/toolbar"><ImageButtonandroid: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