web-dev-qa-db-fra.com

Comment faire une ondulation circulaire sur un bouton lorsque vous cliquez dessus?

Contexte

Sur l'application de numérotation d'Android, lorsque vous commencez à rechercher quelque chose et que vous cliquez sur le bouton fléché à gauche de l'EditText, vous obtenez un effet d'entraînement circulaire:

enter image description here

Le problème

J'ai essayé de l'avoir aussi, mais j'en ai un rectangulaire:

    <ImageButton
        Android:id="@+id/navButton"
        Android:layout_width="40dp"
        Android:layout_height="40dp"
        Android:layout_gravity="center_vertical"
        Android:layout_marginLeft="8dp"
        Android:background="?android:attr/selectableItemBackground"
        Android:src="@drawable/search_ic_back_arrow"/>

La question

Comment faire en sorte que le bouton ait un effet d'entraînement circulaire lorsqu'on clique dessus? Dois-je créer un nouveau dessin ou y a-t-il un moyen intégré pour cela?

androidbuttonrippledrawable
103
android developer

Si vous avez déjà une image d’arrière-plan, voici un exemple d’ondulation ressemblant beaucoup à selectableItemBackgroundBorderless:

            <ImageButton
                Android:id="@+id/btn_show_filter_dialog"
                Android:layout_width="24dp"
                Android:layout_height="24dp"
                Android:background="@drawable/ic_filter_state"/>

ic_filter_state.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:state_pressed="true"
        Android:state_enabled="true"
        Android:drawable="@drawable/state_pressed_ripple"/>
    <item
        Android:state_enabled="true"
        Android:drawable="@drawable/ic_filter" />
</selector>

state_pressed_ripple.xml: (opacité définie sur 10% sur fond blanc) 1AFFFFFF

 <?xml version="1.0" encoding="UTF-8"?>    
    <ripple xmlns:Android="http://schemas.Android.com/apk/res/Android">
        <item>
            <shape Android:shape="oval">
                <solid Android:color="#1AFFFFFF"/>
            </shape>
            <color Android:color="#FFF"/>
        </item>
    </ripple>
14
live-love

Si vous utilisez le thème AppCompat, vous pouvez définir l'arrière-plan de la vue comme suit:

Android:background="?selectableItemBackgroundBorderless"

Cela ajoutera une ondulation circulaire à partir de 21 ans et un fond carré en dessous de 21 ans.

240
bond

Un autre attribut avec effet d’ondulation rond, spécialement pour la barre d’action:

Android:background="?actionBarItemBackground"

UPD: La couleur d'ondulation peut être modifiée par cet attribut:

<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>

Mais gardez à l’esprit, cet attribut s’applique à tous les effets d’ondulation par défaut.

48
Anrimian

Créez et définissez une ondulation pouvant être dessinée en arrière-plan. Quelque chose comme ça.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/grey_15">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="oval">
            <solid Android:color="?android:colorPrimary"/>
        </shape>
        <color Android:color="@color/white"/>
    </item>
</ripple>
41
Thomas R.

Vous pouvez créer une ondulation circulaire en utilisant l'attribut Android:radius au format XML.

Exemple:

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="your_color"
    Android:radius="your_radius" />

Faites attention, votre your_radius devrait être inférieur à votre largeur de vue et à votre hauteur. Par exemple: si vous avez une vue de taille 60dp x 60dpyour_radius devrait être proche de 30dp (largeur/2 ou hauteur/2).

Travaillez sur Android 5.0 et versions ultérieures.

15
Volodymyr Yatsykiv

Ajoutez simplement ce fond à votre vue "Android:background=?android:attr/actionBarItemBackground"

10
Dipak

Si vous voulez des fichiers XML plus génériques, j'ai deux fichiers:

1) btn_ripple_background avec le code:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item
    Android:state_pressed="true"
    Android:state_enabled="true"
    Android:drawable="@drawable/ripple_circular_shape"/>
</selector>

2) ripple_circuler_shape avec le code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/btn_state_pressed_text_color"
    Android:shape="oval">
    <solid Android:color="@color/btn_state_pressed_text_color" />
</shape>

enfin l'utilisation: Android:foreground="@drawable/ripple_btn_background"

3
100RaBH