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:
Dürüst olmak gerekirse bu ikincisi gölge efekti uygulayarak mı yapılıyor bilmiyorum. Herhangi bir fikir?
Yanıtlar:
Bu soru zaten yanıtlandı biliyorum ama benim bir bulduğunu bilmek istiyorum drawable
üzerine Android Studio
o 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:
Umarım yardımcı olur
Düzenle
Yukarıdaki seçenek eski sürümleri içindir, Android Studio
bu 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ı Photoshop
ve çizmenizi öneririm .
Olarak kaydedin unutmayın .9.png
dosyası (ö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 CardView
ve 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'
/<sdk-path>/extras/android/support
.
cardView
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"
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"/>
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.+'
}
CardView
uyumluluk modunda farklı yüksekliklerde farklı gölge seviyelerine sahiptir.
Bir gölge efekti elde etmek için yükseklik özelliğini kullanın:
<View ...
android:elevation="2dp"/>
Bu yalnızca v21'den sonra kullanılmak içindir, şu bağlantıya bakın: http://developer.android.com/training/material/shadows-clipping.html
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
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)
V21'in üstünde (gerçek yükseklik oluşturma)
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
Gölge etkisi için yükseklik özelliğini kullanın:
<YourView
...
android:elevation="3dp"/>
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>
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.
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>