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

122

Задний план

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

Вопрос

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

разработчик Android
источник
2
github.com/traex/RippleEffect попробуйте это
Быстрый обучающийся
возможный ответ здесь stackoverflow.com/questions/33477025/…
Амриш Какадия
1
Подумайте о том, чтобы изменить выбранный ответ на ответ с наибольшим количеством голосов, поскольку это фактически решает проблему
Джефф Баргер,
@JeffBarger Почему? Оба работают нормально. Между ними нет никого лучше.
разработчик Android

Ответы:

18

Если у вас уже есть фоновое изображение, вот пример ряби, которая похожа на 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>
живи любя
источник
290

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

android:background="?selectableItemBackgroundBorderless"

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

связь
источник
Ницца. Могу ли я как-нибудь установить его цвет?
разработчик Android
4
в API 23 фон «вверх» кажется вдвое меньше по сравнению с selectbleItemBackgroundBorderless
snodnipper
3
Хороший, лучший ответ. ty
Скайуокер
1
@androiddeveloper, цвет можно установить, установив colorControlHighlight, как показано ниже, в вашем файле styles.xml <item name = "colorControlHighlight"> # F00 </item>
bond
4
Если вы используете его внутри других макетов, вам может потребоваться android:clipChildren="false"и макеты, чтобы анимация могла распространяться.
Tanasis
83

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

android:background="?actionBarItemBackground"

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

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

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

Anrimian
источник
Любой способ настроить это? Например цвет? Может что-нибудь в стилях? Или даже более конкретно в самом теге XML представления?
разработчик Android
Не знаю, сегодня я решил эту проблему, и ответы выше не помогли мне. Я предполагаю, что цвет можно настраивать в стилях, но определенно не в представлении.
Anrimian
1
Я ищу именно тот эффект. Кстати, не могли бы вы упомянуть, где найти этот атрибут, он вроде не документирован.
Джек Ван,
2
Отвечает на вопрос ОП. Должен быть отмечен как лучший ответ. +1
Corbella
2
@MeysamHadigheh ?- это ярлык для?attr/
musooff
47

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

<?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>
Томас Р.
источник
Это что-то в моем коде. Вы можете использовать свои цвета :)
Томас Р.
Как мне использовать селектор по умолчанию, если он находится на предварительном Lollipop? Кроме того, он использует те же цвета, что и на номеронабирателе?
разработчик Android
2
Вы можете поместить рябь в папку drawables-v21. А для pre L используйте простое состояние drawable. Используйте то же имя файла и поместите его в папку для рисования (по умолчанию).
Томас Р.
2
Вы также можете создать стиль. В папке values-v21 создайте новый стиль и установите рисование ряби в качестве фона. А для pre L, то есть в папке значений styles.xml поместите в качестве фона атрибут «selectableItemBackground» для того же стиля.
Томас Р.
1
Если вам нужен такой же цвет пульсации, что и у других эффектов пульсации по умолчанию, используемых в приложении, используйте в качестве цвета «? Attr / colorControlHighlight».
alexbchr
27

Просто добавьте этот фон к вашему просмотру

android:background=?android:attr/actionBarItemBackground

Дипакк Шарма
источник
19

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

Владимир Яцыкив
источник
3

Если вам нужны более общие 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"

100RaBH
источник
2

Если вам нужен эффект ряби, который не пересекает границу круга, вы можете проверить этот код. У меня это работает идеально. Просто помните, вы должны указать 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>
Аминул Хак Аоме
источник
1

Пытаться:

android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"
duduCMT
источник
1
Пожалуйста, не публикуйте только код в качестве ответа, но включите объяснение, что делает ваш код и как он решает проблему вопроса. Ответы с объяснением, как правило, более качественные и с большей вероятностью получат положительные отзывы.
Марк Роттевил
Более плавный, чем установка actionBarItemBackground в качестве фона. Но все же не совсем то же самое, что и сама анимация панели действий.
coolcool1994
1

просто добавьте этот элемент в свой

           <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" />
Али Эслами
источник
1
Кажется идентичным этому: stackoverflow.com/a/54440773/878126 .
разработчик Android
0

В 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
}
mihails.kuzmins
источник
context.getResource not found
Рахул Мандалия
@RahulMandaliya спасибо за комментарий. Мое плохое, это был мой собственный метод расширения. Добавил в ответ
mihails.kuzmins