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:

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

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

23

Gunakan properti elevasi untuk mendapatkan efek bayangan:

<View ...
    android:elevation="2dp"/>

Ini hanya untuk digunakan setelah v21, lihat tautan ini: http://developer.android.com/training/material/shadows-clipping.html

mossman 252
sumber

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)

Di atas v21 (rendering elevasi nyata)

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

Android View shadow

Jawaban: