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

фон

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

вопрос

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

5 73
android back-button rippledrawable

5 ответов:

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

201

создать и установить пульсацию drawable в качестве фона. Что-то вроде этого. 

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

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

android:background="?actionBarItemBackground"
14

вы можете создать круг рябь drawable с помощью 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 60dpyour_radius должна быть возле 30dp (ширина / 2 или высота / 2).

работает на Android 5.0 и выше.

9