Добавить эффект ряби к моей кнопке с цветом фона кнопки?
Я создал кнопку, и я хочу добавить эффект ряби к этой кнопке!
Я создал кнопку bg XML-файл: (bg_btn.xml)
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
И это мой файл с волновым эффектом: (ripple_bg.xml)
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#f816a463"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f816a463" />
</shape>
</item>
</ripple>
И это моя кнопка, которую я хочу добавить волновой эффект:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="173dp"
android:textColor="#fff"
android:background="@drawable/ripple_bg"
android:clickable="true" />
Но после добавления эффекта ряби фон кнопки становится прозрачным, и кнопка отображается только при нажатии, например:
Перед кликом
По щелчку
Но мне нужен и цвет фона кнопки, и эффект ряби, я нашел этот код в разных блогах Stack Overflow, но все равно он не работает!
15 ответов
Вот еще один нарисованный xml для тех, кто хочет добавить все вместе градиентный фон, радиус угла и эффект ряби:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorPrimaryDark">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimaryDark" />
<corners android:radius="@dimen/button_radius_large" />
</shape>
</item>
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="@color/colorPrimaryLight"
android:startColor="@color/colorPrimary"
android:type="linear" />
<corners android:radius="@dimen/button_radius_large" />
</shape>
</item>
</ripple>
Добавьте это к фону вашей кнопки.
<Button
...
android:background="@drawable/button_background" />
Добавить "?attr/selectableItemBackground"
по вашему мнению foreground
атрибут, если он уже имеет фон вместе с android:clickable="true"
Добавить эффект ряби / анимацию на кнопку Android
Просто замените свой фоновый атрибут кнопки на android:background="? Attr/selectableItemBackground", и ваш код будет выглядеть следующим образом.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:text="New Button" />
Еще один способ добавить эффект ряби / анимацию на кнопку Android
Используя этот метод, вы можете настроить цвет волнового эффекта. Во-первых, вам нужно создать XML-файл в каталоге доступных для рисования ресурсов. Создайте файл ripple_effect.xml и добавьте следующий код.Рез / рисуем / ripple_effect.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#f816a463"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f816a463" />
</shape>
</item>
</ripple>
И установить фон кнопки выше нарисованного файла ресурсов
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/ripple_effect"
android:padding="16dp"
android:text="New Button" />
В дополнение к решению Jigar Patel, добавьте это в ripple.xml, чтобы избежать прозрачного фона кнопок.
<item
android:id="@android:id/background"
android:drawable="@color/your-color" />
Полный XML:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/your-color"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="@color/your-color" />
</shape>
</item>
<item
android:id="@android:id/background"
android:drawable="@color/your-color" />
</ripple>
Используйте этот ripple.xml в качестве фона для вашей кнопки:
android:background="@drawable/ripple"
Когда у кнопки есть фон от нарисованного объекта, мы можем добавить волновой эффект к параметру переднего плана. Проверьте ниже код, работает ли он для моей кнопки с другим фоном
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:gravity="center"
android:layout_centerHorizontal="true"
android:background="@drawable/shape_login_button"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:text="@string/action_button_login"
/>
Добавьте ниже параметр для волнового эффекта
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
Для справки см. Ссылку ниже https://madoverandroid.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/
AppCompat v7+
Если вы не префикс с
?android:
Ваше приложение будет зависать.
Вы должны использовать "?android:attr/selectableItemBackground"
или же "?android:attr/selectableItemBackgroundBorderless"
, исходя из ваших предпочтений. я предпочитаю Borderless
,
Вы можете положить его либо в android:background
или же android:foreground
сохранить существующие свойства.
Элемент должен иметь android:clickable="true"
а также android:focusable="true"
для того, чтобы это работало, но многие элементы, такие как кнопки, имеют их true
по умолчанию.
<Button
...
android:background="@color/white"
android:foreground="?android:attr/selectableItemBackgroundBorderless"
/>
<TextView
...
android:background="?android:attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
/>
Простой подход - установить тему представления, как описано здесь.
some_view.xml
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:focusable="true"
android:src="@drawable/up_arrow"
android:theme="@style/SomeButtonTheme"/>
some_style.xml
<style name="SomeButtonTheme" >
<item name="colorControlHighlight">@color/someColor</item>
</style>
Добавление переднего плана и кликабельных атрибутов работало на меня.
<Button
...
android:background="@color/your_color"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true" />
В дополнение к Sudheesh R
Добавление эффекта ряби / анимации к кнопке Android с кнопкой прямоугольной формы с углом
Создайте xml-файл res/drawable/your_file_name.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorWhite"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimaryDark" />
<corners android:radius="50dp" />
</shape>
</item>
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="@color/colorAccent"
android:startColor="@color/colorPrimary"
android:type="linear" />
<corners android:radius="50dp" />
</shape>
</item>
</ripple>
Попробуй это
<Button
android:id="@+id/btn_location"
android:layout_width="121dp"
android:layout_height="38dp"
android:layout_gravity="center"
android:layout_marginBottom="24dp"
android:layout_marginTop="24dp"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:background="@drawable/btn_corner"
android:gravity="center_vertical|center_horizontal"
android:paddingLeft="13dp"
android:paddingRight="13dp"
android:text="Save"
android:textColor="@color/color_white" />
Когда вы используете android:background, вы заменяете большую часть стиля и внешнего вида кнопки пустым цветом.
Обновление: Начиная с версии 23.0.0 AppCompat, появился новый цветной стиль Widget.AppCompat.Button.A, который использует colorButtonNormal вашей темы для отключенного цвета и colorAccent для включенного цвета.
Это позволяет применить его к вашей кнопке напрямую через
<Button
...
style="@style/Widget.AppCompat.Button.Colored" />
Вы можете использовать drawable в вашем каталоге v21 для вашего фона, таких как:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>
Это обеспечит цвет вашего фона? Attr/colorPrimary и анимацию пульсации по умолчанию с использованием значения по умолчанию: attr / colorControlHighlight (которое вы также можете установить в своей теме, если хотите).
Примечание: вам придется создать пользовательский селектор для менее чем v21:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/primaryPressed" android:state_pressed="true"/>
<item android:drawable="@color/primaryFocused" android:state_focused="true"/>
<item android:drawable="@color/primary"/>
</selector>
Просто используйте:
android:backgroundTint="#f816a463"
Вместо:
android:background="#f816a463"
Не забудьте поменять свой Button
в android.support.v7.widget.AppCompatButton
Альтернативное решение использования <ripple>
тег (который я лично предпочитаю не делать, потому что цвета не "по умолчанию"), выглядит следующим образом:
Создайте рисование для фона кнопки и включите <item android:drawable="?attr/selectableItemBackground">
в <layer-list>
Затем (и я думаю, что это важная часть) программно установить backgroundResource(R.drawable.custom_button)
на вашем экземпляре кнопки.
Деятельность / Фрагмент
Button btn_temp = view.findViewById(R.id.btn_temp);
btn_temp.setBackgroundResource(R.drawable.custom_button);
раскладка
<Button
android:id="@+id/btn_temp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/custom_button"
android:text="Test" />
custom_button.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="10dp" />
</shape>
</item>
<item android:drawable="?attr/selectableItemBackground" />
</layer-list>
<tcode id="38251794"></tcode>добавлен в API уровня 23 . Используйте силу
RevealAnimator
в случае, если тебе нужно ретранслировать
foreground
свойство !
<View
android:id="@+id/circular_reveal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/primaryMilk_22"
android:elevation="@dimen/margin_20"
android:visibility="invisible" />
С функцией kotlin ext это способ osm!
fun View.circularReveal() {
val cx: Int = width / 2
val cy: Int = height / 2
val finalRadius: Int =
width.coerceAtLeast(height)
val anim: Animator = ViewAnimationUtils.createCircularReveal(
this,
cx,
cy,
0f,
finalRadius.toFloat()
)
anim.interpolator = AccelerateDecelerateInterpolator()
anim.duration = 400
isVisible = true
anim.start()
anim.doOnEnd {
isVisible = false
}
}
Теперь нам нужно создать файл ресурсов с возможностью рисования и назвать его ripple_effect, как показано ниже.
ripple_effect.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorRipple"> <!-- ripple color -->
<!-- for Button -->
<item>
<shape android:shape="rectangle">
<corners android:radius="3dp" />
<solid android:color="@color/colorPrimary"/>
</shape>
</item>
</ripple>
Источник Полный: https://code-android-example.blogspot.com/2020/11/ripple-effect-in-android-for-button.html