Android sistem çubukları

Durum çubuğu ve gezinme çubuğu birlikte sistem çubukları olarak adlandırılır. Bu cihazlar pil seviyesi, saat ve bildirim uyarıları gibi önemli bilgileri görüntüler ve her yerden doğrudan cihaz etkileşimi sağlar.

İster Android OS ile ister giriş yöntemleriyle, ister diğer cihaz özellikleriyle etkileşimler için kullanıcı arayüzü tasarlıyor olun; sistem çubuklarının belirginliğini dikkate almak çok önemlidir. Uygulandıklarından emin olmak için sistem çubuklarını çoğu katmanın üst kısmında tutun.

Şekil 1: Sistem çubuklarının arkasındaki görüntüler

Çalmalar

  • Kullanıcı arayüzü güvenli bölgeleri, sistem etkileşimleri, giriş yöntemleri, ekran kesimleri ve diğer cihaz özelliklerini hesaba katmak için tasarımlarınıza sistem çubukları ekleyin. Sistem çubuklarının en üst katmanda tutulması, bunların dikkate alınmasını sağlar.

  • Yapılması gereken: Sistem çubuklarını şeffaf hale getirin ve uygulamanızı tam ekrana yerleştirin. Uçtan uca deneyim için çubukların altındaki kullanıcı arayüzünü sürdürün.

  • Her iki çubuğu da şeffaf olacak şekilde ayarlayamıyorsanız çubukların renklerinin uygulamanızın gövdesinin rengiyle eşleştiğinden emin olun. Örneğin, alt gezinme çubuğunun rengini hareket çubuğu rengiyle ve üst durum çubuğu rengini gövde rengiyle eşleştirin.

    Şekil 2: Sistem çubuğu renklerinin uygulamanızın gövde rengiyle eşleştiğinden emin olun
  • Hareketin alt kısmına dokunma hareketleri eklemekten veya hedefleri sürüklemekten kaçının. Bunlar, uçtan uca ve hareketle gezinmeyle çakışır.

    Şekil 3: Sistem hareketi ekleri. Dokunma hedeflerini bu alanların altına yerleştirmekten kaçının

İçeriğinizi sistem çubuklarının arkasına çizin

Uçtan uca özelliği, Android'in daha etkileyici bir deneyim için sistem çubuklarının altına kullanıcı arayüzünü çizmesini sağlar. Gezinme çubuğunu şeffaf hale getirmek, kullanıcıların yaygın bir isteği olduğu için uçtan uca kullanmanızı öneririz. (Uçtan uca nasıl destekleneceği hakkında bilgi edinin).

Uygulamalar, eklere tepki vererek içerikteki çakışmaları giderebilir. Ekler, Android OS kullanıcı arayüzünün gezinme çubuğu veya durum çubuğu gibi bölümleriyle ya da ekran kesimleri gibi fiziksel cihaz özellikleriyle çakışmaması için uygulama içeriğinizin ne kadar doldurulması gerektiğini açıklar.

Uçtan uca kullanım alanları için tasarım yaparken aşağıdaki ek türlerine dikkat edin:

  • Sistem çubuğu ekleri, hem dokunulabilir hem de sistem çubukları tarafından görsel olarak gizlenmemesi gereken kullanıcı arayüzü için geçerlidir.
  • Sistem hareketi ek kümeleri, sistem tarafından kullanılan ve uygulamanıza göre öncelikli olan hareketle gezinme alanlarına uygulanır.

Durum çubuğu

Android'de, durum çubuğunda bildirim simgeleri ve sistem simgeleri bulunur. Kullanıcı, bildirim gölgesine erişmek için durum çubuğunu aşağı çekerek etkileşimde bulunur.

Şekil 4: Üst uygulama çubuğunun üst kısmında vurgulanmış durum çubuğu bölgesi

Bağlam, günün saati, kullanıcı tarafından belirlenen tercihler veya temalara ve diğer parametrelere bağlı olarak durum çubuğu farklı görünebilir. Aşağıdaki örneklerde olduğu gibi durum çubuğu stilini de ayarlayabilirsiniz.

Şekil 5: Açık ve koyu temada durum çubuğu.

Uçtan uca gerekli olduğundan, uygulama içeriğinizin ekranın tamamını kapladığından emin olun. Aşağıdaki örnekte gösterildiği gibi uçtan uca içerik barındıran şeffaf sistem çubukları kullanın.

Şekil 6: Uçtan uca özelliği kullanan şeffaf çubuklar; içeriğinizin en fazla ekran alanını kullanarak parlamasını sağlamak için idealdir.


Şekil 7: Sistem çubuklarınızın stilini, içeriğinizi iyileştirecek veya uygulamanızın markasına uygun olacak şekilde biçimlendirin. Sistem çubuklarını varsayılan özelliklere ayarlanmış olarak bırakmayın.

Bir bildirim geldiğinde, durum çubuğunda genellikle bir simge görünür. Bu, kullanıcıya bildirim çekmecesinde göreceği bir şey olduğunu bildirir. Bu, kanalınızı temsil eden uygulama simgeniz veya simgeniz olabilir. Bildirim tasarımı konusuna bakın.

Şekil 8: Durum çubuğundaki bildirim simgesi

Durum çubuğu stilini ayarla

Durum çubuğu arka planını uygulama temanızın bir parçası olarak özel bir renk veya stille, şeffaflık ve opaklıkla ayarlayın.

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

