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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.