Android widget ripple background when clicked

Question

How can I get a button on a WIDGET on Android to display the Material ripple when clicked?

<LinearLayout
    android:id="@+id/button_power"
    style="@style/MyStyle">
    <ImageView
        android:id="@+id/image_view_power"
        android:layout_width="@dimen/widget_button_image_size"
        android:layout_height="@dimen/widget_button_image_size"
        android:layout_gravity="center_horizontal"
        android:contentDescription="power"
        android:src="@drawable/baseline_power_settings_new_24"
        android:tint="@color/primary_text" />

    <TextView
        android:id="@+id/text_view_power"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="On"
        android:textColor="@color/primary_text"
        android:textSize="@dimen/widget_button_text_size" />
</LinearLayout>

style.xml

<style name="MyStyle" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="android:layout_width">@dimen/button_height</item>
    <item name="android:layout_height">@dimen/button_height</item>
    <item name="android:minHeight">0dp</item>
    <item name="android:padding">8dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:drawablePadding">0dp</item>
    <item name="android:background">@color/white_pressed</item>
    <item name="android:clickable">true</item>
    <item name="android:focusable">true</item>
    <item name="android:orientation">vertical</item>
</style>

Above shows how I'm using a linear layout to represent a clickable button for the widget. It also includes the style details.

I tried adding the line

android:background="?attr/selectableItemBackground"

to the LinearLayout but got an error on the widget which stated "Problem loading widget". The problem also occurred if I moved the attribute to the style itself.

It looks like what I want to achieve is possible since the Google Drive widget on Android has this effect. How is this done?

Thank you!

Follow this answer and your problem will be solved. [How to create ripple effect in simple layout](https://stackoverflow.com/a/46680254/4629101) — Pankaj Lilan, Jun 15 '18 at 05:32

score 2 · Answer 1 · answered Jun 15 '18 at 04:24

2

Add these attribute to your LinearLayout

    android:clickable="true"
    android:focusable="true"
    android:foreground="?android:attr/selectableItemBackground"

Note: This will not work below lollipop.

answered Jun 15 '18 at 04:24

Gaurav Kumar

834
1
6
14

score 1 · Answer 2 · answered Dec 26 '21 at 15:14

1

I was using

android:background="?selectableItemBackground"

issue was solved after using,

android:background="?android:attr/selectableItemBackground"

answered Dec 26 '21 at 15:14

Omkar T

755
8
19

score 0 · Answer 3 · answered Jun 25 '19 at 17:11

You can make a ripple drawable:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimary">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
</ripple>

Then set this drawable as a background of your layout

Android widget ripple background when clicked

3 Answers3