Android View shadow

102

Saya mencari-cari, dan saya tidak dapat menemukan cara yang tepat untuk melakukan ini. Saya ingin memiliki efek bayangan berikut pada pandangan saya: masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

Sejujurnya, saya tidak tahu apakah yang kedua ini dilakukan dengan menerapkan efek bayangan. Ada ide?

android  shadow  dropshadow 
— longwalker
sumber
1
Maksudmu ini? stackoverflow.com/questions/4406524/… (periksa jawaban suara tertinggi, bukan jawaban yang ditandai)
— Luke Vo
1
@DatVM, terima kasih, ini sepertinya melakukan trik, tapi saya berpikir mungkin ada alat bawaan di sdk android. Misalnya, menambahkan bayangan jatuh untuk tata letak linier hanya dengan menambahkan beberapa baris kode: P
— longwalker
Pertanyaan serupa - stackoverflow.com/q/52954743/9640177 - menambahkan bayangan ke
— drawable

Jawaban:

158

Aku tahu pertanyaan ini sudah dijawab tapi aku ingin kau tahu bahwa aku menemukan drawablepada Android Studioyang sangat mirip dengan foto yang Anda miliki dalam pertanyaan: Lihatlah ini:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Ini terlihat seperti ini:

masukkan deskripsi gambar di sini

Semoga bermanfaat

Edit

Opsi di atas adalah untuk versi yang lebih lama Android Studiosehingga Anda mungkin tidak menemukannya. Untuk versi yang lebih baru:

android:background="@android:drawable/dialog_holo_light_frame"

Selain itu, jika ingin memiliki custom shape sendiri, saya sarankan untuk menggunakan software like Photoshopand draw.

masukkan deskripsi gambar di sini

Jangan lupa menyimpannya sebagai .9.pngfile (contoh my_background.9.png:)

Baca dokumentasinya: Gambar 9-patch

Edit 2

Solusi yang lebih baik dan tidak terlalu sulit adalah menggunakan a CardViewdan set app:cardPreventCornerOverlap="false"untuk mencegah tampilan tumpang tindih dengan batas:

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

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

Pastikan juga untuk menyertakan versi terbaru dalam build.gradle, saat ini

compile 'com.android.support:cardview-v7:26.0.0'
— Rick
sumber
Terima kasih, sebenarnya, tampilannya sangat mirip. Saya juga menemukan "tata letak kartu google" untuk android, dan mereka cukup keren!
— longwalker
6
Hebat. Hanya FYI untuk pemirsa masa depan, ini masuk /<sdk-path>/extras/android/support.
— theblang
2
Bagaimana dengan menggunakancardView
— Alex Chengalan
100

Saya menggunakan Android Studio 0.8.6 dan saya tidak dapat menemukan:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

jadi saya menemukan ini sebagai gantinya:

android:background="@android:drawable/dialog_holo_light_frame"

dan terlihat seperti ini:

masukkan deskripsi gambar di sini

— Repo
sumber
1
tapi kita tidak bisa menambahkan radius sudut dengan itu ?!
— Fay007
40

menempatkan latar belakang @android:drawable/dialog_holo_light_frame, memberi bayangan tetapi Anda tidak dapat mengubah warna latar belakang atau gaya batas, jadi lebih baik memanfaatkan bayangan itu, sambil tetap dapat menempatkan latar belakang melalui daftar lapisan

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

simpan di folder drawable di bawah say shadow.xml

untuk menetapkannya ke tampilan, dalam file layout xml setel latar belakangnya 

android:background="@drawable/shadow"
— Mohamed Selim
sumber
Apakah Anda sudah memeriksa apakah itu berhasil? <item> kedua tidak melakukan apapun. Saya tidak bisa mengubahnya menjadi sudut transparan atau bulat.
— zeeshan
2
Di antara semua yang saya coba, ini adalah satu-satunya yang berhasil, terima kasih.
— Shyam Sunder
1
solusi fantastis
— pengguna1974368
34

Buat card_background.xml di folder res / drawable dengan kode berikut:

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

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

Kemudian tambahkan kode berikut ke elemen yang Anda inginkan untuk tata letak kartunya

android:background="@drawable/card_background"

baris berikut menentukan warna bayangan untuk kartu tersebut 

<solid android:color="#BDBDBD"/>
— Vivek Varma
sumber
10
Ini sebenarnya bukan bayangan - karena tidak pudar. Ini lebih seperti perbatasan di dua sisi.
— ban-geoengineering
ini bukan bayangan
— ShadeToD
24

CardView memberi Anda bayangan sebenarnya di Android 5+ dan memiliki pustaka dukungan. Cukup bungkus pandangan Anda dengannya dan selesai.

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

