Bir düğme tıklandığında üzerinde dairesel bir dalgalanma nasıl yapılır?

Arka fon

Android'in çevirici uygulamasında, bir şeyi aramaya başladığınızda ve EditText'in solundaki ok düğmesini tıkladığınızda, üzerinde dairesel bir dalgalanma efekti elde edersiniz:

Sorun

Ben de almayı denedim, ama bende dikdörtgen bir tane var:

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

Soru

Düğmenin tıklandığında dairesel bir dalgalanma etkisi olmasını nasıl sağlayabilirim? Yeni bir çekilebilir öğe oluşturmam gerekiyor mu yoksa bunun için yerleşik bir yol var mı?

Zaten bir arka plan resminiz varsa, aşağıda selectableItemBackgroundBorderless'a yakın görünen bir dalgalanma örneği verilmiştir:

            <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: (beyaz arka planda opaklık% 10'a ayarlandı) 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 temasını kullanıyorsanız, görünümün arka planını şu şekilde ayarlayabilirsiniz:

android:background="?selectableItemBackgroundBorderless"

Bu, 21 ve üzerinde dairesel dalgalanma ve 21'in altında kare arka plan ekleyecektir.

Özellikle hareket çubuğu için yuvarlak dalgalanma efektine sahip başka bir özellik:

android:background="?actionBarItemBackground"

UPD : Dalgalanma rengi şu öznitelikle değiştirilebilir:

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

Ancak, bu özelliğin tüm varsayılan dalga efektleri için geçerli olduğunu unutmayın.

Arka plan olarak bir dalgalanma çekilebilir oluşturun ve ayarlayın. Bunun gibi bir şey.

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

Sadece bu arka planı görünümünüze ekleyin

android:background=?android:attr/actionBarItemBackground

Xml'deki android:radiusözniteliği kullanarak daire dalgası çekilebilirliği oluşturabilirsiniz .

Misal:

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

your_radiusGörüş genişliğinizden ve yüksekliğinizden daha az olması gerektiğine dikkat edin . Örneğin: boyuta sahip görünümünüz varsa 60dp x 60dp your_radiusyakın olmalıdır 30dp(genişlik / 2 veya yükseklik / 2).

Android 5.0 ve sonraki sürümlerde çalışın.

Daha fazla genel XML dosyası istiyorsanız, iki dosyam var:

1) btn_ripple_background kodu ile:

<?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 kodu ile:

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

son olarak kullanım:android:foreground="@drawable/ripple_btn_background"

Daire sınırını geçmeyecek dalgalanma efekti istiyorsanız, bu kodu kontrol edebilirsiniz. Benim için mükemmel çalışıyor. Ripple_blue.xml'de id = @ android: id / mask vermeniz gerektiğini unutmayın.

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

Deneyin:

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

bu öğeyi sadece

           <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'da aşağıdakileri yapabilirsiniz

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
}