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

Bug with the ripple effect in widgets

Open
#4,254 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Issue: Other
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

**Description:**
The ripple effects of: a menu in the top app bar, a list item in a drop-down menu, single-choice or multi-choice items in a Material 3 dialog and a ListView - don't start from the location of the touch properly. This problem has been sickening for years at this point.

In the Steps to reproduce section I've only listed the steps for a menu in the toolbar as an example, but in the sample app attached, other components affected by this issue are there as well.

> [!IMPORTANT]
> Jetpack Compose must not be used to reproduce this bug, as this issue isn't present in it. Instead, use any version of the library provided by this repository (Material Components for Android).

**Steps to reproduce:**
1. Create a new project in Android Studio.
2. Import all the dependencies required for Material 3 support.
3. Add a menu to the app's toolbar. (Add a Toolbar first if it isn't there already)
4. Add items to the menu.
5. Compile and run the app.
6. Touch and hold an item at the left or right side of the item in the menu (make sure the menu doesn't go away)
* At first, the ripple starts from the center of the item, even though you touched it at the left or right side.
7. Touch and hold the same item again at the opposite side of the item.
* Then, from where you touched the item last time, the ripple will start from there.
8. Touch and hold the same item once again at the next opposite side of the item.
* Then, from where you touched the item last time, the ripple will start from there.

**Expected behavior:**
The ripple should start from the location of the touch everytime, not from a completely different location.

**Minimal sample app repro:**
Here's a ZIP file which contains the source code of an app which lets you reproduce the issue in all the components with the bug.
![Bug_Demo.zip](https://github.com/user-attachments/files/16529584/Bug_Demo.zip)

**Material Library version:**
Happens with any version of this library.

**Device:**
Any Android device.

**Additional context:**
In the drop-down menu present in the provided app, the ripple is even weirder. The ripple first starts from the correct location, then starts only from the center if the same item is touched repeatedly, no matter whether you touch it from the far left or right.

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.

Research direction

Start by downloading and running the attached Bug_Demo.zip sample app, then reproduce the ripple behavior in the toolbar menu and compare it with the dropdown menu, Material 3 dialog items, and ListView. Trace the affected Material Components for Android UI paths from those entry points. Done means each ripple begins at the current touch location on every interaction.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, java
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.