web-dev-qa-db-fra.com

Ajouter effet d'entraînement à mon bouton avec la couleur de fond du bouton?

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

J'ai créé un fichier XML de bouton 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 voici mon fichier d'effet d'entraînement: (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 l’ajout de l’effet d’ondulation, l’arrière-plan du bouton est transparent, et l’affichage du bouton s’affiche uniquement lorsque vous cliquez dessus, comme suit:

Avant de cliquer

Sur clic

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

androidandroid-layoutandroid-drawablerippledrawable
65
rakcode

Voici un autre xml pouvant être dessiné pour ceux qui veulent ajouter tous ensemble un fond dégradé, un rayon de coin et un effet d'entraînement:

<?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" />
68
Pei

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

92
backslashN

Ajouter un effet/animation à un bouton Android

Il suffit de remplacer 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/animation à un bouton Android

En utilisant cette méthode, vous pouvez personnaliser la couleur de l'effet d'entraînement. Tout d'abord, vous devez créer un fichier XML dans votre répertoire de ressources pouvant être 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éfinir l’arrière-plan du bouton sur le fichier de ressources 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" />
52
Jigar Patel

En plus de la solution de Jigar Patel , ajoutez-la au fichier ripple.xml pour éviter un fond 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 ceci ripple.xml comme arrière-plan dans votre bouton: 

Android:background="@drawable/ripple"
28
Sudheesh R

Lorsque le bouton a un arrière-plan dans le dessin, nous pouvons ajouter un effet d’ondulation au paramètre d’avant-plan. Vérifiez ci-dessous le code qui 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'entraînement 

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

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

22
Jasmine John

AppCompat v7 +

Si vous ne préfixez pas avec ?android:, votre application va se bloquer.

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

Vous pouvez le mettre dans Android:background ou Android:foreground pour conserver 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, ont par défaut true.

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

Ajouter des attributs de premier plan et cliquables a fonctionné pour moi.

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

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

Mise à jour: Depuis la version 23.0.0 d'AppCompat, il existe un nouveau style coloré Widget.AppCompat.Button.A 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 dessin dans votre répertoire v21 pour votre arrière-plan, par exemple:

<?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 que votre couleur d'arrière-plan est? Attr/colorPrimary et que l'animation d'ondulation par défaut utilise 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 une version inférieure à la 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>
4
Atman Bhatt

En plus de Sudheesh R

Ajouter un effet/une animation à un bouton Android avec une forme de rectangle de bouton avec un coin

Créer un fichier XML res/drawable/nom_fichier.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
Digvijay Machale

essaye ça

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

Il suffit d'utiliser:

Android:backgroundTint="#f816a463"

Au lieu de:

Android:background="#f816a463"

N'oubliez pas de changer votre Button en Android.support.v7.widget.AppCompatButton

2
Gilad Shapira

Une solution alternative à l'utilisation de la balise <ripple> (que je préfère personnellement ne pas faire, car les couleurs ne sont pas "par défaut") est la suivante:

Créer un dessin pour l'arrière-plan du bouton et inclure <item Android:drawable="?attr/selectableItemBackground"> dans le <layer-list>

Ensuite (et je pense que c'est la partie la plus importante), définissez par programmation backgroundResource(R.drawable.custom_button) sur votre occurrence de bouton.

Activité/Fragment

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

Disposition

<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>
0
Aidan Host