วิธีสร้างระลอกวงกลมบนปุ่มเมื่อมีการคลิก?

พื้นหลัง

ในแอปโทรออกของ 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:radiusแอตทริบิวต์ใน xml

ตัวอย่าง:

<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"

หากคุณต้องการเอฟเฟกต์ระลอกคลื่นซึ่งจะไม่ข้ามขอบเขตวงกลมคุณสามารถตรวจสอบรหัสนี้ได้ มันเหมาะสำหรับฉันอย่างสมบูรณ์แบบ จำไว้ว่าคุณต้องให้ id = @ android: id / mask ใน ripple_blue.xml

<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>

ลอง:

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

เพียงเพิ่มรายการนี้ในไฟล์

           <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
}