Android View Schatten

100

Ich suchte herum und konnte keinen geeigneten Weg finden, dies zu tun. Ich möchte die folgenden Schatteneffekte auf meine Ansichten haben: Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Um ehrlich zu sein, weiß ich nicht, ob dieser zweite durch Anwenden eines Schatteneffekts erfolgt. Irgendwelche Ideen?

Longwalker
quelle
1
Du meinst das? stackoverflow.com/questions/4406524/… (überprüfen Sie die Antwort mit der höchsten Stimme, nicht die markierte Antwort)
Luke Vo
1
@DatVM, danke, das scheint der Trick zu sein, aber ich dachte, vielleicht gibt es eingebaute Tools in Android SDK. Zum Beispiel Hinzufügen von Schlagschatten für lineare Layouts durch Hinzufügen einiger Codezeilen: P
Longwalker
Ähnliche Frage - stackoverflow.com/q/52954743/9640177 - Hinzufügen von Schatten zu Vektor zeichnbar
mayank1513

Antworten:

157

Ich weiß , diese Frage wurde bereits beantwortet , aber ich möchte Sie wissen , dass ich ein fand drawableauf , Android Studiodass sehr ähnlich ist zu den Bildern Sie in Frage: ein Blick auf diese:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Es sieht aus wie das:

Geben Sie hier die Bildbeschreibung ein

Hoffe es wird hilfreich sein

Bearbeiten

Die obige Option gilt für ältere Versionen von, Android Studiosodass Sie sie möglicherweise nicht finden. Für neuere Versionen:

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

Wenn Sie eine eigene Form haben möchten, empfehle ich außerdem, eine Zeichensoftware wie zu verwenden Photoshopund diese zu zeichnen.

Geben Sie hier die Bildbeschreibung ein

Vergessen Sie nicht , es zu speichern .9.pngDatei (Beispiel: my_background.9.png)

Lesen Sie die Dokumentation: Zeichnen Sie 9-Patch

Bearbeiten 2

Eine noch bessere und weniger hart arbeitende Lösung besteht darin, a CardViewund set app:cardPreventCornerOverlap="false"zu verwenden, um zu verhindern, dass Ansichten die Grenzen überschneiden:

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

</android.support.v7.widget.CardView>

Stellen Sie außerdem sicher, dass Sie die neueste Version in der build.gradleaktuellen Version enthalten haben

compile 'com.android.support:cardview-v7:26.0.0'
Rick
quelle
Danke, eigentlich sieht es sehr ähnlich aus. Ich habe auch "Google Card Layout" für Android gefunden, und sie sind ziemlich cool!
Longwalker
6
Genial. Nur ein FYI für zukünftige Zuschauer, das ist in /<sdk-path>/extras/android/support.
Theblang
2
Was ist mit einemcardView
Alex Chengalan
100

Ich verwende Android Studio 0.8.6 und konnte nicht finden:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Also fand ich dies stattdessen:

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

und es sieht so aus:

Geben Sie hier die Bildbeschreibung ein

Repo
quelle
1
aber wir können damit keinen Eckenradius hinzufügen?!
Fay007
40

Wenn Sie einen Hintergrund von setzen @android:drawable/dialog_holo_light_frame, erhalten Sie Schatten, aber Sie können weder die Hintergrundfarbe noch den Rahmenstil ändern. Daher ist es besser, vom Schatten zu profitieren, während Sie dennoch einen Hintergrund über eine Ebenenliste einfügen können

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

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

Speichern Sie es im Zeichenordner unter say shadow.xml

Um es einer Ansicht zuzuweisen, legen Sie in der XML-Layoutdatei den Hintergrund fest

android:background="@drawable/shadow"
Mohamed Selim
quelle
Hast du überprüft, ob es funktioniert? Das zweite <item> macht nichts. Ich kann es nicht in transparente oder abgerundete Ecken ändern.
Zeeshan
2
Unter allem, was ich versucht habe, ist dies das einzige, was funktioniert, danke.
Shyam Sunder
1
fantastische Lösung
user1974368
33

Erstellen Sie card_background.xml im Ordner res / drawable mit dem folgenden Code:

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

<item>
    <shape android:shape="rectangle">
        <solid android:color="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

Fügen Sie dann dem Element, zu dem Sie das Kartenlayout möchten, den folgenden Code hinzu

android:background="@drawable/card_background"

Die folgende Zeile definiert die Farbe des Schattens für die Karte

<solid android:color="#BDBDBD"/>
Vivek Varma
quelle
10
Dies ist nicht wirklich ein Schatten - weil es nicht verblasst. Es ist eher wie eine Grenze an zwei Seiten.
Ban-Geoengineering
Es ist kein Schatten
ShadeToD
24

CardView bietet Ihnen echten Schatten in Android 5+ und verfügt über eine Support-Bibliothek. Schließen Sie einfach Ihre Ansicht damit ein und Sie sind fertig.

<android.support.v7.widget.CardView>
     <MyLayout>
