How to create ripple effect in simple layout
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
Introduction
On Android, a ripple effect is the standard touch feedback used in Material-style interfaces. If you want that effect on a simple layout, the important detail is that the layout must be touchable and must use a ripple-capable background or foreground. In most cases, you do not need a custom animation at all. The platform already provides the effect.
The Easiest Android Approach
For a layout such as LinearLayout, FrameLayout, or ConstraintLayout, the simplest option is to use a selectable ripple drawable from the current theme.
This works because:
- '
clickablemakes the layout react to touch' - '
focusablehelps with keyboard and accessibility behavior' - '
?attr/selectableItemBackgroundresolves to a ripple-aware drawable on supported themes'
For a borderless ripple, use:
That style is common for icon-like touch targets.
Using foreground for Better Layering
If your layout already has a background color or shape, applying the ripple as the background can overwrite it. In that case, use android:foreground on a compatible container.
This keeps your normal background while drawing the ripple above it.
Custom Ripple Color
If you want more control, define your own ripple drawable in XML.
Create a file such as res/drawable/custom_ripple.xml:
Then apply it:
This is useful when you need a rounded ripple or a specific base shape.
Handling Clicks in Code
The ripple only provides feedback. You still need click logic.
If the view is not actually clickable, the ripple may not appear consistently. That is why the XML flags matter even if you are wiring the listener in Kotlin or Java.
Version and Theme Considerations
Native RippleDrawable support exists on modern Android versions, but the exact appearance depends on theme attributes and the widget tree. If you are using Material Components, many ready-made components already include ripple behavior. In those cases, adding another ripple layer manually can make the effect look wrong or duplicated.
For list rows, buttons, cards, and chips, prefer the framework or Material component's built-in ripple before reaching for custom animation code.
Common Pitfalls
The most common mistake is setting a ripple drawable on a layout that is not clickable. The view looks configured, but no touch feedback appears.
Another mistake is replacing a carefully designed background with selectableItemBackground when the ripple should really be drawn as the foreground.
Developers also sometimes write a fully custom animation for something Android already provides natively. That adds complexity and often behaves worse than the platform ripple.
Finally, be careful with nested clickable views. If a child consumes the touch event first, the parent layout may not show the ripple you expected.
Summary
- On Android, the easiest ripple effect usually comes from
?attr/selectableItemBackground. - Make the layout clickable and focusable so touch feedback actually appears.
- Use
foregroundwhen you need to preserve an existing background. - Create a custom ripple drawable only when you need custom color or shape behavior.
- Let the platform or Material components handle ripple behavior whenever possible.

