Как сделать круговую пульсацию на кнопке при нажатии?

Фон

В приложении дозвона 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"/>

Вопрос

Как сделать кнопку при круговом пульсации нажатием кнопки? Должен ли я создавать новый чертеж или есть встроенный способ для этого?

Ответы

Ответ 1

Если у вас уже есть фоновое изображение, вот пример ряби, который выглядит близко к 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>

Ответ 2

Если вы используете тему AppCompat, то вы можете установить фон представления как:

android:background="?selectableItemBackgroundBorderless"

Это добавит круговую пульсацию 21 и выше и квадратный фон ниже 21.

Ответ 3

Еще один атрибут с эффектом круглой ряби, специально для панели действий:

android:background="?actionBarItemBackground"

UPD: цвет пульсации можно изменить с помощью этого атрибута:

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

Но имейте в виду, этот атрибут применяется ко всем стандартным волновым эффектам.

Ответ 4

Создайте и установите рябь в качестве фона. Что-то вроде этого.

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

Ответ 5

Вы можете создать круглую рябь, используя атрибут 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 и выше.

Ответ 6

Просто добавьте этот фон к вашему представлению "android:background=?android:attr/actionBarItemBackground"

Ответ 7

Если вы хотите более общие файлы 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"