Эффект пульсации на кнопке Android

Опубликовано: 30 Ноября, 2021

Сенсорная обратная связь в Android является обязательной всякий раз, когда пользователь нажимает на элемент, или эффект пульсации кнопки при нажатии на то же самое, дает пользователю уверенность в том, что кнопка была нажата, чтобы он мог дождаться следующего взаимодействия с приложением. Итак, в этой статье мы собираемся обсудить, какие типы ряби можно реализовать и где их можно использовать. Взгляните на следующее изображение, чтобы получить представление о дискуссии.

Шаги по реализации пульсации кнопок (обратной связи при касании) в Android

Шаг 1. Создайте пустой проект действия

  • Создайте пустой проект Android Studio Activity. Обратитесь к Android | Как создать / запустить новый проект в Android Studio? чтобы узнать, как создать пустой проект Android Studio.

Шаг 2. Работа с файлом activity_main.xml

  • В основном макете приложения реализовано 4 TextView. один для обратной связи касания по умолчанию с рамкой, второй - для обратной связи касания по умолчанию без рамки, третий - для настраиваемой обратной связи при касании с рамкой, четвертый - для настраиваемой обратной связи при касании без рамки.
  • Вызовите следующий код для реализации пользовательского интерфейса.

XML

<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
xmlns:android = " http://schemas.android.com/apk/res/android "
xmlns:tools = " http://schemas.android.com/tools "
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
<!--default touch feedback with border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "64dp"
android:clickable = "true"
android:focusable = "true"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Ripple With Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
<!--default touch feedback without border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:clickable = "true"
android:focusable = "true"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Ripple Without Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
<!--custom touch feedback with border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:clickable = "true"
android:focusable = "true"
android:foregroundGravity = "bottom"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Custom Ripple With Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
<!--custom touch feedback without border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:clickable = "true"
android:focusable = "true"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Custom Ripple Without Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
</ LinearLayout >

Выходной интерфейс:

Шаг 3. Рябь по умолчанию в Android

  • Рябь по умолчанию в Android для кнопок или текстовых кнопок может быть достигнута с помощью тегов:
  • android:background=”?android:attr/selectableItemBackground”: this creates ripple effect with border.
  • android:background=”?android:attr/selectableItemBackgroundBorderless”: this creates ripple effect without border.

Note: These tags are need to be set under the TextView.

  • Чтобы реализовать оба эффекта пульсации по умолчанию в Android, вызовите следующий код внутри файла activity_main.xml.

XML

<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
xmlns:android = " http://schemas.android.com/apk/res/android "
xmlns:tools = " http://schemas.android.com/tools "
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
<!--default touch feedback with border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "64dp"
android:background = "?android:attr/selectableItemBackground"
android:clickable = "true"
android:focusable = "true"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Ripple With Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
<!--default touch feedback without border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:background = "?android:attr/selectableItemBackgroundBorderless"
android:clickable = "true"
android:focusable = "true"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Ripple Without Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
<!--custom touch feedback with border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:clickable = "true"
android:focusable = "true"
android:foregroundGravity = "bottom"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Custom Ripple With Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
<!--custom touch feedback without border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:clickable = "true"
android:focusable = "true"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Custom Ripple Without Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
</ LinearLayout >

Выход: запустить на эмуляторе

Шаг 4. Добавление пользовательских макетов

  • Они должны быть реализованы в папке с возможностью переноса. После реализации их необходимо установить в качестве фона для этих текстовых кнопок.
  • Чтобы добавить макеты, щелкните правой кнопкой мыши папку с возможностью рисования> новый> Файл ресурсов с возможностью рисования.
  • Первый макет - custom_bordered_ripple.xml и вызывает в нем следующий код.

XML

<? xml version = "1.0" encoding = "utf-8" ?>
< ripple xmlns:android = " http://schemas.android.com/apk/res/android "
android:color = "@color/colorAccent" >
<!--this creates the mask with the ripple effect-->
< item
android:id = "@+id/mask"
android:drawable = "@android:color/white" />
</ ripple >
  • Второй макет - custom_borderless_ripple.xml и вызывает следующий код.

XML

<? xml version = "1.0" encoding = "utf-8" ?>
< ripple xmlns:android = " http://schemas.android.com/apk/res/android "
android:color = "@color/colorAccent" >
</ ripple >
  • Следующим шагом является вызов этих настраиваемых макетов в качестве фона для кнопок Custom Ripple With Border и Custom Ripple Without Border внутри файла activity_main.xml.

XML

<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
xmlns:android = " http://schemas.android.com/apk/res/android "
xmlns:tools = " http://schemas.android.com/tools "
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
<!--default touch feedback with border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "64dp"
android:background = "?android:attr/selectableItemBackground"
android:clickable = "true"
android:focusable = "true"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Ripple With Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
<!--default touch feedback without border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:background = "?android:attr/selectableItemBackgroundBorderless"
android:clickable = "true"
android:focusable = "true"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Ripple Without Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
<!--custom touch feedback with border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:background = "@drawable/custom_bordered_ripple"
android:clickable = "true"
android:focusable = "true"
android:foregroundGravity = "bottom"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Custom Ripple With Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
<!--custom touch feedback without border-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:background = "@drawable/custom_borderless_ripple"
android:clickable = "true"
android:focusable = "true"
android:gravity = "center|start"
android:padding = "24dp"
android:text = "Custom Ripple Without Border"
android:textColor = "@android:color/black"
android:textSize = "18sp" />
</ LinearLayout >

Выход: запустить на эмуляторе

Хотите более динамичную и конкурентную среду для изучения основ Android?
Щелкните здесь, чтобы перейти к уникальному руководству, составленному нашими экспертами с целью мгновенно подготовить вашу отрасль!
Technical Scripter Android

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023
Проверьте, совпадает ли набор первых элементов X одного массива с набором первых элементов Y другого
27 Февраля, 2023
Подсчитать подстроки нечетной длины с медианой, такой же, как K-й символ строки
27 Февраля, 2023
Найти лексикографически первый идентификатор каждого домена из заданного массива идентификаторов электронной почты
27 Февраля, 2023
Найдите общее количество фигур 'X'
26 Февраля, 2023
Максимальное значение узла, которое может быть достигнуто с использованием данных соединений
26 Февраля, 2023