web-dev-qa-db-fra.com

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

Comment puis-je avoir un effet d'entraînement dans une disposition simple linéaire/relative lorsque vous touchez la disposition?

J'ai essayé de définir l'arrière-plan d'une mise en page à 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 et aucun effet d'entraînement lorsque vous touchez la mise en page. Qu'est-ce que je fais mal?

Modifier:

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>
androidandroid-5.0-lollipoprippledrawable
78
Zach

Il s'avère que cela fonctionne comme prévu. La valeur standard du thème Matériau colorControlHighlight 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 de fond de l'objet.

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

17
Zach

Définissez ces propriétés sur votre mise en page (si votre mise en page a le fond blanc/clair par défaut):

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

_ {Dans ce cas, vous n'avez pas besoin d'un dessin personnalisable.

Cependant, si votre mise en page a un arrière-plan noir/foncé, vous devrez créer votre propre ondulation 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 définissez ensuite cette ondulation comme étant votre propriété Android: background.

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

183
IgorGanapolsky

J'ajoute ceci en plus de la réponse de Igor Ganapolsky au cas où quelqu'un voudrait avoir une mise en page de couleur différente et avoir également un effet d'entraînement. Vous créez simplement un effet d'entraînement dans 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 fond de votre mise en page ou n'importe quel bouton comme Igor Ganapolsky mentionné dans sa réponse.

Android:clickable="true"
Android:background="@drawable/ripple"
47
Erfan GLMPR

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

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

Et vous êtes prêt à partir. 

23
Pankaj Lilan

Définissez Android:clickable="true" sur votre mise en page.

8
JeromePApp
<?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 this ripple.xml dans le dossier Drawable , puis assignez-le en tant que View 

Android: background = "@ drawable/ripple"

Android: clickable = "true"

2
Abhishek Sengupta

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>
1
yatin deokar

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 API> = 23

Pour toutes les API _ {niveaux utilisez cette Solution

0
Andrej Sitar

J'essaie toutes ces réponses et rien ne me convient, alors j'ai résolu de créer le 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>
0
Ângelo Polotto

Voici un exemple pour cliquer sur un exemple de mise en page avec un 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">
0
J.Sattar