Android LinearLayout: Fügen Sie einen Rahmen mit Schatten um ein LinearLayout hinzu

147

Ich möchte den gleichen Rand dieses LinearLayout wie im Beispiel erstellen:

Geben Sie hier die Bildbeschreibung ein

In diesem Beispiel können wir sehen, dass der Rand rund um das lineare Layout nicht gleich ist. Wie kann ich dies mit einer XML-Zeichnungsdatei erstellen?

Im Moment kann ich nur einen einfachen Rahmen um das LinearLayout herum erstellen:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <corners
      android:radius="1dp"
      android:topRightRadius="0dp"
      android:bottomRightRadius="0dp"
      android:bottomLeftRadius="0dp" />
  <stroke
      android:width="1dp"
      android:color="#E3E3E1" />

  <solid android:color="@color/blanc" />

</shape>

android border android-linearlayout

— Wawanopoulos
quelle

1

Sie können die backgroundEigenschaft dafür verwenden ... erstellen Sie eine XML-Datei mit Form wie Rechteck, Farbe und Schatteneffekt und legen Sie sie als Hintergrund für Ihr lineares Layout fest.

— Pragnesh Ghoda シ

Verwenden Sie den Strich auch für den grauen Rand und den Polstereffekt

— Pragnesh Ghoda シ

Ich denke, dass seine zwei Layout-XML, sagen wir, ein lineares Layout und das innere ist ein relatives Layout mit Polsterung

— Giru Bhai

@ Prag's Könnten Sie mir bitte beim Erstellen dieser XML-Datei helfen?

— Wawanopoulos

1

Eine alternative Möglichkeit könnte darin bestehen, ein 9-Patch-Bild als Hintergrund für Ihr Layout zu verwenden. Dies würde einen wirklich glatten, verblassenden Schatten ermöglichen (meiner Meinung nach sehr realistisch).

— Phantômaxx

257

Versuche dies..

<?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="#CABBBBBB"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

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

— Hariharan
quelle

@ Hariharan Vielen Dank! Ich habe Ihren Code ausprobiert und es scheint in Ordnung zu sein. Es gibt jedoch noch eine Sache zu tun: Wie kann ich links und rechts vom linearen Layout einen dünnen Rand (1 dp) hinzufügen? (als Beispiel)

— Wawanopoulos

2

@wawanopoulos Ersetzen Sie einfach "0dp"mit "1dp"in Hariharan Antwort.

— Phantômaxx

Sie können dem übergeordneten Layout die Farbe #EAEAEA hinzufügen, damit es genau wie das Fragenbild aussieht

— Samad

3

Ich würde auch vorschlagen, dass Sie <gradient>in Ihrem verwenden können <shape>, um den Randeffekt zu verbessern, und auch, wenn es wirklich der Effekt ist, den Ihre Benutzeroberfläche benötigt, anstatt nur einfarbigen Rand.

— Patrickjason91

Stellen Sie sicher, dass Sie, wenn Sie ein inneres Layout mit match_parent haben, dem inneren Layout Rand 1 geben

— Shaktisinh Jadeja

82

Deshalb gibt es CardView. CardView | Android-Entwickler
Es ist nur ein FrameLayout, das das Erhöhen in Pre-Lollipop-Geräten unterstützt.

<android.support.v7.widget.CardView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardUseCompatPadding="true"
    app:cardElevation="4dp"
    app:cardCornerRadius="3dp" >

    <!-- put whatever you want -->

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

Um dies zu verwenden, müssen Sie Abhängigkeit hinzufügen zu build.gradle:

compile 'com.android.support:cardview-v7:23.+'

— Ray Suhyun Lee
quelle

Wie kann man die Schattenfarbe ändern

— ?

Schatten ist sehr schwach stackoverflow.com/questions/49076188/…

— user924

1

sehr seltsames Verhalten bei Geräten mit 4.4.4 (oder ähnlichem). Der Kartenansicht in wird ein großer Rand hinzugefügt, der die Benutzeroberfläche sehr hässlich macht.

— Morteza Rastgoo

Dies sollte die akzeptierte Antwort sein. Ein kleines Update. > Androidx.cardview.widget.CardView - Sie sollten die androidx ein verwenden

— bogdan

59

Ich erhalte die besten Ergebnisse mit einer 9-Patch-Grafik.

Sie können einfach eine individuelle 9-Patch-Grafik mit dem folgenden Editor erstellen: http://inloop.github.io/shadow4android/

Beispiel:

Die 9-Patch-Grafik:

Das Ergebnis:

Die Quelle:

<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:background="@drawable/my_nine_patch"

