Android Görünümü gölgesi


104

Etrafı araştırdım ve bunu yapmanın uygun bir yolunu bulamadım. Görünümlerimde aşağıdaki gölge efektlerine sahip olmak istiyorum: görüntü açıklamasını buraya girin

görüntü açıklamasını buraya girin

Dürüst olmak gerekirse bu ikincisi gölge efekti uygulayarak mı yapılıyor bilmiyorum. Herhangi bir fikir?


1
Bunu mu demek istiyorsun? stackoverflow.com/questions/4406524/… (işaretli yanıtı değil, en yüksek oylu yanıtı kontrol edin)
Luke Vo

1
@DatVM, teşekkürler, bu hile yapacak gibi görünüyor, ancak android sdk'de yerleşik araçlar olabilir diye düşünüyordum. Örneğin, sadece birkaç kod satırı ekleyerek doğrusal düzenler için alt gölgeler eklemek: P
longwalker

Benzer soru - stackoverflow.com/q/52954743/9640177 - vektör çekilebilirine gölge ekleme
mayank1513

Yanıtlar:


158

Bu soru zaten yanıtlandı biliyorum ama benim bir bulduğunu bilmek istiyorum drawableüzerine Android Studioo söz konusu olan resimler çok benzer: Bu bir göz atın:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Şöyle görünüyor:

görüntü açıklamasını buraya girin

Umarım yardımcı olur

Düzenle

Yukarıdaki seçenek eski sürümleri içindir, Android Studiobu yüzden bulamayabilirsiniz. Daha yeni sürümler için:

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

Üstelik kendi özel şeklinize sahip olmak istiyorsanız, bunun gibi bir çizim yazılımı kullanmanızı Photoshopve çizmenizi öneririm .

görüntü açıklamasını buraya girin

Olarak kaydedin unutmayın .9.pngdosyası (örneğin: my_background.9.png)

Belgeleri okuyun: 9 yama çizin

Düzenle 2

Daha da iyi ve daha az sıkı çalışan bir çözüm, görünümlerin sınırlarla örtüşmesini önlemek için a CardViewve set kullanmaktır app:cardPreventCornerOverlap="false":

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

Ayrıca build.gradle, mevcut sürümün en son sürümünü eklediğinizden emin olun.

compile 'com.android.support:cardview-v7:26.0.0'

Teşekkürler, aslında çok benzer görünüyor. Ayrıca android için "google kart düzeni" buldum ve oldukça havalılar!
longwalker

6
Harika. Gelecekteki izleyiciler için sadece bir FYI, bu geldi /<sdk-path>/extras/android/support.
theblang

2
AcardView
Alex Chengalan

100

Android Studio 0.8.6 kullanıyorum ve bulamadım:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

bu yüzden onun yerine şunu buldum:

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

ve şuna benziyor:

görüntü açıklamasını buraya girin


1
ama onunla köşe yarıçapı ekleyemiyoruz ?!
Fay007

40

arka plan koymak @android:drawable/dialog_holo_light_frame, gölge verir, ancak arka plan rengini veya kenarlık stilini değiştiremezsiniz, bu nedenle katman listesi aracılığıyla bir arka plan koyabilirken gölgesinden yararlanmak daha iyidir.

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

şunu söyleyin altındaki çekilebilir klasöre kaydedin shadow.xml

bir görünüme atamak için, xml mizanpaj dosyasında arka planını ayarlayın

android:background="@drawable/shadow"

Çalışıp çalışmadığını kontrol ettin mi? İkinci <item> hiçbir şey yapmaz. Şeffaf veya yuvarlak köşeler olarak değiştiremiyorum.
zeeshan

2
Denediğim her şey arasında işe yarayan tek şey bu, teşekkürler.
Shyam Sunder

1
fantastik çözüm
user1974368

35

Res / drawable klasöründe aşağıdaki kodla card_background.xml oluşturun:

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

Ardından, kart düzenini istediğiniz öğeye aşağıdaki kodu ekleyin

android:background="@drawable/card_background"

aşağıdaki çizgi, kartın gölgesinin rengini tanımlar

<solid android:color="#BDBDBD"/>

10
Bu gerçekten bir gölge değil - çünkü solmaz. Daha çok iki tarafta bir sınır gibi.
ban-jeomühendislik

gölge değil
ShadeToD

24

CardView , android 5+ sürümünde size gerçek gölge verir ve bir destek kitaplığına sahiptir. Sadece görüşünüzü ona sarın ve bitirdiniz.

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

Bir sonraki bağımlılığı gerektirir.

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}

1
Bu tek doğru cevaptır, çünkü sadece CardViewuyumluluk modunda farklı yüksekliklerde farklı gölge seviyelerine sahiptir.
Jarett Millard

Daha net ve daha fazla kabiliyete sahip olduğu için MaterialCardView'ı öneriyorum.
H. Farid


12

Bu geç olabilir ama hala bunun cevabını arayanlar için git hub üzerinde bir proje buldum ve bu aslında ihtiyaçlarıma uyan tek proje. android-materialshadowninepatch

Sadece bu satırı build.gradle bağımlılığınıza ekleyin

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

şerefe. içerik oluşturucu için yaşasın! Happycodings


Hey @ralphgabb, Bu hala sizin için iyi çalışıyor mu yoksa ön lolipop cihazları için daha iyi bir çözümünüz var mı?
Swapnil

@Swapnil AndroidX'in bunu destekleyip desteklemediğinden emin değilim, artık Marshmallow öncesi cihazları desteklemiyorum.
ralphgabb

5

Bunun aptalca bir hack olduğunu biliyorum,
ancak v21 altında desteklemek istiyorsanız işte başarılarım.

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>

İşte sonuç:

V21 altında (xml ile yaptığınız şey budur) görüntü açıklamasını buraya girin

V21'in üstünde (gerçek yükseklik oluşturma) görüntü açıklamasını buraya girin

  • Tek önemli fark, görünümden iç alanı kaplamasıdır, böylece gerçek içerik alanınız > = lolipop cihazlarından daha küçük olabilir .

4

Doğru uygulanacak gölgelere ihtiyacınız varsa, aşağıdakileri yapmanız gerekir.

Arka plan çizimi ile tanımlanan bu görünümü düşünün:

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

Arka plan çizilebilir, köşeleri yuvarlatılmış bir dikdörtgen olarak tanımlanır:

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

Bu, gölgeleri uygulamanın önerilen yoludur https://developer.android.com/training/material/shadows-clipping.html#Shadows


2

Gölge etkisi için yükseklik özelliğini kullanın:

<YourView
    ...
    android:elevation="3dp"/>

Elevation'ı kullanmak, aygıtın Lollipop'u çalıştırmasını gerektirir.
Shane Rowatt

2

Yuvarlak gölgeyi göstermek için bunun gibi bir arka plan çizilebilir oluşturun.

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

Lütfen sağladığınız kod için de açıklama ekleyin.
Mangaldeep Pannu

Yalnızca çok güzel xml çözümü
Bruno Bieri

2

Bu soru eski olabilir, ancak gelecekte karmaşık gölge efektleri elde etmenin basit bir yolunu isteyen herkes için kitaplığıma buradan göz atın https://github.com/BluRe-CN/ComplexView

Kitaplığı kullanarak gölge renklerini değiştirebilir, kenarları düzeltebilir ve çok daha fazlasını yapabilirsiniz. İşte aradığınız şeyi başarmak için bir örnek.

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

Gölge rengini değiştirmek için app: shadowColor = "renk kodunuz" kullanın.


1

bu şekli arka plan olarak kullanın:

<?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>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.