So geben Sie Button Schatten

Antworten:

133

Verwenden Sie diesen Ansatz, um das gewünschte Aussehen 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 Ihrem XML-Layout:

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>
Festus Tamakloe
quelle
Das sieht cool aus, aber als ich es versuchte, mochte es Intellij nicht. Als ich im sah doc für itemsagt , es android:drawableist erforderlich .
Johnny Lambada
1
Das Schließen des </
select
5
Es ist nicht genau das, was der Fragesteller wollte, da diese Lösung das Gegenteil bewirkt: Hintergrund mit Verlaufsschaltflächen und feste Schattenfarbe. Und das scheint ganz anders zu sein als der äußere Schatten
1
Kann ich es so machen, dass ein textColor-Selektor in den obigen Selektor eingebrannt wird? Ich muss also nicht jedes Mal, wenn ich eine Schaltfläche definiere, beide Hintergrund-textColor einstellen, sondern muss nur den Hintergrund einstellen ...?
JohnyTex
<selector>und <item>werden nicht benötigt. Das Bild wird zurückgesetzt, wie @ user4702646 sagte.
CoolMind
52

Für Android Version 5.0 und höher

versuchen Sie die Höhe für andere Ansichten ..

android:elevation="10dp"

Für Knöpfe,

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:

Geben Sie hier die Bildbeschreibung ein

Ranjith Kumar
quelle
Ich würde diesen Ansatz gerne verwenden, aber meine Schaltflächen werden dynamisch (dh im Code) in einem Grid-Steuerelement erstellt, nicht deklarativ (tatsächlich verwende ich die kostenlose Xamarin-Version, also Mono lib). Scheint keine einfache Methode zu sein, um nur ein Attribut festzulegen.
Jrichview
@jrichview siehe diese Antwort & auch Kommentar stackoverflow.com/a/24459128/3879847
Ranjith Kumar
Hey, wie kann ich das als Drawable verwenden, wenn ich die Form meines Buttons mit Drawable einstelle?
Egor Randomize
19

Hier ist meine Schaltfläche mit Schatten cw_button_shadow.xml im drawable Ordner

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

Geben Sie hier die Bildbeschreibung ein

Sam
quelle
13

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


Fügen Sie Ihrer Gradle-Datei ein Schattenlayout hinzu :

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


Fügen Sie oben das XML-Layout, in dem Sie Ihre Schaltfläche haben, oben hinzu :

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

Es werden die benutzerdefinierten Attribute verfügbar gemacht.


Dann legen Sie ein Schattenlayout um Ihre Schaltfläche :

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

Anschließend können Sie die app:Einstellungen an Ihren gewünschten Schatten anpassen .

Ich hoffe es hilft.

Torrao
quelle
Schlechte Bibliothek mit Abwertungen und nicht mehr unterstützt. Außerdem scheint es nur dunkle / schwarze Schatten zuzulassen, keine hellen.
Forsberg
10

Ich habe den Code von oben ausprobiert und meinen eigenen Schatten erstellt, der etwas näher an dem liegt, 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>
RexSplode
quelle
1
Bitte fügen Sie einen Screenshot bei.
CoolMind
3

Versuchen Sie dies, wenn dies für Sie funktioniert

Geben Sie hier die Bildbeschreibung ein

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"
DjHacktorReborn
quelle
1

Beispiel 9 Patchbild mit Schatten

Nach vielen Recherchen fand ich eine einfache Methode.

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

Auf dieser Website können Sie ein 9-Patch-Bild mit Schatten erstellen .

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

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

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>

Julfikar
quelle