UI design
ripple effect
animation
Android development
layout design

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.

xml
1<LinearLayout
2    xmlns:android="http://schemas.android.com/apk/res/android"
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content"
5    android:clickable="true"
6    android:focusable="true"
7    android:padding="16dp"
8    android:background="?attr/selectableItemBackground">
9
10    <TextView
11        android:layout_width="wrap_content"
12        android:layout_height="wrap_content"
13        android:text="Tap me" />
14
15</LinearLayout>

This works because:

  • 'clickable makes the layout react to touch'
  • 'focusable helps with keyboard and accessibility behavior'
  • '?attr/selectableItemBackground resolves to a ripple-aware drawable on supported themes'

For a borderless ripple, use:

xml
android:background="?attr/selectableItemBackgroundBorderless"

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.

xml
1<FrameLayout
2    xmlns:android="http://schemas.android.com/apk/res/android"
3    android:layout_width="match_parent"
4    android:layout_height="72dp"
5    android:background="@color/cardBackground"
6    android:foreground="?attr/selectableItemBackground"
7    android:clickable="true"
8    android:focusable="true"
9    android:padding="16dp">
10
11    <TextView
12        android:layout_width="wrap_content"
13        android:layout_height="wrap_content"
14        android:text="Settings" />
15
16</FrameLayout>

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:

xml
1<?xml version="1.0" encoding="utf-8"?>
2<ripple xmlns:android="http://schemas.android.com/apk/res/android"
3    android:color="@color/rippleColor">
4
5    <item>
6        <shape android:shape="rectangle">
7            <solid android:color="@android:color/white" />
8            <corners android:radius="12dp" />
9        </shape>
10    </item>
11</ripple>

Then apply it:

xml
1<LinearLayout
2    android:layout_width="match_parent"
3    android:layout_height="wrap_content"
4    android:background="@drawable/custom_ripple"
5    android:clickable="true"
6    android:focusable="true"
7    android:padding="16dp" />

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.

kotlin
1val row = findViewById<LinearLayout>(R.id.settingsRow)
2row.setOnClickListener {
3    println("Row tapped")
4}

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 foreground when 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.

Course illustration
Course illustration

All Rights Reserved.