— funcoder
quelle

1

Wie kann ich die schwarze Linie ausblenden? Bitte helfen Sie

— Isaac Darlong

@Isaac speichere das Bild als my_nine_patch.9.png (.9.png ist 9 Batch-Bild)

— arun

DAS IST DAS BESTE!

— Numanqmr

35

Okay, ich weiß, das ist viel zu spät. aber ich hatte die gleiche Anforderung. Ich habe so gelöst

1.Erstellen Sie zunächst eine XML-Datei (Beispiel: border_shadow.xml) im Ordner "drawable" und kopieren Sie den folgenden Code hinein.

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

<item>
    <shape>
        <!-- set the shadow color here -->
        <stroke
            android:width="2dp"
            android:color="#7000" />

        <!-- setting the thickness of shadow (positive value will give shadow on that side) -->

        <padding
            android:bottom="2dp"
            android:left="2dp"
            android:right="-1dp"
            android:top="-1dp" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->

<item>
    <shape>
        <solid android:color="#fff" />
        <corners android:radius="3dp" />
    </shape>
</item>

2. Fügen Sie nun in dem Layout, in dem Sie den Schatten sehen möchten (Beispiel: LinearLayout), diesen in android: background hinzu

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dip"
    android:background="@drawable/border_shadow"
    android:orientation="vertical">

und das hat bei mir funktioniert.

— user3619170
quelle

20

Das ist so einfach:

Erstellen Sie eine zeichnbare Datei mit einem Verlauf wie folgt:

für Schatten unter einer Ansicht below_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="270" >
</gradient>
</shape>

für Schatten über einer Ansicht above_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="90" >
</gradient>
</shape>

und so weiter für rechten und linken Schatten ändern Sie einfach den Winkel des Verlaufs :)

— Morteza Rastgoo
quelle

Wo nenne ich den unten stehenden Schatten? Hintergrund einer Ansicht?

— Arthur Melo

1

Erstellen Sie eine XML-Datei unter_Schatten, fügen Sie dann in Ihrer Ansicht eine "Ansicht" in Ihr Layout ein und legen Sie unter_Schatten.xml als Hintergrund für diese Ansicht fest

— Morteza Rastgoo

Ich habe das Gleiche getan, wie Sie gesagt haben, aber mein "Above_Shadow" ist nicht transparent, wenn ich diese Ansicht in die benutzerdefinierte Ansicht eingefügt habe. Es funktioniert gut separat. Was soll ich machen?

— SoYoung

18

Alternativ können Sie ein 9-Patch-Bild als Hintergrund für Ihr Layout verwenden, um "natürlichere" Schatten zu erzielen:

Geben Sie hier die Bildbeschreibung ein

Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Legen Sie das Bild in Ihren /res/drawableOrdner.
Stellen Sie sicher, dass die Dateierweiterung .9.pngnicht lautet.png

Dies ist übrigens eine Änderung (reduziert auf die minimale quadratische Größe) einer vorhandenen Ressource, die im API 19 sdk-Ressourcenordner gefunden wird.
Ich habe die roten Markierungen verlassen, da sie nicht schädlich zu sein scheinen, wie im draw9patch-Tool gezeigt.

[BEARBEITEN]

Ungefähr 9 Patches, falls Sie nie etwas damit zu tun hatten.

Fügen Sie es einfach als Hintergrund Ihrer Ansicht hinzu.

Die schwarz markierten Bereiche (links und oben) werden gedehnt (vertikal, horizontal).
Die schwarz markierten Bereiche (rechts, unten) definieren den "Inhaltsbereich" (wo Sie Text oder Ansichten hinzufügen können - Sie können die nicht markierten Bereiche "Auffüllen" nennen, wenn Sie möchten).

Tutorial: http://radleymarx.com/blog/simple-guide-to-9-patch/

— Phantômaxx
quelle

1

Fügen Sie es einfach als Hintergrund Ihrer Ansicht hinzu. Die schwarz markierten Bereiche (links und oben) werden gedehnt (vertikal, horizontal). Die schwarz markierten Bereiche (rechts, unten) definieren den "Inhaltsbereich" (wo Sie Text oder Ansichten hinzufügen können - nennen Sie es "Auffüllen", wenn Sie möchten). Tutorial: radleymarx.com/blog/simple-guide-to-9-patch

— Phantômaxx

9

Sie erstellen eine XML-Datei in drawable mit dem Namen drop_shadow.xml:

<?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="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp"/>
                </shape>
            </item>
            ...
        </layer-list>
    </item>-->
    <item>
        <layer-list>
            <!-- SHADOW LAYER -->
            <!--<item android:top="4dp" android:left="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>-->
            <!-- SHADOW LAYER -->
            <item>
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>
            <!-- CONTENT LAYER -->
            <item android:bottom="3dp" android:left="1dp" android:right="3dp" android:top="1dp">
                <shape>
                    <solid android:color="#ffffff" />
                    <corners android:radius="1dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Dann:

<LinearLayout
...
android:background="@drawable/drop_shadow"/>

— Anh Duy
quelle

3

Verwenden Sie diese einzelne Zeile und hoffentlich erzielen Sie das beste Ergebnis.

Verwendung: android:elevation="3dp" Passen Sie die Größe so weit an, wie Sie möchten. Dies ist der beste und einfachste Weg, um Schatten wie Schaltflächen und andere Standard-Android-Schatten zu erzielen. Lassen Sie mich wissen, ob es funktioniert hat!

— Tamim
quelle

@ MichałZiobro Verwenden Sie es mit Ihren Layouts, als ob Sie ein Layout über einem anderen haben, das kleiner ist und Sie den Schatten zeigen möchten. es sollte funktionieren. Möglicherweise werden Ihre Texte und Schaltflächen unsichtbar, aber wenn Sie die App ausführen, sehen Sie den besten Schatten. Ich bin mir nicht sicher, ob es sich um einen Fehler oder etwas anderes handelt, aber in meinem Fall, wenn ich diesen Code verwende, werden alle meine Ansichten in der AS-Vorschau unsichtbar, aber in der App funktioniert es am besten, wenn ich ihn auf meinem Gerät debugge / starte. Lassen Sie mich wissen, ob es funktioniert hat oder nicht. Vielen Dank.

— Tamim

3

Wenn Sie den Rand bereits von der Form haben, fügen Sie einfach die Höhe hinzu:

<LinearLayout
    android:id="@+id/layout"
    ...
    android:elevation="2dp"
    android:background="@drawable/rectangle" />

— Krzynool
quelle

2

Was ist ein Verhalten bei API <21?

— CoolMind

1

Leider funktioniert es vor Lollipop nicht, daher sollten Sie einige der anderen Antworten auf diese Frage verwenden. Wenn Sie jedoch auf neuere Telefone abzielen, ist dies eine ziemlich einfache Methode, die gut funktioniert.

— Krzynool

2

1.Erstellen Sie zunächst einen XML-Dateinamen shadow.xml im Ordner "drawable" und kopieren Sie den folgenden Code hinein.

 <?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="#CABBBBBB" />
                <corners android:radius="10dp" />
            </shape>
        </item>

        <item
            android:bottom="6dp"
            android:left="0dp"
            android:right="6dp"
            android:top="0dp">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/white" />
                <corners android:radius="4dp" />
            </shape>
        </item>
    </layer-list>

Fügen Sie dann die Ebenenliste als Hintergrund in Ihr LinearLayout ein.

<LinearLayout
        android:id="@+id/header_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shadow"
        android:orientation="vertical">

— Sudhir singh
quelle

— Vielen

1

@ Johndahat es ist ok

— Sudhir singh

1

Ya Mahdi aj --- für RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#7d000000"
                android:endColor="@android:color/transparent"
                android:angle="90" >
            </gradient>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="3dp"
        android:top="0dp"
        android:bottom="3dp">
        <shape android:shape="rectangle">
            <padding
                android:bottom="40dp"
                android:top="40dp"
                android:right="10dp"
                android:left="10dp"
                >
            </padding>
            <solid android:color="@color/Whitetransparent"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

— سیدرسول میرعظیمی
quelle

1

Ich weiß, dass es spät ist, aber es könnte jemandem helfen.

Sie können ein ConstraintLayout verwenden und die folgende Eigenschaft in die XML-Datei einfügen:

        android:elevation="4dp"

— Harishanth Raveendren
quelle

0

Ich habe den besten Weg gefunden, dies anzugehen.

Sie müssen einen festen rechteckigen Hintergrund für das Layout festlegen.
Verwenden Sie diesen Code - ViewCompat.setElevation(view , value)
Auf dem übergeordneten Layoutsatz android:clipToPadding="false"

— Sarthak Gandhi
quelle

2

Falls Sie es nicht wussten, ist dies die aktuelle Implementierung der ViewCompat.setElevation()Methode in der ViewCompat-Klasse : public void setElevation(View view, float elevation) {}. Wie Sie sehen können, ist es nicht implementiert. Ich bezweifle wirklich, dass es hilfreich sein wird, und frage mich wirklich, ob Sie tatsächlich Ihre eigene Antwort getestet haben, lol

— mradzinski