material-components / material-components/material-components-android

[Button] Double ripple with icon buttons in 1.7.0-alpha03

Open
#2,833 25 comments 3 reactions 1 assignee View on GitHub

@raajkumars is already working on this.

Since Jul 19, 2022.

bug Need more info Widget: Button
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

Description: When I use my custom Icon Button style in 1.7.0-alpha03, a strange behavior occurs where two ripples appear. One ripple will appear where I touch (expected behavior), but another will appear in the center.

Here is a demonstration in the catalog (with the tonal button modified to use my style and without the icon to see the ripple clearer):

https://user-images.githubusercontent.com/65370175/179551670-4bf8769c-0611-4bcd-9cb0-438534dad11d.mp4

Here is a close-up of the two ripples to show that I'm not just seeing things:

image

This was seemingly introduced by the update to AppCompat 1.5.0-beta01 in e968929c08228f475f0f09c302da437a97180284. Re-compiling the project with AppCompat 1.4.0 solves the issue.

Expected behavior: Only one ripple should appear at the point where I pressed the button.

Source code: I use this style for my button

<style name="Widget.Auxio.Button.PlayPause" parent="Widget.Material3.Button.IconButton.Filled.Tonal">
    <item name="android:minWidth">72dp</item>
    <item name="android:minHeight">72dpitem>
    <item name="iconSize">32dpitem>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:insetLeft">0dp</item>
    <item name="android:insetRight">0dp</item>
    <item name="android:paddingStart">12dp<item>
    <item name="android:paddingEnd">12dp<item>
    <item name="android:paddingTop">12dp<item>
    <item name="android:paddingBottom">12dp</item>
    <item name="shapeAppearanceOverlay">
        @style/ShapeAppearanceOverlay.Material3.FloatingActionButton
    </item>
</style>

Android API version: Any API version

Material Library version: 1.7.0-alpha03

Device: OnePlus 7T on Android 11. Probably also happens on Android 12+, but I can't completely tell due to the new ripple style.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.