webentwicklung-frage-antwort-db.com.de

So stellen Sie Button einen Schatten zur Verfügung

enter image description here

Wie Sie im Bild sehen können, möchte ich hinter einer Button Schatten. Ich habe Button mit abgerundeten Ecken erstellt. Aber das Problem ist, dass ich hinter dieser Button keinen Schatten erzeugen kann. Wie kann ich das erreichen?

androidmaterial-designshadow
69
Chintan Rathod

Verwenden Sie diesen Ansatz, um den gewünschten Look zu erhalten.
button_selector.xml: 

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
    <layer-list>
        <item Android:right="5dp" Android:top="5dp">
            <shape>
                <corners Android:radius="3dp" />
                <solid Android:color="#D6D6D6" />
            </shape>
        </item>
        <item Android:bottom="2dp" Android:left="2dp">
            <shape>
                <gradient Android:angle="270" 
                    Android:endColor="#E2E2E2" Android:startColor="#BABABA" />
                <stroke Android:width="1dp" Android:color="#BABABA" />
                <corners Android:radius="4dp" />
                <padding Android:bottom="10dp" Android:left="10dp" 
                    Android:right="10dp" Android:top="10dp" />
            </shape>
        </item>
    </layer-list>
</item>

</selector>

Und in deinem XML-Layout: 

<Button
   Android:background="@drawable/button_selector"
   ...
   ..
/>
113
Festus Tamakloe

Für Android Version 5.0 und höher

versuchen Sie das Elevation für andere Ansichten ..

Android:elevation="10dp"

Für Buttons,

Android:stateListAnimator="@anim/button_state_list_animator"

button_state_list_animator.xml - https://Android.googlesource.com/platform/frameworks/base/+/master/core/res/ res/anim/button_state_list_anim_material.xml

unter 5.0 Version,

Für alle Ansichten,

 Android:background="@Android:drawable/dialog_holo_light_frame"

Meine Ausgabe:

enter image description here

45
Ranjith Kumar

Hier ist meine Schaltfläche mit Schattencw_button_shadow.xmlindrawableOrdner

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="false">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid Android:color="@color/red_400"/>
                    <!-- alttan gölge -->
                    <corners Android:radius="19dp"/>
                </shape>
            </item>
            <!-- BUTTON alttan gölge
              Android:right="5px" to make it round-->
            <item
                Android:bottom="5px"
                >
                <shape>
                    <padding Android:bottom="5dp"/>
                    <gradient
                        Android:startColor="#1c4985"
                        Android:endColor="#163969"
                        Android:angle="270" />
                    <corners
                        Android:radius="19dp"/>
                    <padding
                        Android:left="10dp"
                        Android:top="10dp"
                        Android:right="5dp"
                        Android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item Android:state_pressed="true">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid Android:color="#102746"/>
                    <corners Android:radius="19dp"/>

                </shape>
            </item>
            <!-- BUTTON -->
            <item Android:bottom="5px">
                <shape>
                    <padding Android:bottom="5dp"/>
                    <gradient
                        Android:startColor="#1c4985"
                        Android:endColor="#163969"
                        Android:angle="270" />
                    <corners
                        Android:radius="19dp"/>
                    <padding
                        Android:left="10dp"
                        Android:top="10dp"
                        Android:right="5dp"
                        Android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Wie benutzt man. In Button xml können Sie Ihre Größe und Ihr Gewicht ändern

<Button
                Android:text="+ add friends"
                Android:layout_width="120dp"
                Android:layout_height="40dp"
               Android:background="@drawable/cw_button_shadow" />

 enter image description here

12
Sam

Wenn Sie auf Geräte vor Lollipop-Geräten abzielen, können Sie Shadow-Layout verwenden, da es einfach ist und Sie es in verschiedenen Layouts verwenden können.


Füge Schatten-Layout zu deiner Gradle-Datei hinzu:

dependencies {
    compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.1'
}


Am oberen Rand des XML-Layouts, an dem sich Ihre Schaltfläche befindet, fügen Sie oben hinzu: 

xmlns:app="http://schemas.Android.com/apk/res-auto"

die benutzerdefinierten Attribute werden verfügbar gemacht.


Dann legst du ein Schattenlayout um dich. Button:

<com.dd.ShadowLayout
        Android:layout_marginTop="16dp"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:sl_shadowRadius="4dp"
        app:sl_shadowColor="#AA000000"
        app:sl_dx="0dp"
        app:sl_dy="0dp"
        app:sl_cornerRadius="56dp"> 

       <YourButton
          .... />

</com.dd.ShadowLayout>

Sie können dann die app:-Einstellungen an den gewünschten Schatten anpassen.

Ich hoffe es hilft.

11
torrao

Ich habe den Code von oben aus probiert und meinen eigenen Schatten erstellt, der etwas näher an dem ist, was ich erreichen möchte. Vielleicht hilft es auch anderen.

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <layer-list>
            <item Android:left="5dp" Android:top="5dp">
                <shape>
                    <corners Android:radius="3dp" />
                    <gradient
                        Android:angle="315"
                        Android:endColor="@Android:color/transparent"
                        Android:startColor="@Android:color/black"
                        Android:type="radial"
                        Android:centerX="0.55"
                        Android:centerY="0"
                        Android:gradientRadius="300"/>
                    <padding Android:bottom="1dp" Android:left="0dp" Android:right="3dp" Android:top="0dp" />
                </shape>
            </item>
            <item Android:bottom="2dp" Android:left="3dp">
                <shape>
                    <corners Android:radius="1dp" />
                    <solid Android:color="@color/colorPrimary" />


                </shape>
            </item>
        </layer-list>
    </item>

</selector>
9
RexSplode

Versuchen Sie dies, wenn dies für Sie funktioniert 

enter image description here

Android:background="@drawable/drop_shadow"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:paddingLeft="3dp"
        Android:paddingTop="3dp"
        Android:paddingRight="4dp"
        Android:paddingBottom="5dp"
2
DjHacktorReborn

Sie können dies versuchen:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:state_pressed="true">
<layer-list>
        <item Android:left="1dp" Android:top="3dp">
            <shape>
                <solid Android:color="#a5040d" />
                <corners Android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
  </item>
<item>
    <layer-list>
        <item Android:left="0dp" Android:top="0dp">
            <shape>
                    <solid Android:color="#99080d" />
                <corners Android:radius="3dip"/>
            </shape>
        </item>
        <item Android:bottom="3dp" Android:right="2dp">
            <shape>
                <solid Android:color="#a5040d" />
                <corners Android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
</item>

1
Mohammad Julfikar

Beispiel 9 Patchbild mit Schatten

Nach langem Suchen fand ich eine einfache Methode.

Erstellen Sie ein 9-Patch-Bild und wenden Sie es als Schaltfläche oder Hintergrund einer anderen Ansicht an.

Sie können ein 9-Patch-Bild mit Schatten erstellen, indem Sie diese website verwenden. 

Legen Sie das 9-Patch-Bild in Ihr gezeichnetes Verzeichnis und wenden Sie es als Hintergrund für die Schaltfläche an.

mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);
0
shijo