webentwicklung-frage-antwort-db.com.de

So fügen Sie einer Schaltfläche einen unscharfen Schatten hinzu

Ich muss meinem Button einen unscharfen Schlagschatten hinzufügen:

 enter image description here

Ich habe versucht, Hintergrund mit xml-Ebenenlisten zu erstellen, die jedoch nicht wie Unschärfe aussehen.

<?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>

Ich habe auch versucht, ein Hintergrundelement hinter dem Button mit blured png zu verwenden, aber es verwendet zu viele Ressourcen und ich kann keinen Selector erstellen, um den Hintergrund beim Schweben oder Klicken zu ändern.

Ich brauche eine einzige Hintergrunddatei für die Schaltfläche und verwende den Selector, um Unschärfe und Farbverlauf beim Hover/Click zu ändern. Jegliche Ideen, wie ein solcher Effekt mit Android SDK erzielt werden kann?

UPDATE 1

Vielen Dank an alle für Antworten, aber ich frage nicht, wie Sie einen Farbverlauf erstellen. Ich habe das schon gemacht. Ich muss unscharfen Schatten erzeugen.

4
Vlad Morzhanov

Nun, ich habe die Lösung gefunden: Wir müssen 9.png mit unscharfem Schatten über diesen Generator erstellen und an eine Drawable Layer-Liste übergeben, die einen Button-Hintergrundverlauf enthält:

<?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> 

Danach können wir solche Drawables mit unterschiedlichem Pfad verwenden, um einen Selector zu erstellen.

9
Vlad Morzhanov

Sie können es durch Gradient tun

<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

Erstellen Sie ein Zeichen "round_corner.xml"

<?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>

stellen Sie in Activity eine Schaltfläche in XML ein

<?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>

Hilfreiche Links

Hoffe das hilft dir 

0
InsaneCat

Ich füge dies als Hintergrund gezeichnet hinzu (grauer Schatten):

<!-- 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>

Stellt sicher, dass die Höhe/Breite/Füllung eines Textview so groß ist, dass er über dem Schatten 3dp (1 dB + 1 dB + 1 dB für alle Farben von # 3f000000 bis # 1f000000) liegt.

0
林果皞

 enter image description here

Erstellen Sie eine zeichnbare shadow.xml -Datei

<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>

Erstellen Sie eine weitere zeichnbare Datei 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>

und verwenden Sie diese Datei wie folgt in XML.

<?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>

Ich hoffe es hilft.

0
Dharmishtha