Arka plan rengini manuel olarak ayarlıyorsanız en iyi kontrast için isteğe bağlı olarak durum çubuğu içeriğini açık veya koyu olarak biçimlendirebilirsiniz.

Ekran kesimleri ve durum çubuğu

Ekran kesimi, bazı cihazlarda ön sensörlere yer açmak için ekran yüzeyine kadar uzanan bir alandır. Durum çubuklarının görünümünü etkileyebilir. Ekran kesimleri, üreticiye bağlı olarak değişiklik gösterebilir.

Ekran kesimlerini destekleme hakkında bilgi edinin.

Şekil 9: Ekran kesimi örnekleri

Android'de geri, ana sayfa ve genel bakış kontrollerini kullanarak kullanıcılar gezinmeyi kontrol edebilir:

  • Geri, doğrudan önceki görünüme geri döner.
  • Ana ekran, uygulamadan çıkıp cihazın ana ekranına geçiş yapar.
  • Genel Bakış'ta uygulamaların açık ve yakın zamanda açıldığı gösterilir.

Kullanıcılar, hareketle gezinme (önerilen) ve üç düğmeli gezinme gibi çeşitli gezinme çubuğu yapılandırmalarından seçim yapabilir.

Hareketle gezinme

Android 10'da (API düzeyi 29) kullanıma sunulan hareketle gezinme, önerilen gezinme türüdür ancak kullanıcının tercihini geçersiz kılamazsınız. Hareketle gezinme; geri, ana sayfa ve genel bakış düğmelerini kullanmaz, bunun yerine uygun ödeme için tek bir hareket tutma yeri gösterir. Kullanıcılar, ana ekrana gitmek için ekranın sol veya sağ kenarından geri, ileri ve aşağıdan yukarıya doğru kaydırarak etkileşimde bulunur. Yukarı kaydırıp basılı tuttuğunuzda genel bakış açılır.

Hareketle gezinme, mobil cihazlarda ve büyük ekranlarda tasarım yapmak için daha ölçeklenebilir bir gezinme kalıbıdır. En iyi kullanıcı deneyimini sağlamak için hareketle gezinmeyi şu şekilde hesaba katın:

  • Uçtan uca içerikleri destekleme.
  • Hareketle gezinme eklerinin altına etkileşim veya dokunma hedefi eklemekten kaçının.

Hareketle gezinmeyi uygulama hakkında bilgi edinin.

Şekil 10: Hareket tutma yeri gezinme çubuğu

Üç düğmeyle gezinme

Üç düğmeli gezinme; geri, ana sayfa ve genel bakış için üç düğme sağlar.

Şekil 11: Üç düğmeli gezinme çubuğu

Diğer gezinme çubuğu varyasyonları

Android sürümüne ve cihaza bağlı olarak, kullanıcılarınız diğer gezinme çubuğu yapılandırmaları kullanabilir. Örneğin, iki düğmeli gezinme ana ekran ve geri için iki düğme sağlar.

Şekil 12: İki düğmeli gezinme çubuğu

Gezinme stili ayarlama

Aşağıdaki örnekte, gezinme stilinin nasıl uygulanacağı gösterilmektedir.

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

Android, hareketle gezinme modunda veya düğme modlarında kullanıcı arayüzünün tüm görsel korumasını işler.

  • Hareketle gezinme modu: Sistem, dinamik renk uyarlaması uygular. Bu adaptasyonda sistem çubuklarının içeriği, arkalarındaki içeriğe göre renk değiştirir. Aşağıdaki örnekte, gezinme çubuğundaki tutma yeri açık renkli içeriğin üzerine yerleştirildiğinde koyu renge (veya tam tersi) değişir.

    Şekil 13: Dinamik renk adaptasyonu
  • Düğme modları: Sistem, sistem çubuklarının (API düzeyi 29 veya üstü için) arkasına yarı saydam bir çerçeve veya şeffaf bir sistem çubuğu (API düzeyi 28 veya altı için) uygular.

    Şekil 14: Sistem çubuklarının arkasındaki içeriğe göre renk değiştirdiği dinamik renk uyarlama

Klavye ve gezinme

Şekil 15: Gezinme çubukları olan dokunmatik klavye

Her gezinme türü, dokunmatik klavyeye uygun şekilde tepki vererek kullanıcının klavye türünü kapatma, hatta değiştirme gibi işlemler yapmasına olanak tanır. Klavye geçişinin sorunsuz olmasını sağlamak için uygulama geçişinin, klavyenin ekranın altından yukarı ve aşağı kaydırılarak senkronize edilmesi için WindowInsetsAnimationCompat aracını kullanın.

Yoğun içerik modu

Şekil 16: Yatay odaklı mobil cihazda tam ekran deneyimini gösteren yoğun içerik modu

Tam ekran deneyimine ihtiyaç duyduğunuzda (ör. kullanıcı film izlerken) sistem çubuklarını gizleyebilirsiniz. Kullanıcı, sistem kontrollerinde gezinmek veya sistem denetimleriyle etkileşimde bulunmak için sistem çubuklarını ve kullanıcı arayüzünü göstermek için yine de dokunabilmelidir. Tam ekran modları için tasarım yapma hakkında daha fazla bilgi edinin veya kapsamlı mod için sistem çubuklarının nasıl gizleneceğini öğrenin.