it-swarm.com.ru

Добавить эффект ряби к моей кнопке с цветом фона кнопки?

Я создал кнопку и хочу добавить к ней эффект пульсации!

Я создал кнопку 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, но все же он не работает!

65
rakcode

Вот еще один нарисованный 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" />
68
Pei

добавьте "?attr/selectableItemBackground" к атрибуту foreground вашего представления, если у него уже есть фон вместе с Android:clickable="true"

92
backslashN

Добавить эффект ряби/анимацию на кнопку 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 и добавьте следующий код .res/drawable/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" />
52
Jigar Patel

В дополнение к решению 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"
28
Sudheesh R

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

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

22
Jasmine John

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"
/>
7
Gibolt

Добавление переднего плана и кликабельных атрибутов работало на меня.

<Button
    ... 
    Android:background="@color/your_color"
    Android:foreground="?attr/selectableItemBackgroundBorderless"
    Android:clickable="true" />
4
Ashwin

Когда вы используете 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>
4
Atman Bhatt

В дополнение к 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>
4
Digvijay Machale

попробуй это

<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" />
3
Raveendra

Просто используйте:

Android:backgroundTint="#f816a463"

Вместо:

Android:background="#f816a463"

Не забудьте изменить Button на Android.support.v7.widget.AppCompatButton

2
Gilad Shapira

Альтернативное решение для использования тега <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>
0
Aidan Host