web-dev-qa-db-fra.com

Effet d'ondulation sur la forme dessinable

Essayer de faire quelque chose de vraiment simple ici et avoir cherché un tas de ressources SO, mais en vain. J'essaie d'obtenir l'effet d'entraînement sur un bouton qui utilise un arrière-plan drawable de type shape drawable. Les fichiers pertinents:

background_button: 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <stroke
        Android:width="1px"
        Android:color="#80ffffff" />
    <solid Android:color="@Android:color/transparent" />
</shape>

ripple.xml dans le dossier drawable-v21:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="?attr/colorControlHighlight">
    <item Android:drawable="@drawable/background_button"/>
</ripple>

Button.xml: 

   <Button
                    Android:id="@+id/login_button"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="20dp"
                    Android:layout_weight="1"
                    Android:paddingTop="10dp"
                    Android:paddingBottom="10dp"
                    Android:background="@drawable/ripple"


 />

Quel est le problème ici. Merci!

androidxmlandroid-5.0-lollipop
10
user2511882

Mon conseil serait de ne pas utiliser la balise <ripple. J'ai deux raisons: il n'est pas si facile de faire exactement ce que vous voulez et vous devez disposer de 2 fichiers .xml différents pour chaque arrière-plan. Je n'aime pas avoir le dossier drawable-v21. 

Ma solution consiste à envelopper votre Button avec FrameLayout et à utiliser l'attribut Android:foreground. De cette façon, vous pouvez avoir l’arrière-plan que vous voulez et conserver l’effet d’ondulation. 

<FrameLayout
    Android:id="@+id/login_button"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_marginTop="20dp"
    Android:layout_weight="1"
    Android:paddingTop="10dp"
    Android:paddingBottom="10dp"
    Android:foreground="?attr/selectableItemBackground">

    <Button
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@drawable/background_button"/>
</FrameLayout>

Notez que j'ai déplacé tous les attributs et l'id sur FrameLayout. Vous devez définir onClickListener à FrameLayout au lieu de Button.

Btw, ?attr/selectableItemBackground est génial. Utilisez-le autant que possible. Il remplace la couleur bleue Holo par le gris pour les anciens appareils d'Android 4.0 à 4.3.

16
tasomaniac

Essaye ça.

ripple_effect.xml

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:color="#2797e0"
tools:targetApi="Lollipop">
<item Android:id="@Android:id/mask">
    <shape Android:shape="rectangle">
        <solid Android:color="#2797e0" />
    </shape>
</item>

button.xml

 <Button
                Android:id="@+id/login_button"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="20dp"
                Android:layout_weight="1"
                Android:paddingTop="10dp"
                Android:paddingBottom="10dp"
                Android:background="@drawable/ripple_effect"/>

build.gradle

   compile 'com.Android.support:appcompat-v7:23.1.1'
12
Quang Doan

ça marche pour moi drawable/rect.xml  

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:id="@+id/listview_background_shape">
    <stroke Android:width="1dp" Android:color="#FF4C71F5" />
    <padding Android:left="0dp"
        Android:top="0dp"
        Android:right="0dp"
        Android:bottom="0dp" />
    <corners Android:radius="5dp" />
    <solid Android:color="#00000000" />

</shape>

et pour ondulation drawable/rip.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 pour votre bouton 

 <Button
                Android:id="@+id/nm"
                Android:layout_width="80dp"
                Android:layout_height="40dp"
                Android:layout_weight="1"
                Android:background="@drawable/rect"
                Android:enabled="true"
                Android:text="@string/vnm"
                Android:textColor="@color/colorpr"
                Android:textStyle="bold"
                Android:foreground="@drawable/rip"/>

espérons que cette aide !!!

3
Mohamed Hocine

Ce travail pour moi ..

<?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/smooth_white"
    tools:targetApi="Lollipop">
    <item Android:drawable="@drawable/button_green_background" />
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/smooth_white" />
        </shape>
    </item>
</ripple>

Le point est la section

<item Android:drawable="@drawable/button_green_background" />
2
latifalbr

J'ai eu la même tâche. Laissez-moi vous expliquer comment je le résous. Il génère des images d'image de cercle avec des effets d'ombre et d'ondes ne dépassant pas les limites du cercle.

<ImageView
    Android:id="@+id/iv_undo"
    Android:layout_width="@dimen/iv_width_altmenu"
    Android:layout_height="@dimen/iv_height_altmenu"
    Android:src="@drawable/undo"
    Android:elevation="@dimen/elevation_buttons"
    Android:foreground="@drawable/ripple_effect"
    Android:background="@drawable/buttons_inactive_coloring"
   />

Ce qui suit fournit un effet d'entraînement:

Android:foreground="@drawable/ripple_effect"

Ce qui suit fournit circle imageView.

Android:background="@drawable/buttons_inactive_coloring"

Les éléments suivants fournissent une ombre:

Android:foreground="@drawable/ripple_effect"

Un autre problème auquel vous serez probablement confronté est que l’effet d’ondulation dépasse les limites du cercle. Pour résoudre, utilisez le fichier suivant (ripple_effect.xml)

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:color="@color/button_active"
    tools:targetApi="Lollipop">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="oval">
            <solid Android:color="@color/button_active" />
        </shape>
    </item>
</ripple>

Si vous n'utilisez pas les éléments suivants:

<item Android:id="@Android:id/mask">
        <shape Android:shape="oval">
            <solid Android:color="@color/button_active" />
        </shape>
    </item>

l’effet d’ondulation dépasse les limites du cercle et n’a pas l’air agréable. Soyez prudent et prenez les choses faciles.

2
oiyio

Solution plus simple - utiliser ce drawable-xml en tant que valeur de la propriété "Android: background" du bouton:

drawable/bkg_ripple.xml: 

<?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"/>
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="#000000" />
        </shape>
    </item>
</ripple>

button.xml: 

<Button
    Android:id="@+id/mybutton"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    ...
    Android:background="@drawable/bkg_ripple"
/>
0
Gregory

CA aidera 

<com.abcd.ripplebutton.widget.RippleButton
        Android:id="@+id/Summit"
        Android:layout_width="260dp"
        Android:layout_height="50dp"
        Android:text="Login"
        Android:textColor="@color/white"
        Android:textStyle="bold"
        app:buttonColor="@color/Button"
        app:rippleColor="@color/white" />

Pour plus Voir ceci

0
Aditya Vyas-Lakhan