Android View Schatten

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

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

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:

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.

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'

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:

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"

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

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.+'
}

Verwenden Sie die Elevation-Eigenschaft, um einen Schatteneffekt zu erzielen:

<View ...
    android:elevation="2dp"/>

Dies darf nur nach Version 21 verwendet werden. Überprüfen Sie diesen Link: http://developer.android.com/training/material/shadows-clipping.html

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

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)

Über v21 (Real Elevation Rendering)

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

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

Verwenden Sie die Elevation-Eigenschaft für Schatteneffekte:

<YourView
    ...
    android:elevation="3dp"/>

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>

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

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>