Android LinearLayout: Dodaj obramowanie z cieniem wokół LinearLayout

Chciałbym utworzyć takie same obramowanie tego LinearLayout, jak w przykładzie:

W tym przykładzie widzimy, że obramowanie nie jest takie samo na całym linearLayout. Jak mogę to utworzyć za pomocą pliku XML do rysowania?

Na razie udało mi się utworzyć prostą ramkę wokół LinearLayout w następujący sposób:

<?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>

Spróbuj tego..

<?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>

Dlatego istnieje CardView. CardView | Programiści Androida
To tylko FrameLayout, który obsługuje podniesienie uprawnień w urządzeniach typu pre-Lollipop.

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

Aby z tego skorzystać, musisz dodać zależność do build.gradle:

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

Najlepsze rezultaty osiągam, używając grafiki z 9 patchami.

Możesz po prostu utworzyć indywidualną grafikę 9 łatek za pomocą następującego edytora: http://inloop.github.io/shadow4android/

Przykład:

Grafika z 9 patchami:

Wynik:

Źródło:

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

okej, wiem, że to już za późno. ale miałem te same wymagania. rozwiązałem w ten sposób

1. Najpierw utwórz plik xml (przykład: border_shadow.xml) w folderze „drawable” i skopiuj do niego poniższy kod.

<?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. teraz na układzie, w którym chcesz cień (przykład: LinearLayout), dodaj to w android: background

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

i to działało dla mnie.

To takie proste:

Utwórz plik do rysowania z gradientem takim jak ten:

dla cienia pod widokiem 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>

dla cienia nad widokiem 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>

i tak dalej dla prawego i lewego cienia po prostu zmień kąt gradientu :)

Alternatywnie możesz użyć obrazu z 9 wstawkami jako tła dla swojego układu, co pozwoli na bardziej „naturalne” cienie:

Wynik:

Umieść obraz w swoim /res/drawablefolderze.
Upewnij się, że rozszerzenie pliku to .9.png, a nie.png

Nawiasem mówiąc, jest to zmodyfikowany (zmniejszony do minimalnego rozmiaru kwadratowego) istniejący zasób znaleziony w folderze zasobów SDK API 19.
Zostawiłem czerwone znaczniki, ponieważ nie wydają się być szkodliwe, jak pokazano w narzędziu draw9patch.

[EDYTOWAĆ]

Około 9 łatek, na wypadek gdybyś nigdy nie miał z nimi nic wspólnego.

Po prostu dodaj go jako tło swojego widoku.

Obszary zaznaczone na czarno (lewy i górny) rozciągną się (pionowo, poziomo).
Obszary zaznaczone na czarno (prawy, dolny) definiują „obszar zawartości” (gdzie można dodać tekst lub widoki - jeśli chcesz, możesz nazwać nieoznaczone regiony „dopełnieniem”).

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

Tworzysz plik .xml w drawable o nazwie 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>

Następnie:

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

Użyj tej pojedynczej linii i miej nadzieję, że osiągniesz najlepszy wynik;

zastosowanie: android:elevation="3dp" Dostosuj rozmiar tak bardzo, jak potrzebujesz, i jest to najlepszy i najprostszy sposób na uzyskanie cieni, takich jak przyciski i inne domyślne cienie Androida. Daj mi znać, czy zadziałało!

Jeśli masz już obramowanie z kształtu, po prostu dodaj wysokość:

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

1. Najpierw utwórz plik XML o nazwie shadow.xml w folderze „drawable” i skopiuj do niego poniższy kod.

 <?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>

Następnie dodaj listę warstw jako tło w swoim LinearLayout.

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

Ya Mahdi aj --- dla 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>

Wiem, że to późno, ale może to komuś pomóc.

Możesz użyć constraintLayout i dodać następującą właściwość w xml,

        android:elevation="4dp"

Znalazłem najlepszy sposób na rozwiązanie tego problemu.

1. Musisz ustawić jednolite prostokątne tło w układzie.

2. Użyj tego kodu - ViewCompat.setElevation(view , value)

3. W nadrzędnym zestawie układów android:clipToPadding="false"