Utworzyłem przycisk i chcę do niego dodać efekt tętnienia!

Utworzyłem plik XML bg przycisku: (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>

A to jest mój plik efektu ripple: (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>

A to jest mój przycisk, do którego chcę dodać efekt tętnienia:

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

Ale po dodaniu efektu tętnienia tło przycisku jest przezroczyste, a przycisk wyświetla się tylko po kliknięciu, na przykład:

Przed kliknięciem

Na kliknięcie

Ale potrzebuję zarówno koloru tła przycisku, jak i efektu tętnienia. Znalazłem część tego kodu na różnych blogach Stack Overflow, ale nadal nie działa!

Oto kolejny plik XML do rysowania dla tych, którzy chcą dodać wszystko razem gradientowe tło, promień narożnika i efekt tętnienia:

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

Dodaj to do tła swojego przycisku.

<Button
    ...
    android:background="@drawable/button_background" />

PS: ta odpowiedź działa na Androidzie API 21 i nowszych.

Dodaj "?attr/selectableItemBackground"do android:foregroundatrybutu widoku, jeśli ma już tło wraz z android:clickable="true".

Dodaj efekt falowania / animację do przycisku Androida

Po prostu zamień atrybut tła przycisku na android: background = "? Attr / selectableItemBackground", a Twój kod będzie wyglądał następująco.

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

Inny sposób na dodanie efektu falowania / animacji do przycisku Androida

Korzystając z tej metody, możesz dostosować kolor efektu tętnienia. Najpierw musisz utworzyć plik xml w katalogu zasobów do rysowania. Utwórz plik ripple_effect.xml i dodaj następujący kod. 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>

I ustaw tło przycisku na powyższy plik zasobów do rysowania

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

Oprócz rozwiązania Jigara Patela dodaj to do ripple.xml, aby uniknąć przezroczystego tła przycisków.

<item
    android:id="@android:id/background"
    android:drawable="@color/your-color" />

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

Użyj tego ripple.xml jako tła w swoim przycisku:

android:background="@drawable/ripple"

Gdy przycisk ma tło z elementu rysowalnego, możemy dodać efekt ripple do parametru pierwszego planu .. Sprawdź poniżej kod, jak działa dla mojego przycisku z innym tłem

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

Dodaj poniższy parametr dla efektu tętnienia

   android:foreground="?attr/selectableItemBackgroundBorderless"
   android:clickable="true"

W celach informacyjnych patrz poniższy link https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/

AppCompat v7 +

Jeśli nie podasz prefiksu, ?android:aplikacja ulegnie awarii.

W zależności od preferencji należy użyć "?android:attr/selectableItemBackground"lub "?android:attr/selectableItemBackgroundBorderless". Wolę Borderless.

Możesz go umieścić w istniejących nieruchomościach android:backgroundlub android:foregroundje zachować.

Element musi mieć android:clickable="true"i android:focusable="true", aby to działało, ale wiele elementów, takich jak przyciski, ma je truedomyślnie.

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

Programowo (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

Programowo (Kotlin)

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

Funkcja rozszerzenia Kotlin wielokrotnego użytku

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
}

Dodanie atrybutów pierwszego planu i klikalnych atrybutów zadziałało.

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

Oprócz Sudheesh R

Dodaj efekt falowania / animację do przycisku Android z kształtem prostokąta przycisku z rogiem

Utwórz plik 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>

Używając android: background, zamieniasz znaczną część stylu oraz wyglądu przycisku na pusty kolor.

Aktualizacja: od wersji 23.0.0 AppCompat dostępny jest nowy Widget.AppCompat.Button.Kolorowy styl, który używa colorButtonNormal Twojego motywu dla wyłączonego koloru i colorAccent dla włączonego koloru.

Pozwala to zastosować go bezpośrednio do przycisku za pomocą

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

Możesz użyć drawable w katalogu v21 jako tła, takiego jak:

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

Zapewni to, że kolor tła to? Attr / colorPrimary i będzie mieć domyślną animację tętnienia przy użyciu domyślnego? Attr / colorControlHighlight (które możesz również ustawić w swoim motywie, jeśli chcesz).

Uwaga: musisz utworzyć selektor niestandardowy dla wersji wcześniejszej niż 21:

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

Spróbuj tego

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

Prostym podejściem jest ustawienie motywu widoku, jak opisano tutaj .

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>

Po prostu użyj :

android:backgroundTint="#f816a463"

Zamiast:

android:background="#f816a463"

Nie zapomnij zmienić Buttonnaandroid.support.v7.widget.AppCompatButton

Alternatywne rozwiązanie do korzystania z <ripple> tagu (którego osobiście wolę nie robić, ponieważ kolory nie są „domyślne”) jest następujące:

Utwórz element do rysowania dla tła przycisku i uwzględnij <item android:drawable="?attr/selectableItemBackground">w<layer-list>

Następnie (i myślę, że jest to ważna część) ustawiane programowo backgroundResource(R.drawable.custom_button)w instancji przycisku.

Aktywność / fragment

Button btn_temp = view.findViewById(R.id.btn_temp);
btn_temp.setBackgroundResource(R.drawable.custom_button);

Układ

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