CODEWITHSUNDEEP
androidimageviewripple
dabo248
dabo248

Reputation: 3437

Android ripple effect overlapped by imageView / GIF

I've got a list item in a recycle view and I want to get the ripple effect all over the element - currently my GIF is overlapping the ripple. I don't know how to fix this, already tried a lot of ways after researching, but nothing worked.

example of the non working ripple effect

Here is the specific XML file on which basis I build each list item.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@drawable/selector"
android:clickable="false">

<pl.droidsonroids.gif.GifTextView
    android:layout_width="84dp"
    android:layout_height="84dp"
    android:paddingTop="3dp"
    android:paddingBottom="3dp"
    android:paddingRight="1dp"
    android:paddingLeft="1dp"
    android:background="@drawable/a_present_for_you"
    />

<TextView
    android:id="@+id/textView"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:textColor="@color/black"
    android:textSize="16sp"
    android:gravity="center_vertical"
    android:drawableRight="@drawable/ic_lock_open_blue_24dp"
    android:drawablePadding="16dp">
</TextView>

</LinearLayout>

Any ideas?

Upvotes: 1

Views: 3164

Answers (3)

Shubhakar
Shubhakar

Reputation: 11

Just use these following attributes:-

android:background="?attr/selectableItemBackground" for simple ripple effect. For circular ripple effect use android:background="?attr/selectableItemBackgroundBorderless"

inside the main root.

Upvotes: 1

Nari Kim Shin
Nari Kim Shin

Reputation: 2499

How about using FrameLayout? Wrap those two elements with FrameLayout instead of LinearLayout, and set android:foreground of this layout with your custom selector.

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:foreground="@drawable/selector">

<pl.droidsonroids.gif.GifTextView
android:layout_width="84dp"
android:layout_height="84dp"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:paddingRight="1dp"
android:paddingLeft="1dp"
android:background="@drawable/a_present_for_you"
/>

<TextView
android:id="@+id/textView"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="@color/black"
android:textSize="16sp"
android:gravity="center_vertical"
android:drawableRight="@drawable/ic_lock_open_blue_24dp"
android:drawablePadding="16dp">
</TextView>

</FrameLayout>

Upvotes: 5

Mateus Brandao
Mateus Brandao

Reputation: 900

The Ripple effect isn't propagating becouse you have two different backgrounds in the same LinearLayout. What you can try to do, is set the ripple effect to the whole LinearLayout.

Upvotes: 0

Related Questions