Comment créer un effet d'entraînement dans une mise en page simple


112

Comment puis-je avoir un effet d'entraînement dans une mise en page linéaire / relative simple lorsque je touche la mise en page?

J'ai essayé de définir l'arrière-plan d'une mise en page sur quelque chose comme:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight" >

    <item android:drawable="@android:color/white"/>

</ripple>

Cependant, je ne vois qu'un fond blanc uni et aucun effet d'entraînement lorsque vous touchez la mise en page. Qu'est-ce que je fais mal?

Éditer:

Pour référence, voici mon fichier xml de mise en page:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="@drawable/test"
        android:clickable="true">
    </RelativeLayout>

2
La vue hébergeant l'ondulation doit être activée et cliquable ou focalisable.
alanv

Merci Alanv, voir ci-dessous pour ma réponse. En gros, je marque ma mise en page dans laquelle je souhaite que l'effet d'entraînement soit cliquable, mais cela ne fonctionne toujours pas.
Zach

En outre, cela fonctionne très bien si je supprime la <item android:drawable="@android:color/white"/>section. Donc je ne sais pas comment cela est censé fonctionner si je voulais une couleur d'arrière-plan sur la mise en page. Poser ceci sur une autre mise en page avec une couleur d'arrière-plan ne fonctionne pas non plus!
Zach

4
À quelle couleur l'ondulation est-elle dessinée dans votre vue, par exemple à quelle couleur se résout colorControlHighlight?
alanv

Réponses:


260

Définissez ces propriétés sur votre mise en page (si votre mise en page a l'arrière-plan blanc / clair par défaut):

          android:clickable="true"
          android:focusable="true"
          android:background="?attr/selectableItemBackground"

Vous n'avez pas besoin d'un dessin personnalisé dans ce cas.

Cependant, si votre mise en page a un arrière-plan noir / sombre, vous devrez créer votre propre ondulation pouvant être dessinée comme celle-ci:

<?xml version="1.0" encoding="utf-8"?>
<!-- An white rectangle ripple. -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white">
    <item
        android:id="@android:id/mask"
        android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</ripple>

Et puis définissez cette ripple drawable comme votre propriété android: background .

Vous pouvez voir de nombreux exemples de ces types d'ondulations dans AOSP: ici


11
et si je dois donner une couleur différente comme arrière-plan? Alors quelle devrait être la meilleure approche?
Anuj Sharma

1
@AnujSharma Avez-vous essayé de donner une ressource couleur pour background?
IgorGanapolsky


31
Si vous souhaitez une autre couleur d'arrière-plan, vous pouvez définir cette couleur comme arrière-plan et mettre "? Attr / selectableItemBackground" comme android: premier plan à la place
Lucas Arrefelt

2
Hou la la! c'est bien. Cela devrait être marqué comme réponse +1
Zia Ur Rahman

59

J'ajoute ceci en plus de la réponse d' Igor Ganapolsky au cas où quelqu'un voudrait avoir une mise en page avec une couleur différente et avoir également un effet d'entraînement. Vous créez simplement un effet d'entraînement dans les drawables comme ceci:

ripple.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/rippleColor"
    tools:targetApi="lollipop"> <!-- ripple effect color -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/backgroundColor" /> <!-- background color -->
        </shape>
    </item>
</ripple>

puis donnez-le comme arrière-plan de votre mise en page ou comme n'importe quel bouton comme Igor Ganapolsky l'a mentionné dans sa réponse.

android:clickable="true"
android:background="@drawable/ripple"

37

Vous devez modifier l'extrait de code suivant dans n'importe quel widget ( TextView/ Button) et vous pouvez implémenter l' effet d'entraînement :

android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"

Et vous êtes prêt à partir.


hmm au premier plan? c'est bien!
Badr

Ceci est utile si vous avez déjà un ensemble android: background = "@ color / colorAccent"
aero

@aero C'est utile, même si vous ne définissez aucun arrière-plan.
Pankaj Lilan

1
cela fonctionne sur les mises en page et les vues personnalisées en plus des widgets.
anoo_radha

1
@MichaelKern Oui, vous avez raison, cela est également basé sur les exigences de chacun dans son code.
Pankaj Lilan

20

Il s'avère que cela fonctionne comme prévu. La valeur colorControlHighlight du thème de matériau standard est #40ffffff. Donc, sur un fond blanc, cela n'apparaîtra pas. Changer la couleur de surbrillance en quelque chose d'autre fonctionne et / ou changer la couleur d'arrière-plan de l'objet.

Merci à tous (surtout Alanv de m'avoir orienté dans la bonne direction).


si j'utilise android: background = "? attr / selectableItemBackground" sur ma vue, comment puis-je changer l'arrière-plan de l'objet?
codeskraps

1
Nevermind j'ai trouvé que l'état par défaut de selectableItemBackground est transparent. Alors, j'ai mis une vue en dessous avec la couleur que je voulais.
codeskraps

1
note rapide: vous pouvez modifier colorControlHighlightvotre fichier styles.xml. Ajoutez-le à votre thème personnalisé par exemple.
Nuhman


5

Voici un exemple de clic sur un exemple de mise en page avec effet d'entraînement:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">

C'est tout simplement génial comme c'est simple et le simple fait que cela fonctionne simplement.
Machado

4
<?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="#cfd8dc"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#d1c4e9" />
        </shape>
    </item>
</ripple>

Utilisez ce ripple.xml dans le dossier Drawable , puis affectez-le comme View

android: background = "@ drawable / ripple"

android: clickable = "vrai"


2

Ajoutez simplement un effet d'entraînement par défaut avec android:background="?selectableItemBackground"

Comme:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="?selectableItemBackground"
            android:clickable="true"
            >

           ...

</LinearLayout>

0

Mettez ceci dans votre mise en page:

android:clickable="true"
android:background="?attr/selectableItemBackground"

Remarque: il existe un bogue dans la documentation de l'API. Cela fonctionnera uniquement sur l' API> = 23

Pour tous les niveaux d' API , utilisez cette solution


2
Votre lien redirige cette même page
TSR

Gardez à l'esprit que vous avez également la possibilité d'utiliser android: background = "? Attr / selectableItemBackgroundBorderless" Avec une bordure moins L'effet d'entraînement s'étendra à la vue parente. Cela peut paraître meilleur dans de nombreux cas.
Michael Kern

0

J'essaie toutes ces réponses et rien n'a fonctionné pour moi, alors j'ai résolu la création du style suivant:

<style name="Button.Borderless" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:layout_marginLeft">-6dp</item>
    <item name="android:layout_marginRight">-6dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:paddingLeft">6dp</item>
    <item name="android:paddingRight">6dp</item>
</style>

Et puis, j'ai appliqué à ma mise en page linéaire:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.