Izgaralar

Izgara görünümü, içerik öğelerini temsil eden iki veya daha fazla sütun halinde görselleri ve her görselin altında kısa bir metni görüntüler. Bu görünüm, kullanıcıların seçimlerini yaparken öncelikle görsellere güvendikleri durumlarda en uygundur.

Izgaralar dikey olarak kaydırılabilir ve boyut, aralık ve sütun sayısı bakımından değişiklik gösterebilir. Izgaradaki içerik ayrıca kategoriler halinde gruplandırılabilir.

açıklama simgesi
Liste öğeleri bileşeni
Listeler, daha fazla açıklayıcı metin gerektiren içerikleri görüntülemek için alternatif bir yol sunar.

Anatomi

Izgaralar metin ve kullanıcı arayüzü kontrolleri içerir. Kullanıcıların bunlara yanıt vermesi gerektiğinden, diğer öğeler veya ekran kenarı tarafından asla gizlenmemelidirler.

1. Izgara öğesi
2. Birincil ve ikincil metin
3. Izgara arka planı

Özellikler

açıklama simgesi
Liste öğeleri bileşeni
Teknik özellikler, stil yönergeleri ve daha fazlası.

İçerik tablosu (3 veya 4 sütun)

Uygulama tablosu (4 sütun)

Üst satırda sık kullanılan öğelerin yer aldığı uygulama tablosu.

Izgara düzeninde gösterge simgesinin yerleşimi

Ölçeklendirme düzenleri

Bu referans düzenler, ızgaraların çeşitli genişlik ve yüksekliklerdeki ekranlara nasıl uyarlanacağını göstermektedir. Tüm piksel değerlerinin, herhangi bir örnekleme azaltma veya artırma işlemi gerçekleşmeden önce, işlenmiş pikseller cinsinden olduğunu unutmayın.

Standart genişlikteki ekranlar

Geniş ekranlar

Geniş ekranlar için 3 sütunlu düzen önerilir. 4 sütunlu düzen kullanılıyorsa, minimum 219dp karelik karo boyutu korunmalıdır.

Ekstra geniş ve süper geniş ekranlar

Çeşitli yüksekliklerdeki ekranlarda uygulama ızgaralarının dikey aralığı

Kısa ekranlar için, ızgara içerik öğeleri arasında ve uygulama simgeleri ile başlıklar arasında dikey boşluk azaltılmalıdır.

Stiller

Tipografi

Tip stili Yazı tipi Ağırlık Boyut (dp)
Gövde 1 Roboto Düzenli 32
Gövde 2 Roboto Düzenli 28
Gövde 3 Roboto Düzenli 24

Renk

Element Renk (gündüz modu) Renk (gece modu)
Birincil tür / simgeler Beyaz Beyaz @ %88
İkincil tür / simgeler Beyaz @ %72 Beyaz @ %60
Ayırıcı çizgi Beyaz @ %22 Beyaz @ %12
Izgara arka planı Siyah Siyah
İçerik perdesi Yok Siyah @ %22
Gradyan kesme Siyah renk (%0-100 arası, metin alanının %10'unda) Siyah renk (%0-100 arası, metin alanının %10'unda)

Bedenlendirme

Element Boyut (dp)
Uygulama simgesi 76
Minimum uygulama hücresi 135
Minimum içerik hücresi 158

Yükseklik

Element Renk Y ekseni Bulanıklık
Izgara karosu Siyah @ %22 2 2

Örnekler

Uygulama tablosu - gün
Uygulama ızgarası - gece
İçerik tablosu - gün
İçerik tablosu - gece
Kullanıcı içeriği kaydırmak için yukarı veya aşağı doğru sürükler.