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

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

Я создал XML-файл кнопки bg: (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, но все равно он не работает!

45
android android-drawable android-layout rippledrawable

11 ответов

вот еще один drawable 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" />
36

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

67

добавить эффект пульсации / анимацию на кнопку Android

просто замените атрибут фона кнопки на android: фон="?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>

и установите фон кнопки выше drawable resource file

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_effect"
    android:padding="16dp"
    android:text="New Button" />
47

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

использовать пульсация.в XML в качестве фона кнопки : 

android:background="@drawable/ripple"
26

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

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

14

при использовании android: фон, вы заменяете большую часть стиля и внешний вид кнопки с пустым цветом.

обновление: начиная с версии 23.0.0 выпуска AppCompat, есть новый виджет.Совместимости приложений.Кнопка.Цветной стиль, который использует 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>

Это обеспечит ваш цвет фона ?м/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>
5

кроме Sudheesh R

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

создать XML-файл в res/холст/имя_файла.в 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

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

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

просто использовать :

android:backgroundTint="#f816a463"

вместо:

android:background="#f816a463"

не забудьте изменить свой Button to android.support.v7.widget.AppCompatButton

2

попробуй такое

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

совместимости приложений В7+

если вы не префикс с ?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"
/>
2