Android LinearLayout: Tambahkan perbatasan dengan bayangan di sekitar LinearLayout


147

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

masukkan deskripsi gambar di sini

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>

1
Anda dapat menggunakan backgroundproperti untuk itu ... membuat satu file XML dengan bentuk seperti persegi panjang, efek warna dan bayangan untuknya dan mengaturnya sebagai latar belakang untuk tata letak linier Anda ..
Pragnesh Ghoda シ

gunakan goresan untuk batas abu-abu dan efek padding juga
Pragnesh Ghoda

Saya pikir, bahwa dua tata letaknya xml, katakan satu adalah tata letak linier dan bagian dalam adalah tata letak relatif yang memiliki bantalan
Giru Bhai

@ Prag's Bisakah Anda membantu saya membuat file xml ini?
wawanopoulos

1
Cara alternatif bisa menggunakan gambar 9 patch sebagai latar belakang tata letak Anda. Ini akan memungkinkan bayangan yang benar-benar halus dan memudar (lebih realistis, menurut saya).
Phantômaxx

Jawaban:


257

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>

@Hariharan Terima kasih banyak! saya mencoba kode Anda dan sepertinya ok. Tapi, ada satu hal yang harus dilakukan, bagaimana saya bisa menambahkan batas tipis (1dp) di sebelah kiri dan di sebelah kanan linearlayout? (sebagai contoh)
wawanopoulos

2
@wawanopoulos Cukup gantikan "0dp"dengan "1dp"jawaban Hariharan.
Phantômaxx

Anda dapat menambahkan warna #EAEAEA ke tata letak induk sehingga akan seperti gambar pertanyaan
Samad

3
Saya juga menyarankan untuk ini, Anda dapat menggunakan <gradient>dalam <shape>untuk meningkatkan efek perbatasan, dan juga jika itu benar-benar efek yang dibutuhkan UI Anda, bukan hanya perbatasan warna solid.
patrickjason91

pastikan jika Anda memiliki tata letak bagian dalam dengan match_parent lalu beri margin 1 ke tata letak bagian dalam
Shaktisinh Jadeja

82

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

bagaimana bisa mengubah warna bayangan
Aditay Kaushal


1
perilaku yang sangat aneh pada perangkat dengan 4.4.4 (atau serupa). Margin besar ditambahkan ke cardview dan membuat UI sangat jelek.
Morteza Rastgoo

Ini harus menjadi jawaban yang diterima. Satu pembaruan kecil. Anda harus menggunakan androidx satu -> androidx.cardview.widget.CardView
bogdan

59

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:

Grafik 9 patch:

Hasil:

masukkan deskripsi gambar di sini

Sumber:

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

1
Bagaimana saya bisa menyembunyikan garis hitam? Tolong bantu
Isaac Darlong

@Isaac menyimpan gambar sebagai my_nine_patch.9.png (.9.png adalah gambar 9 batch)
arun

INI YANG TERBAIK!
Numanqmr

35

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.


20

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


di mana saya memanggil below_shadow? latar belakang tampilan?
Arthur Melo

1
Buat file xml below_shadow, lalu di tampilan Anda, tambahkan "Lihat" di tata letak Anda dan tetapkan below_shadow.xml sebagai latar belakang tampilan ini
Morteza Rastgoo

Saya melakukan hal yang sama seperti yang Anda katakan, tetapi "above_shadow" saya tidak transparan ketika saya menempatkan tampilan itu di tampilan kustom. Ini berfungsi dengan baik secara terpisah. Apa yang harus saya lakukan?
SoYoung

18

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

masukkan deskripsi gambar di sini

Hasil:

masukkan deskripsi gambar di sini

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/


1
Cukup tambahkan sebagai latar belakang Tampilan Anda. Area bertanda hitam (kiri dan atas) akan meregang (vertikal, horizontal). Area yang ditandai hitam (kanan, bawah) menentukan "area konten" (di mana dimungkinkan untuk menambahkan teks atau Tampilan - sebut saja "padding", jika Anda mau). Tutorial: radleymarx.com/blog/simple-guide-to-9-patch
Phantômaxx

9

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

3

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!


@ MichałZiobro Gunakan dengan layout Anda seperti jika Anda memiliki layout di atas yang lebih kecil dan Anda ingin menunjukkan bayangan. itu harus bekerja. Anda mungkin menemukan teks dan tombol Anda menjadi tidak terlihat tetapi ketika Anda menjalankan aplikasi Anda akan melihat bayangan terbaik. Saya tidak yakin itu semacam bug atau sesuatu tetapi dalam kasus saya ketika saya menggunakan kode itu membuat semua Tampilan saya tidak terlihat dalam pratinjau AS tetapi berfungsi paling baik di aplikasi ketika saya men-debug / meluncurkannya di perangkat saya. Beri tahu saya apakah itu berfungsi atau tidak. Terima kasih.
Tamim

3

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

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

2
Apakah perilaku di API <21?
CoolMind

1
Sayangnya itu tidak berfungsi sebelum Lollipop jadi Anda harus menggunakan beberapa jawaban lain dari pertanyaan ini. Tetapi jika Anda menargetkan ponsel yang lebih baru, ini adalah cara yang cukup mudah untuk melakukannya agar berfungsi dengan baik.
Krzynool

2

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

terima kasih banyak pak, kode Anda sepertinya ok ...
John dahat

1
@Johndahat ok-nya
Sudhir singh

1

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>

1

Saya tahu ini terlambat tetapi bisa membantu seseorang.

Anda bisa menggunakan constraintLayout dan menambahkan properti berikut di xml,

        android:elevation="4dp"

0

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"


2
Dalam kasus Anda tidak tahu, ini adalah implementasi saat ViewCompat.setElevation()metode pada kelas ViewCompat: public void setElevation(View view, float elevation) {}. Seperti yang Anda lihat, itu tidak diterapkan. Saya benar-benar ragu itu akan membantu, dan benar-benar bertanya-tanya apakah Anda benar-benar menguji jawaban Anda sendiri, lol
mradzinski
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.