it-swarm.com.de

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

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

enter image description here

In diesem Beispiel können wir sehen, dass der Rahmen um linearLayout herum nicht identisch ist. Wie kann ich dies mithilfe einer XML-Datei erstellen?

Im Moment kann ich nur eine einfache Umrandung 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>
112
wawanopoulos

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

Deshalb gibt es CardView. CardView | Android-Entwickler
Es ist nur ein FrameLayout, das die Erhöhung von 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 build.gradle eine Abhängigkeit hinzufügen:

compile 'com.Android.support:cardview-v7:23.+'
63
Ray Suhyun Lee

Die besten Ergebnisse erhalte ich 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:

 The 9 patch graphic:

Das Ergebnis:

 enter image description here

Die Quelle:

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

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) in "drawable" Ordner 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. Stellen Sie nun auf dem Layout fest, an dem Sie den Schatten möchten (Beispiel: LinearLayout), und fügen Sie dies in Android: Hintergrund 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 für mich funktioniert.

33
user3619170

Das ist so einfach:

Erstellen Sie eine gezeichnete Datei mit einem Farbverlauf 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 den rechten und linken Schatten einfach den Winkel des Verlaufs ändern

18
Morteza Rastgoo

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

enter image description here

Ergebnis:

enter image description here

Legen Sie das Bild in Ihren /res/drawable-Ordner.
Stellen Sie sicher, dass die Dateierweiterung .9.png ist, nicht .png.

Im Übrigen handelt es sich hierbei um eine modifizierte (auf die minimale Quadratgröße reduzierte) Größe einer vorhandenen Ressource, die sich im Ressourcenordner der API 19 sdk befindet.
Ich habe die roten Markierungen gelassen, da sie nicht schädlich zu sein scheinen, wie im draw9patch-Werkzeug gezeigt.

[BEARBEITEN]

Etwa 9 Patches, falls Sie nie etwas damit zu tun hatten.

Fügen Sie es einfach als Hintergrund für Ihre Ansicht hinzu. 

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

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

17
Fantômas

Sie erstellen eine Datei .xml 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"/>
9
Anh Duy

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

verwenden Sie: Android:elevation="3dp" Stellen Sie die Größe so ein, wie Sie es benötigen, und dies ist der beste und einfachste Weg, um den Schatten wie Schaltflächen und andere Standard-Android-Schatten zu erreichen.

1
Tamim

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>

Ich habe den besten Weg gefunden, dieses Problem zu lösen. 

  1. Sie müssen einen festen Rechteckhintergrund im Layout festlegen.

  2. Verwenden Sie diesen Code - ViewCompat.setElevation(view , value)

  3. Im übergeordneten Layoutsatz Android:clipToPadding="false"

1
Sarthak Gandhi

Sie können es mit 9-Patch-Grafiken machen, aber es ist falsch, weil Sie eine PNG-Datei verwenden müssen. Ich denke, Sie sollten XML-Datei (Drawable File) verwenden. Versuchen Sie, diesen Code zu verwenden

activity_main.xml

<LinearLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:padding="10dp"
Android:orientation="vertical">
<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="3dp"
    Android:layout_marginLeft="3dp"
    Android:layout_marginRight="3dp"
    Android:background="@drawable/gradient_top"/>
<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="horizontal">
    <LinearLayout
        Android:layout_width="3dp"
        Android:layout_height="match_parent"
        Android:layout_marginBottom="3dp"
        Android:background="@drawable/gradient_left"/>
        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:layout_marginRight="3dp"
            Android:layout_marginBottom="3dp"
            Android:background="@color/md_white_1000"
            Android:orientation="vertical">

        </LinearLayout>

    <LinearLayout
        Android:layout_width="3dp"
        Android:layout_height="match_parent"
        Android:layout_marginLeft="-4dp"
        Android:layout_marginBottom="3dp"
        Android:background="@drawable/gradient_right"/>
</LinearLayout>
<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="3dp"
    Android:layout_marginTop="-4dp"
    Android:layout_marginLeft="3dp"
    Android:layout_marginRight="3dp"
    Android:background="@drawable/gradient_bottom"/>

gradient_top.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<gradient
    Android:startColor="#dadada"
    Android:endColor="#f2f2f2"
    Android:angle="90"/>
</shape>

gradient_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<gradient
    Android:startColor="#dadada"
    Android:endColor="#f2f2f2"
    Android:angle="180"/>
</shape>

gradient_right.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<gradient
    Android:startColor="#dadada"
    Android:endColor="#f2f2f2"
    Android:angle="0"/>
</shape>

gradient_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<gradient
    Android:startColor="#dadada"
    Android:endColor="#f2f2f2"
    Android:angle="270"/>
</shape>

 enter image description here 

0

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

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

Sie können mit dieser Site einen Schatten erzeugen: http://inloop.github.io/shadow4Android/ . Stellen Sie die Parameter ein und laden Sie die 9-patch.png-Datei herunter.

0
CoolMind