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?

android  shadow  dropshadow 
— Longwalker
kaynak
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'
— Rick
kaynak
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

— Repo
kaynak
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"
— Mohamed Selim
kaynak
Ç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"/>
— Vivek Varma
kaynak
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.+'
}
— Ilya Gazman
kaynak
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

— ralphgabb
kaynak
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 .
— Wonsuc
kaynak
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

— Shangeeth Sivan
kaynak
2

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

<YourView
    ...
    android:elevation="3dp"/>
— Ofek Aşçılık
kaynak
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>
— Gaurav iqlance
kaynak
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.

— BluRe.CN
kaynak
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>
— Bay Hosseini
kaynak
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.