Ajouter un effet d'ondulation à mon bouton avec la couleur de fond du bouton ?

Question

J'ai créé un bouton et je veux ajouter un effet d'ondulation à ce bouton !

J'ai créé un fichier XML de bg de bouton : (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>

Et voici mon fichier d'effet d'ondulation : (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>

Et voici mon bouton auquel je veux ajouter un effet d'entraînement :

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

Mais après avoir ajouté l'effet d'ondulation, l'arrière-plan du bouton est transparent, et le bouton ne s'affiche que lorsqu'on le clique, comme ceci :

Avant de cliquer

Sur le clic

Mais j'ai besoin à la fois de la couleur de fond du bouton et de l'effet d'ondulation, J'ai trouvé une partie de ce code dans différents blogs de Stack Overflow, mais cela ne fonctionne toujours pas !

Answer 1

Voici un autre drawable xml pour ceux qui veulent ajouter tous ensemble un fond dégradé, un rayon de coin et un effet d'ondulation :

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

Ajoutez ceci à l'arrière-plan de votre bouton.

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

PS : cette réponse fonctionne pour Android api 21 et plus.

Answer 2

Ajouter le "?attr/selectableItemBackground" de votre vue android:foreground s'il a déjà un arrière-plan avec l'attribut android:clickable="true" .

Answer 3

Ajouter un effet d'ondulation/une animation à un bouton Android

Remplacez simplement l'attribut d'arrière-plan de votre bouton par Android:background="?attr/selectableItemBackground" et votre code ressemble à ceci.

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

Une autre façon d'ajouter un effet d'ondulation/une animation à un bouton Android

Grâce à cette méthode, vous pouvez personnaliser la couleur de l'effet d'ondulation. Tout d'abord, vous devez créer un fichier xml dans le répertoire de vos ressources de dessin. Créez un fichier ripple_effect.xml et ajoutez le code suivant. 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>

Et définissez l'arrière-plan du bouton dans le fichier de ressources dessinables ci-dessus.

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

Answer 4

En plus de Jigar Patel ajoutez cette solution à l ripple.xml pour éviter un arrière-plan transparent des boutons.

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

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

Utilisez cette ripple.xml comme fond dans votre bouton :

android:background="@drawable/ripple"

Answer 5

Lorsque le bouton a un arrière-plan provenant du drawable, nous pouvons ajouter un effet d'ondulation au paramètre de premier plan Vérifiez le code ci-dessous, il fonctionne pour mon bouton avec un arrière-plan différent.

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

Ajoutez le paramètre ci-dessous pour l'effet d'ondulation

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

Pour référence, voir le lien ci-dessous https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-Android-app/