Comment faire une circulaire d'ondulation sur un bouton lorsqu'il est cliqué?

Fond

Sur le dialer app de Android, lorsque vous commencez à chercher quelque chose et que vous cliquez sur le bouton de la flèche sur la gauche de l'EditText, vous obtenez une circulaire effet d'entraînement sur elle :

Le problème

J'ai essayé de le faire aussi, mais j'ai eu une forme 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 puis-je faire sur le bouton circulaire effet d'entraînement lorsqu'elle est cliquée? Dois-je créer un nouveau drawable, ou est-il intégré dans la voie?

github.com/traex/RippleEffect essayez ceci
réponse possible est ici stackoverflow.com/questions/33477025/...

InformationsquelleAutor android developer | 2015-08-11

Si vous avez déjà une image d'arrière-plan, voici un exemple d'une ondulation qui ressemble de près de 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: (une opacité de 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>

InformationsquelleAutor live-love

235

Si vous utilisez AppCompat thème, vous pouvez alors régler l'arrière-plan de la vue que:
```
android:background="?selectableItemBackgroundBorderless"
```
Cela va ajouter de la circulaire d'ondulation sur les 21 et ci-dessus et fond carré ci-dessous 21.
- Nice. Puis-je également définir la couleur d'une certaine façon?
- vous pouvez créer votre propre style personnalisé pour qu'il l'aide de l'ondulation pour v21+
- Donc je suppose que la teinture ne va pas aider?
- l'API de 23 le 'haut' arrière-plan semble être la moitié de la taille en comparaison à selectbleItemBackgroundBorderless
- Nice, la meilleure réponse. ty
- La plus simple et la meilleure.. merci
- la couleur peut être définie par le paramètre colorControlHighlight comme ci-dessous dans votre styles.xml <item name="colorControlHighlight">#F00</item>
- Pouvez-vous s'il vous plaît montrer une mise à jour de réponse à cette question?
- Ci-dessus est la réponse à montrer l'ondulation, mon commentaire précédent était pour le réglage des différents ondulation de la couleur que la couleur par défaut.
- la façon de les mettre en java? android.R.attr.selectableItemBackgroundBorderless ne fonctionne pas
- comment puis-je faire le même effet avec des couleurs personnalisées
- Merci, sa fonctionne
- C'est en travaillant sur les biscuits Oreo. Thumbs up.
- Si vous l'utilisez à l'intérieur d'autres dispositions, vous pourriez avoir besoin android:clipChildren="false" dans les mises en page ainsi à permettre à l'animation pour se propager.
- Parfait... Merci!
- Cela dépend de comment vous l'essayez. Utilisez quelque chose comme ça: stackoverflow.com/a/27020758/878126
- cette solution est idéal pour les images statiques. Cependant, je suis en utilisant un AppCompatImageView avec cadre-de l'animation et de l'arrière-plan est utilisé pour l'animation, donc ce joli one-liner ne fonctionne pas avec qui. J'ai essayé android:foreground="?selectableItemBackgroundBorderless" et il donne une ondulation, cependant, l'effet d'entraînement révèle un carré - ce qui est laid.
- Pas de travail le 28 Tarte ImageButton
InformationsquelleAutor bond
47

Un autre attribut rond avec effet d'entraînement, spécialement pour la barre d'action:
```
android:background="?actionBarItemBackground"
```
UPD: Ondulation de la couleur peut être changée par cet attribut:
```

<item name="colorControlHighlight">your_color_here</item>
```
Mais gardez à l'esprit, cet attribut s'applique à tout défaut d'effets d'entraînement.
- De toute façon pour le personnaliser? Par exemple la couleur? Peut-être quelque chose dans les styles? Ou encore plus spécifiquement en vue de balise XML lui-même?
- Je ne sais pas, aujourd'hui, j'ai résolu ce problème et les réponses ci-dessus n'a pas fonctionné comme je le voulais. Je suppose que la couleur peut être personnalisé dans les styles, mais certainement pas dans la vue.
- Si vous le comprendre, s'il vous plaît laissez-moi savoir. Pourrait être utile.
- C'est exactement l'effet que je cherche. En passant, pouvez-vous en citer où trouver cet attribut, il ne semble pas être documentées.
- Les réponses de l'OP question. Devrait être marqué comme meilleure réponse. +1
- c'est dans "?attr/actionBarItemBackground"
InformationsquelleAutor Anrimian
40

Créer et définir une ondulation drawable comme arrière-plan. Quelque chose comme cela.
```
<?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>
```
- C'est quelque chose dans mon code. Vous pouvez utiliser vos couleurs 🙂
- Comment puis-je utiliser le sélecteur par défaut en cas de pré-Sucette ? Aussi, faut-il utiliser les mêmes couleurs que sur le dialer?
- Vous pouvez mettre de l'ondulation drawable dans votre un drawable-v21 dossier. Et pour le pré L'utilisation d'un simple état drawable. Utiliser le même nom de fichier et le mettre dans le drawable (par défaut) dossier.
- Je veux dire, à quoi devrait-il avoir pour le pré-Sucette, à l'intérieur de son drawable fichier? Aussi, merci de répondre au sujet de la couleur. Est-il possible d'utiliser le même que celui qui est utilisé pour "selectableItemBackground" ?
- L'ondulation n'est pas disponible en pré-sucette. Ainsi, dans le drawable fichier de pré-sucette, ordinaire bouton drawable est nécessaire. <item name="state_pressed" color=" .... . . "
- Vous pouvez également créer un style. Les valeurs-v21 dossier, créez un nouveau style et l'ensemble de l'ondulation drawable comme arrière-plan. Et pour pré L, c'est à dire dans les valeurs de dossier styles.xml mettre comme arrière-plan le "selectableItemBackground" attribut du même style.
- Pouvez-vous s'il vous plaît montrer exactement ce qu'il faut mettre? Aussi, quelle est la valeur de "grey_15" ?
- Selon mes tests, cela ne fonctionne que si le bouton a une forme carrée (=largeur=hauteur). quand il ne l'est pas, j'obtiens une forme elliptique. J'ai même essayé de définir la taille de la dessinés avec la même largeur et la hauteur, mais j'ai toujours ce problème. Comment venir?
- <ripple> demander à l'api de niveau 21 🙂
- Si vous voulez la même ondulation de la couleur comme les autres par défaut d'effets d'entraînement utilisés dans l'application, utiliser "?attr/colorControlHighlight" comme la couleur.
- Réponse parfaite. Merci beaucoup
InformationsquelleAutor Thomas R.
15

Vous pouvez créer cercle ondulation dessinés à l'aide de android:radius attribut xml.

Exemple:
```
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your_color"
    android:radius="your_radius" />
```
Prêter attention, que votre your_radius doit être inférieure à votre point de vue de la largeur et de la hauteur.
Par exemple: si vous avez vue la taille 60dp x 60dp your_radius devrait être proche de 30dp (largeur /2 ou hauteur /2).

De travail sur Android 5.0 et au-dessus.

InformationsquelleAutor Volodymyr Yatsykiv
9

Il suffit d'Ajouter ce fond de votre point de vue "android:background=?android:attr/actionBarItemBackground"
- Bonne trouvaille. Voici +1 .
InformationsquelleAutor Dipak

Si vous voulez plus générique des fichiers XML, 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"

InformationsquelleAutor 100RaBH

Vous devez vous connecter pour publier un commentaire.