web-dev-qa-db-fra.com

Ondulations sur une forme avec un fond transparent

J'utilise la forme suivante dans mon application

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true">
        <shape Android:shape="oval" >
            <solid Android:color="@color/primary_light"/>
            <size Android:height="80dp" Android:width="80dp"/>
        </shape>
    </item>

    <item Android:state_focused="true">
        <shape Android:shape="oval">
            <stroke Android:color="@color/primary_light" Android:width="5dp"/>
            <size Android:height="80dp" Android:width="80dp"/>
        </shape>
    </item>

    <item>
        <shape Android:shape="oval">
            <solid Android:color="@Android:color/transparent"/>
            <size Android:height="80dp" Android:width="80dp"/>
        </shape>
    </item>
</selector>

Il est là dans mon dossier dessinable. Maintenant, je mets à jour mon application vers Lollipop et je souhaite donner une rétroaction sur le bouton circulaire que j'ai utilisé. Donc, dans drawable-v21 dossier, je l'ai changé en un sélecteur d'ondulation:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/primary_light">
    <item>
        <selector>
            <item Android:state_focused="true">
                <shape Android:shape="oval">
                    <stroke Android:color="@color/primary_light" Android:width="5dp"/>
                    <size Android:height="80dp" Android:width="80dp"/>
                </shape>
            </item>

            <item Android:id="@Android:id/mask">
                <shape Android:shape="oval">
                    <solid Android:color="@Android:color/transparent"/>
                    <size Android:height="80dp" Android:width="80dp"/>
                </shape>
            </item>
        </selector>
    </item>
</ripple>

Mais malheureusement, l'effet d'entraînement n'est pas généré en utilisant le dessinable ci-dessus dans Lollipop. Est-ce à cause du <solid Android:color="@Android:color/transparent"/>?

Quelqu'un peut-il me montrer où je me suis trompé? Merci

androidrippledrawable
31
Sudara

Après quelques essais et erreurs, il semble que j'ai mal compris la hiérarchie des selector et item.

Ce qui suit fonctionne parfaitement.

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="@color/primary_light">
        <item Android:id="@Android:id/mask">
               <shape Android:shape="oval">
                       <solid Android:color="@Android:color/white"/>
                       <size Android:height="80dp" Android:width="80dp"/>
               </shape>
        </item>
</ripple>
52
Sudara

Cela fonctionne avec un fond transparent:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="?android:colorControlHighlight"
    Android:exitFadeDuration="@Android:integer/config_shortAnimTime">
<!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->
<item Android:id="@Android:id/mask">
    <shape Android:shape="rectangle">
        <corners Android:radius="3dp"/>
        <!-- This color is needed to be set - doesn't affect anything -->
        <solid Android:color="@Android:color/white"/>
    </shape>
</item>
<!-- This is the background for your button -->
<item>
    <!-- Use the shape you want here -->
    <shape Android:shape="rectangle">
        <!-- Use the solid tag to define the background color you want -->
        <solid Android:color="@Android:color/transparent"/>
    </shape>
</item>
</ripple>

Cela a été modifié un peu de cette réponse: Ondulation transparente

25
box

Le code suivant fonctionne pour une forme personnalisée avec effet d'entraînement pour le bouton transparent -

main_activity_buttons_ripple_with_background.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="#888888"
    tools:targetApi="Lollipop">

    <!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <corners Android:radius="25dp" />
            <!-- This color is needed to be set - doesn't affect anything -->
            <solid Android:color="#000" />
        </shape>
    </item>

    <!-- This is the background for your button -->
    <item>
        <!-- Use the shape you want here -->
        <shape Android:shape="rectangle">
            <!-- Use the solid tag to define the background color you want -->
            <solid Android:color="@Android:color/transparent" />
            <stroke
                Android:width="1dp"
                Android:color="#FFF" />
            <corners Android:radius="25dp" />
        </shape>
    </item>

</ripple>

styles.xml

<style name="MainActivityButtonsStyle">
<item name="Android:background">@drawable/main_activity_buttons_ripple_with_background</item>
<item name="Android:textAllCaps">false</item>
<item name="Android:layout_margin">15dp</item>
<item name="Android:paddingLeft">20dp</item>
<item name="Android:paddingRight">20dp</item>
<item name="Android:layout_centerHorizontal">true</item>
<item name="Android:layout_width">wrap_content</item>
<item name="Android:layout_height">50dp</item>
<item name="Android:textColor">#FFF</item>
<item name="Android:textSize">18sp</item>

activity_main.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1">

        <Button
            Android:layout_alignParentTop="true"
            style="@style/MainActivityButtonsStyle"
            Android:text="@string/button_search_by_id" />

    </RelativeLayout>

</LinearLayout>
3
Hrishikesh Kadam

Vous pouvez avoir un effet d'entraînement sur un fond transparent ou semi-transparent lorsque le masque d'ondulation est spécifié. Le masque d'ondulation est un dessinable, mais seule la valeur alpha est utilisée pour définir l'alpha d'ondulation par pixel. Voici un exemple de création par programmation.

var background = new Android.graphics.drawable.GradientDrawable();
background.setShape(Android.graphics.drawable.GradientDrawable.RECTANGLE);
background.setColor(0x77FFFFFF); // semi-transparent background
background.setCornerRadius(10);
background.setStroke(3, 0xFF1144FF); // border color

var mask = new Android.graphics.drawable.GradientDrawable();
mask.setShape(Android.graphics.drawable.GradientDrawable.RECTANGLE);
mask.setColor(0xFF000000); // the color is irrelevant here, only the alpha
mask.setCornerRadius(5); // you probably want the same corner as the background

var rippleColorLst = Android.content.res.ColorStateList.valueOf(
    Android.graphics.Color.argb(255,50,150,255)
);

// aaaand
var ripple = new Android.graphics.drawable.RippleDrawable(rippleColorLst,background,mask);
yourButton.setBackground(ripple);

(Désolé pour le code JavaScript/NativeScript, on peut probablement le comprendre)

2
Tyg