</android.support.v7.widget.CardView>

Es erfordert die nächste Abhängigkeit.

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}
Ilya Gazman
quelle
1
Dies ist die einzig richtige Antwort, da CardViewim Kompatibilitätsmodus nur unterschiedliche Schattenstufen für unterschiedliche Höhen vorhanden sind.
Jarett Millard
Ich empfehle MaterialCardView, da es klarer ist und mehr Funktionen bietet.
H. Farid
12

Dies mag spät sein, aber für diejenigen, die noch nach einer Antwort suchen, habe ich ein Projekt auf Git Hub gefunden und dies ist das einzige, das tatsächlich meinen Bedürfnissen entspricht. android-materialshadowninepatch

Fügen Sie diese Zeile einfach zu Ihrer build.gradle-Abhängigkeit hinzu

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

Prost. Daumen hoch für den Schöpfer! happycodings

ralphgabb
quelle
Hey @ralphgabb, funktioniert das immer noch gut für dich oder hast du eine bessere Lösung für Pre-Lollipop-Geräte?
Swapnil
@ Swapnil nicht sicher, ob AndroidX dies jetzt unterstützt Ich unterstütze jedoch keine Pre-Marshmallow-Geräte mehr.
Ralphphgabb
5

Ich weiß, dass dies dumm ist,
aber wenn Sie unter v21 unterstützen möchten, sind hier meine Erfolge.

rechteck_mit_10dp_radius_weiß_bg_und_schatten.xml

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

    <!-- Shadow layers -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_1" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_2" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_3" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_4" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_5" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_6" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_7" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_8" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_9" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_10" />
        </shape>
    </item>

    <!-- Background layer -->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>

rechteck_mit_10dp_radius_weiß_bg_und_schatten.xml (v21)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="10dp" />
</shape>

view_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
    android:elevation="7dp"
    android:gravity="center"
    android:minWidth="240dp"
    android:minHeight="240dp"
    android:orientation="horizontal"
    android:padding="16dp"
    tools:targetApi="lollipop">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hello World !" />

</LinearLayout>

Hier ist das Ergebnis:

Unter v21 (das hast du mit xml gemacht) Geben Sie hier die Bildbeschreibung ein

Über v21 (Real Elevation Rendering) Geben Sie hier die Bildbeschreibung ein

  • Der einzige wesentliche Unterschied besteht darin, dass der Innenraum der Ansicht belegt wird, sodass Ihr tatsächlicher Inhaltsbereich kleiner sein kann als > = Lutschergeräte .
Wonsuc
quelle
3

Wenn Sie die richtigen Schatten benötigen, um angewendet zu werden, müssen Sie Folgendes tun.

Betrachten Sie diese Ansicht, die mit einem zeichnbaren Hintergrund definiert ist:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

Der zeichnbare Hintergrund wird als Rechteck mit abgerundeten Ecken definiert:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

Dies ist die empfohlene Methode zum Anwenden von Schatten. Überprüfen Sie dies unter https://developer.android.com/training/material/shadows-clipping.html#Shadows

Shangeeth Sivan
quelle
2

Verwenden Sie die Elevation-Eigenschaft für Schatteneffekte:

<YourView
    ...
    android:elevation="3dp"/>
Ofek Ashery
quelle
Für die Verwendung von Elevation muss das Gerät Lollipop ausführen.
Shane Rowatt
2

Erstellen Sie einen Hintergrund, der wie folgt gezeichnet werden kann, um abgerundete Schatten anzuzeigen.

<?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="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#20d5d5d5" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#30cbcbcb" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#50bababa" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/gray_100" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>
gaurav iqlance
quelle
Bitte fügen Sie auch eine Beschreibung für den von Ihnen angegebenen Code hinzu.
Mangaldeep Pannu
Sehr schöne Nur-XML-Lösung
Bruno Bieri
2

Diese Frage mag alt sein, aber für alle, die in Zukunft auf einfache Weise komplexe Schatteneffekte erzielen möchten, besuchen Sie meine Bibliothek hier https://github.com/BluRe-CN/ComplexView

Mit der Bibliothek können Sie Schattenfarben ändern, Kanten optimieren und vieles mehr. Hier ist ein Beispiel, um das zu erreichen, wonach Sie suchen.

<com.blure.complexview.ComplexView
        android:layout_width="400dp"
        android:layout_height="600dp"
        app:radius="10dp"
        app:shadow="true"
        app:shadowSpread="2">

        <com.blure.complexview.ComplexView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:color="#fdfcfc"
            app:radius="10dp" />
    </com.blure.complexview.ComplexView>

Verwenden Sie zum Ändern der Schattenfarbe die App: shadowColor = "Ihr Farbcode".

BluRe.CN
quelle
1

Verwenden Sie diese Form als Hintergrund:

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

    <item android:drawable="@android:drawable/dialog_holo_light_frame"/>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="@color/gray_200" />
        </shape>
    </item>

</layer-list>
Herr Hosseini
quelle