web-dev-qa-db-fra.com

Comment ajouter une ombre portée floue à un bouton?

J'ai besoin d'ajouter une ombre portée floue à mon bouton:

 enter image description here

J'ai essayé de créer un fond avec liste de calques xml dessinable, mais cela ne ressemble pas à du flou.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners Android:radius="45dp" />
            <padding
                Android:bottom="2dp"
                Android:left="1dp"
                Android:right="1dp"
                Android:top="1dp" />

            <stroke
                Android:width="6dp"
                Android:color="#007879E8" />

        </shape>
    </item>
    //////   10 more items
        <item>
        <shape>
            <corners Android:radius="45dp" />
            <padding
                Android:bottom="2dp"
                Android:left="1dp"
                Android:right="1dp"
                Android:top="1dp" />

            <stroke
                Android:width="6dp"
                Android:color="#177879E8" />


        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <corners Android:radius="45dp" />
            <stroke
                Android:width="2dp"
                Android:color="@color/main_purple_text_color" />
        </shape>
    </item>

</layer-list>

De plus, j'ai essayé d'utiliser un élément d'arrière-plan derrière un bouton avec un fichier png blured, mais il utilise beaucoup de ressources et je ne peux pas créer de sélecteur pour changer de fond en survol ou en cliquant.

Il me faut un seul fichier d'arrière-plan pour le bouton et utiliser le sélecteur pour modifier le flou et le dégradé en survol/clic . Des idées sur la manière d'obtenir un tel effet avec Android SDK?

UPDATE 1

Merci à tous pour vos réponses, mais je ne vous demande pas comment créer un dégradé. J'ai déjà fait ça. J'ai besoin de créer une ombre portée floue.

androidgradientblurdropshadow
4
Vlad Morzhanov

Eh bien, j'ai trouvé la solution: nous devons créer 9.png avec une ombre portée floue via ce générateur et le passer à une liste de calques dessinable contenant le dégradé de fond du bouton:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item Android:drawable="@drawable/blurred_9_path_png" />
    <item>
        <shape Android:shape="rectangle" Android:padding="10dp">
            <corners Android:radius="45dp" />
            <gradient
                Android:angle="45"
                Android:endColor="@color/facebook_btn_fill_grad2"
                Android:startColor="@color/facebook_btn_fill_grad1"
                Android:type="linear" />
            <padding
                Android:bottom="0dp"
                Android:left="0dp"
                Android:right="0dp"
                Android:top="0dp" />
        </shape>
    </item>

</layer-list>

Après cela, nous pouvons utiliser ces dessins avec différentes ombres floues 9.path pour créer un sélecteur.

9
Vlad Morzhanov

Vous pouvez le faire par gradient

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle" >
<gradient 
    Android:startColor="#6586F0"
    Android:centerColor="#D6D6D6"
    Android:endColor="#4B6CD6"
    Android:angle="90"/>
<corners 
    Android:radius="0dp"/>

0
Shivam Oberoi

enter image description here

Créez un "round_corner.xml" dessinable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
    <shape>
        <gradient
            Android:angle="360"
            Android:startColor="#8A88F3"
            Android:endColor="#B96AE8"
            Android:type="linear" />

        <corners Android:bottomLeftRadius="24dp"
            Android:bottomRightRadius="24dp"
            Android:topLeftRadius="24dp" Android:topRightRadius="24dp" />
    </shape>
</item>
</selector>

dans Activité définir un bouton en xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@color/white"
    Android:orientation="vertical">

    <Button
        Android:id="@+id/btn_language_select_save"
        Android:layout_width="wrap_content"
        Android:layout_height="60dp"
        Android:layout_centerInParent="true"
        Android:layout_marginTop="20dp"
        Android:background="@drawable/round_corner_spiner"
        Android:paddingLeft="130dp"
        Android:paddingRight="130dp"
        Android:text="Vlad[enter image description here][1]"
        Android:textColor="@Android:color/white"
        Android:textSize="20sp"
        Android:visibility="visible" />
</RelativeLayout>

Utile liens

J'espère que cela vous aide 

0
InsaneCat

J'ajoute ceci comme fond attrayable (ombre portée grise):

<!-- Drop Shadow Stack -->
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />
        <solid Android:color="#1f000000" />
        <corners Android:radius="30dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />
        <solid Android:color="#2f000000" />
        <corners Android:radius="30dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />
        <solid Android:color="#3f000000" />
        <corners Android:radius="30dp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape>
        <solid Android:color="@Android:color/white" />
        <corners Android:radius="30dp" />
    </shape>
</item>

Assure la hauteur/largeur/remplissage de la vue texte suffisamment grande pour contenir au-dessus de 3dp ombre (1dp + 1dp + 1dp pour toutes les couleurs de # 3f000000 à # 1f000000).

0
林果皞

 enter image description here

Créer un fichier dessinable shadow.xml

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">

<solid Android:color="#E3D5FC" />
<corners
    Android:radius="20dp"/>
<padding
    Android:bottom="1dp"
    Android:left="1dp"
    Android:right="1dp"
    Android:top="1dp" >
</padding>

Créez un autre fichier dessinable background.xml

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

<item Android:drawable="@drawable/shadow" />
<item>
    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:shape="rectangle">
        <gradient
            Android:angle="0"
            Android:centerColor="#9E7CEF"
            Android:endColor="#B070EB"
            Android:startColor="#8989F4" />
        <corners Android:radius="22dp" />
        <size Android:height="40dp"/>
    </shape>
</item>

et utilisez ce fichier en XML comme ci-dessous.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:orientation="vertical" Android:layout_width="match_parent"
Android:layout_height="match_parent">

<Button
    Android:id="@+id/img_save"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/background"
    Android:gravity="center"
    Android:text="BUTTON"
    Android:textAppearance="?android:attr/textAppearanceMedium"
    Android:textColor="@Android:color/white"
    Android:layout_centerInParent="true"/>
</RelativeLayout>

J'espère que ça aide.

0
Dharmishtha