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