Ini membutuhkan ketergantungan berikutnya.

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}
— Ilya Gazman
sumber
1
Ini adalah satu-satunya jawaban yang benar, karena hanya CardViewjuga memiliki tingkat bayangan yang berbeda-beda untuk berbagai ketinggian dalam mode compat.
— Jarett Millard
Saya merekomendasikan MaterialCardView karena lebih jelas dan memiliki lebih banyak kemampuan.
— H. Farid
12

Ini mungkin terlambat tetapi bagi mereka yang masih mencari jawaban untuk ini saya menemukan proyek di git hub dan ini adalah satu-satunya yang benar-benar sesuai dengan kebutuhan saya. android-materialshadowninepatch

Cukup tambahkan baris ini pada dependensi build.gradle Anda

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

Bersulang. diacungi jempol untuk pencipta! happycodings

— ralphgabb.dll
sumber
Hai @ralphgabb, Apakah ini masih berfungsi dengan baik untuk Anda atau Anda memiliki solusi yang lebih baik untuk perangkat pra-lollipop?
— Swapnil
@Swapnil tidak yakin apakah AndroidX mendukungnya sekarang, saya tidak lagi mendukung perangkat pra-Marshmallow.
— ralphgabb
5

Saya tahu ini bodoh sekali,
tetapi jika Anda ingin mendukung di bawah v21, inilah pencapaian saya.

rectangle_with_10dp_radius_white_bg_and_shadow.xml

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

    <!-- Shadow layers -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_1" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_2" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_3" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_4" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_5" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_6" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_7" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_8" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_9" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_10" />
        </shape>
    </item>

    <!-- Background layer -->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>

rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="10dp" />
</shape>

view_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
    android:elevation="7dp"
    android:gravity="center"
    android:minWidth="240dp"
    android:minHeight="240dp"
    android:orientation="horizontal"
    android:padding="16dp"
    tools:targetApi="lollipop">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hello World !" />

</LinearLayout>

Inilah hasilnya:

Di bawah v21 (ini adalah yang Anda dibuat dengan xml) masukkan deskripsi gambar di sini

Di atas v21 (rendering elevasi nyata) masukkan deskripsi gambar di sini

  • Satu perbedaan signifikan adalah itu akan menempati ruang dalam dari tampilan sehingga area konten Anda yang sebenarnya bisa lebih kecil dari > = perangkat lollipop .
— wonsuc
sumber
3

Jika Anda membutuhkan bayangan dengan benar untuk diterapkan maka Anda harus melakukan hal berikut.

Pertimbangkan tampilan ini, yang ditentukan dengan drawable latar belakang:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

Drawable latar belakang didefinisikan sebagai persegi panjang dengan sudut membulat:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

Ini adalah cara yang disarankan untuk mengaplikasikan bayangan, lihat ini https://developer.android.com/training/material/shadows-clipping.html#Shadows

— Shangeeth Sivan
sumber
2

Gunakan properti elevasi untuk pengaruh bayangan:

<YourView
    ...
    android:elevation="3dp"/>
— Ofek Ashery
sumber
Menggunakan Elevasi membutuhkan perangkat untuk menjalankan Lollipop.
— Shane Rowatt
2

Buat latar belakang drawable seperti ini untuk menunjukkan bayangan bulat.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#20d5d5d5" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#30cbcbcb" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#50bababa" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/gray_100" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>
— iqlance gaurav
sumber
Silakan tambahkan juga deskripsi untuk kode yang telah Anda berikan.
— Mangaldeep Pannu
Solusi khusus xml yang sangat bagus
— Bruno Bieri
2

Pertanyaan ini mungkin sudah lama, tetapi bagi siapa pun di masa depan yang menginginkan cara sederhana untuk mencapai efek bayangan kompleks, lihat perpustakaan saya di sini https://github.com/BluRe-CN/ComplexView

Menggunakan pustaka, Anda dapat mengubah warna bayangan, mengubah tepi, dan banyak lagi. Berikut adalah contoh untuk mencapai apa yang Anda cari.

<com.blure.complexview.ComplexView
        android:layout_width="400dp"
        android:layout_height="600dp"
        app:radius="10dp"
        app:shadow="true"
        app:shadowSpread="2">

        <com.blure.complexview.ComplexView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:color="#fdfcfc"
            app:radius="10dp" />
    </com.blure.complexview.ComplexView>

Untuk mengubah warna bayangan, gunakan app: shadowColor = "kode warna Anda".

— BluRe.CN
sumber
1

gunakan bentuk ini sebagai latar belakang: 

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

    <item android:drawable="@android:drawable/dialog_holo_light_frame"/>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="@color/gray_200" />
        </shape>
    </item>

</layer-list>
— Tuan Hosseini
sumber
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.