Android LinearLayout: Tambahkan perbatasan dengan bayangan di sekitar LinearLayout

Saya ingin membuat perbatasan yang sama dengan LinearLayout ini sebagai contoh:

Dalam contoh ini, kita dapat melihat bahwa perbatasan tidak sama di sekitar LinearLayout. Bagaimana saya bisa membuat ini menggunakan file drawable XML?

Untuk saat ini, saya hanya dapat membuat perbatasan sederhana di sekitar LinearLayout seperti ini:

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

Coba ini..

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

Itu sebabnya CardView ada. CardView | Pengembang Android
Ini hanyalah FrameLayout yang mendukung peningkatan perangkat pra-lolipop.

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

Untuk menggunakan ini, Anda perlu menambahkan ketergantungan ke build.gradle:

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

Saya mendapatkan hasil terbaik dengan menggunakan grafik 9 patch.

Anda cukup membuat grafik 9 patch individual dengan menggunakan editor berikut: http://inloop.github.io/shadow4android/

Contoh:

Grafik 9 patch:

Hasil:

Sumber:

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

oke, saya tahu ini sudah terlambat. tetapi saya memiliki persyaratan yang sama. saya memecahkan seperti ini

1. Pertama buat file xml (contoh: border_shadow.xml) di folder "drawable" dan salin kode di bawah ini ke dalamnya.

<?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.Sekarang pada tata letak tempat Anda menginginkan bayangan (contoh: LinearLayout) tambahkan ini di 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">

dan itu berhasil untuk saya.

Ini sangat sederhana:

Buat file yang dapat digambar dengan gradien seperti ini:

untuk bayangan di bawah tampilan 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>

untuk bayangan di atas tampilan 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>

dan seterusnya untuk bayangan kanan dan kiri hanya mengubah sudut gradien :)

Sebagai alternatif, Anda mungkin menggunakan gambar patch 9 sebagai latar belakang untuk tata letak Anda, memungkinkan bayangan yang lebih "alami":

Hasil:

Letakkan gambar di /res/drawablefolder Anda .
Pastikan ekstensi file .9.pngtidak.png

Omong-omong, ini adalah modifikasi (dikurangi menjadi ukuran kuadrat minimum) dari sumber daya yang ada yang ditemukan di folder sumber daya API 19 SDK.
Saya meninggalkan spidol merah, karena tampaknya tidak berbahaya, seperti yang ditunjukkan pada alat draw9patch.

[EDIT]

Tentang 9 tambalan, seandainya Anda tidak pernah melakukan apa pun dengannya.

Cukup tambahkan sebagai latar belakang Tampilan Anda.

Area bertanda hitam (kiri dan atas) akan meregang (vertikal, horizontal).
Area yang ditandai hitam (kanan, bawah) mendefinisikan "area konten" (di mana dimungkinkan untuk menambahkan teks atau Tampilan - Anda dapat memanggil wilayah yang tidak ditandai "padding", jika Anda mau).

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

Anda membuat file .xml yang dapat digambar dengan nama 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>

Kemudian:

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

Gunakan satu baris ini dan mudah-mudahan Anda akan mencapai hasil terbaik;

gunakan: android:elevation="3dp" Sesuaikan ukuran sebanyak yang Anda butuhkan dan ini adalah cara terbaik dan paling sederhana untuk mencapai tombol seperti bayangan dan bayangan android default lainnya. Beri tahu saya jika itu berhasil!

Jika Anda sudah memiliki batas dari bentuk, tambahkan saja ketinggian:

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

1. Pertama buat nama file xml shadow.xml di folder "drawable" dan salin kode di bawah ini ke dalamnya.

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

Kemudian tambahkan layer-list sebagai latar belakang di LinearLayout Anda.

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

Saya tahu ini terlambat tetapi bisa membantu seseorang.

Anda bisa menggunakan constraintLayout dan menambahkan properti berikut di xml,

        android:elevation="4dp"

Saya menemukan cara terbaik untuk mengatasi ini.

1. Anda perlu mengatur latar belakang persegi panjang yang solid pada tata letak.

2. Gunakan kode ini - ViewCompat.setElevation(view , value)

3. Pada set tata letak induk android:clipToPadding="false"