Ajouter un effet d'ondulation à mon bouton avec la couleur d'arrière-plan du bouton?

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

J'ai créé un bouton fichier 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>

Et ceci est 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 C'est mon bouton que je veux Ajouter Effet d'ondulation:

<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'arrière-plan du bouton d'effet d'ondulation est transparent, et l'affichage du bouton uniquement lorsqu'il est cliqué, comme ceci:

Avant De Cliquer Sur

Sur Cliquez sur

Mais j'ai besoin à la fois de la couleur d'arrière-plan 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!

45
demandé sur Suragch 2016-10-13 00:25:11

11 réponses

Voici un autre XML dessinable pour ceux qui veulent ajouter tous ensemble l'arrière-plan de dégradé, le rayon de coin et l'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" />
36
répondu Pei 2017-09-24 17:38:44

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

67
répondu backslashN 2017-06-22 10:06:05

Ajouter Effet D'Ondulation / Animation à un bouton Android

Il suffit de remplacer votre attribut de fond de bouton avec 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 / Animation à un bouton Android

En utilisant cette méthode, vous pouvez personnaliser la couleur de l'effet d'ondulation. Tout d'abord, vous devez créer un fichier xml dans votre répertoire de ressources drawable. Créer un ripple_effect.fichier xml et ajouter de 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 sur le fichier de ressources dessinable 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" />
47
répondu Jigar Patel 2016-10-12 21:37:45

En plus de la solution de Jigar Patel, ajoutez ceci à l'ondulation .xml pour éviter l'arrière-plan transparent des boutons.

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

Xml Complet :

<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 ondulation .xml comme arrière-plan dans votre bouton :

android:background="@drawable/ripple"
26
répondu Sudheesh R 2017-10-06 14:07:50

Lorsque le bouton a un arrière - plan du drawable, nous pouvons ajouter un effet d'ondulation au paramètre de premier plan.. Vérifiez ci-dessous le code 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"
     />

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

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

Pour référence se référer ci-dessous lien https://madoverandroid.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/

14
répondu Jasmine John 2018-03-22 12:49:20

Lorsque vous utilisez android:background, vous remplacez une grande partie du style et de l'apparence d'un bouton par une couleur vierge.

Mise à jour: à partir de la version 23.0.0 de AppCompat, il existe un nouveau Widget.AppCompat.Bouton.Un style coloré qui utilise colorButtonNormal de votre thème pour la couleur désactivée et colorAccent pour la couleur activée.

Cela vous permet de l'appliquer à votre bouton directement via

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

Vous pouvez utiliser un drawable dans votre répertoire v21 pour votre contexte tel que:

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

Cela garantira votre couleur d'arrière-plan est ?attr / colorPrimary et a l'animation d'ondulation par défaut en utilisant la valeur par défaut ?attr / colorControlHighlight (que vous pouvez également définir dans votre thème si vous le souhaitez).

Remarque: vous devrez créer un sélecteur personnalisé pour moins de 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
répondu Atman Bhatt 2016-10-13 06:55:50

En plus de Sudheesh R

Ajouter Effet D'Ondulation / Animation à un bouton Android avec bouton rectangle forme avec coin

Créez le fichier 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
répondu Digvijay Machale 2017-11-07 08:57:30

L'ajout d'attributs de premier plan et cliquables a fonctionné pour moi.

<Button
    ... 
    android:background="@color/your_color"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true" />
4
répondu Ashwin 2018-03-26 15:27:08

Il suffit d'utiliser:

android:backgroundTint="#f816a463"

Au Lieu de:

android:background="#f816a463"

N'oubliez pas de changer votre Button à android.support.v7.widget.AppCompatButton

2
répondu Gilad Shapira 2017-06-29 15:44:13

Essayez ceci

<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
répondu Raveendra 2017-12-23 05:27:24

AppCompat v7 +

Si vous ne préfixez pas avec ?android: votre application va planter.

, Vous devez utiliser "?android:attr/selectableItemBackground" ou "?android:attr/selectableItemBackgroundBorderless", selon vos préférences. Je préfère Borderless.

, Vous pouvez mettre soit dans android:background ou android:foreground pour garder les propriétés existantes.

L'élément doit avoir android:clickable="true" et android:focusable="true" pour que cela fonctionne, mais de nombreux éléments, tels que les boutons, les ont true par défaut.

<Button
    ...
    android:background="@color/white"
    android:foreground="?android:attr/selectableItemBackgroundBorderless"
/>
<TextView
    ...
    android:background="?android:attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:focusable="true"
/>
2
répondu Gibolt 2018-04-28 23:30:56