Я створив кнопку, і я хочу додати ефект пульсації до цієї кнопки!

Я створив 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, але він все ще не працює!

Ось ще один розширюваний 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" />

PS: ця відповідь працює для android api 21 і вище.

Додайте "?attr/selectableItemBackground"до android:foregroundатрибута вашого перегляду, якщо він вже має фоновий малюнок android:clickable="true".

Додайте ефект Ripple / Animation до кнопки Android

Просто замініть свій атрибут кнопки на андроїд: background = "? Attr / selectableItemBackground", і ваш код виглядає приблизно так.

      <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground"
        android:text="New Button" />

Ще один спосіб додати ефект Ripple / Animation до кнопки Android

За допомогою цього методу ви можете налаштувати колір ефекту пульсацій. По-перше, ви повинні створити XML-файл у своєму каталозі ресурсів, що виводиться. Створіть файл ripple_effect.xml та додайте наступний код. res / dravable / 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://jascode.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"
/>

Програмно (Java)

TypedValue value = new TypedValue();
context.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myView.setBackgroundResource(value.resourceId);
myView.setFocusable(true); // If needed for view type

Програмно (Котлін)

val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
myView.setBackgroundResource(value.resourceId)
myView.setFocusable(true) // If needed for view type

Функція розширення Kotlin для багаторазового використання

myView.ripple()

fun View.ripple(): View {
    val value = TypedValue()
    context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
    setBackgroundResource(value.resourceId)
    isFocusable = true // Required for some view types
    return this
}

Додавання переднього плану та атрибутів, що можна натискати, працювали на мене.

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

Окрім Sudheesh R

Додайте ефект Ripple / Animation до кнопки Android з формою прямокутника кнопки з кутом

Створіть файл xml res / dravable / 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>

Використовуючи android: background, ви замінюєте більшу частину стилів і виглядаєте і відчуваєте кнопку з порожнім кольором.

Оновлення: З версії 23.0.0 випуску AppCompat з'явився новий кольоровий стиль Widget.AppCompat.Button. Кольоровий стиль вашої теми використовує colorButtonNormal для відключеного кольору та colorAccent для включеного кольору.

Це дозволяє застосувати його до своєї кнопки безпосередньо через

<Button
 ...
style="@style/Widget.AppCompat.Button.Colored" />

Ви можете використовувати малюнок у каталозі 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>

спробуйте це

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

Простий підхід - встановити тему перегляду, як описано тут .

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>

Просто використовуйте:

android:backgroundTint="#f816a463"

Замість:

android:background="#f816a463"

Не забудьте змінити ButtonToandroid.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>