버튼을 클릭 할 때 원형 잔물결을 만드는 방법은 무엇입니까?

배경

Android의 다이얼러 앱에서 검색을 시작하고 EditText 왼쪽에있는 화살표 버튼을 클릭하면 원형 파급 효과가 나타납니다.

문제

나도 그것을 시도했지만 직사각형이 있습니다.

    <ImageButton
        android:id="@+id/navButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/search_ic_back_arrow"/>

질문

버튼을 클릭 할 때 원형 잔물결 효과를 내려면 어떻게해야합니까? 새로운 드로어 블을 만들어야합니까, 아니면이를위한 내장 방식이 있습니까?

이미 배경 이미지가있는 경우 selectableItemBackgroundBorderless에 가깝게 보이는 잔물결의 예는 다음과 같습니다.

            <ImageButton
                android:id="@+id/btn_show_filter_dialog"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/ic_filter_state"/>

ic_filter_state.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/state_pressed_ripple"/>
    <item
        android:state_enabled="true"
        android:drawable="@drawable/ic_filter" />
</selector>

state_pressed_ripple.xml : (흰색 배경에 10 %로 설정된 불투명도) 1AFFFFFF

 <?xml version="1.0" encoding="UTF-8"?>    
    <ripple xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="oval">
                <solid android:color="#1AFFFFFF"/>
            </shape>
            <color android:color="#FFF"/>
        </item>
    </ripple>

AppCompat 테마를 사용하는 경우보기의 배경을 다음과 같이 설정할 수 있습니다.

android:background="?selectableItemBackgroundBorderless"

21 이상에는 원형 잔물결이 추가되고 21 이하에는 사각형 배경이 추가됩니다.

둥근 물결 효과가있는 또 다른 속성, 특히 작업 표시 줄 :

android:background="?actionBarItemBackground"

UPD : 리플 색상은 다음 속성으로 변경할 수 있습니다.

<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>

그러나이 속성은 모든 기본 잔물결 효과에 적용됩니다.

잔물결 드로어 블을 배경으로 만들고 설정합니다. 이 같은.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>

이 배경을보기에 추가하기 만하면됩니다.

android:background=?android:attr/actionBarItemBackground

android:radiusxml의 ​​속성을 사용하여 원 리플 드로어 블을 만들 수 있습니다 .

예:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your_color"
    android:radius="your_radius" />

주의하십시오, 당신의 그 your_radius미만 뷰의 폭과 높이를해야한다. 예를 들어, 뷰가있는 경우 크기 60dp x 60dp your_radius가 가까워 야합니다 30dp(너비 / 2 또는 높이 / 2).

Android 5.0 이상에서 작동합니다.

보다 일반적인 XML 파일을 원하면 두 개의 파일이 있습니다.

1) btn_ripple_background 코드 :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_pressed="true"
    android:state_enabled="true"
    android:drawable="@drawable/ripple_circular_shape"/>
</selector>

2) 코드가있는 ripple_circuler_shape :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/btn_state_pressed_text_color"
    android:shape="oval">
    <solid android:color="@color/btn_state_pressed_text_color" />
</shape>

마지막으로 사용법 :android:foreground="@drawable/ripple_btn_background"

시험:

android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"

원 경계를 넘지 않는 잔물결 효과를 원한다면이 코드를 확인할 수 있습니다. 그것은 나를 위해 완벽하게 작동합니다. ripple_blue.xml에 id = @ android : id / mask를 제공해야합니다.

<ImageButton
    android:id="@+id/send_password_to_mail_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_blue"
    android:src="@drawable/ic_filter" />

ripple_blue.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorRipple">

    <item android:id="@android:id/mask">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

    <item android:id="@android:id/background">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

</ripple>

color.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="colorWindowBackground">#F2F5FC</color>
    <color name="colorRipple">#0288d1</color>
</resources>

이 항목을

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

Kotlin / Java에서 다음을 수행 할 수 있습니다.

fun View.applyCircularRippleEffect() {
    val backgroundResId = context.getResource(android.R.attr.actionBarItemBackground)

    if (backgroundResId != 0) {
        setBackgroundResource(backgroundResId)
        isClickable = true
        isFocusable = true
    }
}

// getResource extension
fun Context.getResource(resourceId: Int): Int {
    val out = TypedValue()
    theme.resolveAttribute(resourceId, out, true)

    return out.resourceId
}