ImageView selectableItemBackgroundBorderless is not out of scope

I use selectableItemBackgroundBorderlessto add ripple to ImageView. My expected behavior would be to have a circular ripple, increasing the size of the views. Unfortunately, ripples are clipped by the boundaries of the view. How to solve this problem?

The default state is:

default state

Pressed state:

cropped ripples

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nav_instruction_container"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/nav_gradient_bg"
    android:padding="20dp">
    <ImageView
        android:id="@+id/nav_sign"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_centerVertical="true"
        android:scaleType="centerInside"
        android:adjustViewBounds="true"
        />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/nav_sign"
        android:layout_marginLeft="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginEnd="24dp"
        android:textColor="@color/white"
        android:textSize="24sp"
        android:textStyle="bold"
        android:maxLines="2"
        tools:text="A644 Shudehill asdfkjasdf asdfasdf asdfsss"
        android:ellipsize="marquee"
        />

    <TextView
        android:id="@+id/subTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:layout_toRightOf="@+id/nav_sign"
        android:layout_marginLeft="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginEnd="24dp"
        android:textColor="@color/white"
        android:textSize="17sp"
        tools:text="via Church St"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        app:srcCompat="@drawable/ic_nav_queue_sheet_icon_light"
        android:id="@+id/nav_queue"
        android:scaleType="centerInside"
        android:foreground="?attr/selectableItemBackgroundBorderless"
        android:adjustViewBounds="true"/>
</RelativeLayout>
+4
source share
5 answers

If you have clickable ImageView, then most likely it should be ImageButton.

Having defined the following ImageButton:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackgroundBorderless"
    app:srcCompat="@drawable/ic_navigation_black_24dp" />

Then you get the following output:

EIcvo.gif

If you need a larger ripple effect, you need to resize the image: instead, wrap_contentdo this, say 100dp:

enter image description here

+5

ripple_effect_circle.xml drawable

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#BDBDBD"
    >

    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <size
                android:width="60dp"
                android:height="60dp"/>
            <solid android:color="#BDBDBD" />
        </shape>
    </item>

</ripple>

ImageView

    <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_margin="60dp"
            android:src="@drawable/ripple_effect_circle"
            android:background="@drawable/your_round_image"
            />
+2

, ImageView 46dp padding ImageView

0

layerlist drawable xml selectableItemBackgroundBorderless

0
source

Source: https://habr.com/ru/post/1689894/


All Articles