Android Uygulamasına Gece Modu Eklemek

S. Serkan Çay
Newstack
Published in
4 min readOct 20, 2019

Son zamanlarda kullanıcı deneyiminde bir hayli önemli yere sahip olan gece modu sağladığı bir çok avantaj ile karşımıza çıkmaktadır. Özellikle yazılı içerik okuma hizmeti veren Newstack gibi uygulamalar için ekran parlaklığı ve beyaz ışıklar okuma deneyimine doğrudan etki etmektedir. Uzun süreli kullanımlarda daha koyu temalar tercih edilmektedir.

Bir uygulamanın gece moduna sahip olması bize ne gibi avantajlar sunuyor?

Daha az ışık daha fazla okuma deneyimi demektir. Sunduğu en büyük avantaj koyu bir temanın az ışıklı ortamlarda daha iyi okuma deneyimi sunmasıdır. Güç kullanımını büyük ölçüde azaltmaktadır. AMOLED ekranlar siyah piksellere enerji vermediği için güç kullanımı büyük oranda azalmaktadır.

Gece Temasını Uygulamak

Uygulamaların tema ayarları styles.xml dosyası içerisinde bulunmaktadır. Gece modu teması ekleyebilmek için iki yol vardır.

Eğer Support Library kullanıyorsanız uygulama temanız aşağıdaki gibi olmalıdır.

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

Eğer Material Components kullanıyorsanız aşağıdaki gibi olmalıdır.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

Uygulamanızın temasını bunlara göre ayarladığınızda Android sistemi eğer cihazda gece modu aktifse doğrudan koyu renkleri tercih edecektir. Yazı tipleri, arka planlar otomatik ayarlanacaktır.

Dinamik Olarak Gece Modunu Değiştirmek

Uygulama temasını değiştirirken bizim için dört seçenek bulunmaktadır.

  • Light Theme
  • Dark Theme
  • Set by Battery Saver (Android P ve öncekiler için önerilir)
  • System Default (Android Q için önerilir)

AppCompatDelegate.setDefaultNightMode(int mode) metodu kullanılarak tema kullanıcı seçimine göre değiştirilebilmektedir.

Aşağıdaki örnek kod parçası gece modunu açma ve kapama işlemini göstermektedir.

Tam Uyumluluk

Tüm bu anlatılanlar geliştiricinin doğrudan müdahale etmediği ve renklendirmeleri özelleştirmediği durumlar için geçerlidir. Çoğu kompleks uygulamalarda renklendirmelere doğrudan müdahaleler olmaktadır. Peki tüm bunları gece moduna nasıl uygulayacağız?

Normal Mod
Gece Modu

Örnek uygulamamıza ait ekran görüntülerine baktığımızda başlık yazı rengini özel olarak belirlediğimiz için gece modunda uyumsuzluk yaşanmıştır. Diğer yazılar varsayılan renklerinde kullanılmış ve Android bunları otomatik olarak koyu moda ayarlamıştır.

Uygulama Kaynaklarını Hazır Hale Getirmek

Bilindiği üzere /res klasörü içerisinde uygulama kaynaklarımızı tutmaktayız. Resim ve grafik dosyalarımız /res/drawable içerisinde, renk ve stil tanımlamalarımız /res/values içerisinde yer almaktadır.

Özel olarak gece modunda değişmesini istediğimiz kaynaklar için yeni klasör oluşturmalıyız. Değişmesini istediğimiz klasörlerin sonuna -night belirteci eklemeliyiz. /res/drawable-night, /res/values-night gibi..

Örnek uygulamamızın colors.xml dosyasına baktığımızda özel renk tanımlamalarını görebilmekteyiz.

Şimdi /res içerisinde values-night adında yeni bir klasör oluşturalım ve içerisine colors.xml adında bir dosya ekleyelim.

Android Studio bizim için gruplandırma yaparak işimizi kolaylaştırmaktadır. Eklediğimiz yeni colors.xml içerisinde koyu tema için daha açık renkleri tercih ederek bir düzenleme yapalım.

Gece Modu

Uygulamamızı çalıştırdığımızda renklerin değiştiğini görmekteyiz.

Ekranda bulunan güneş simgesi gece moduyla uyumluluk göstermemektedir. Onun yerine gece modu için daha beyaz tonlarda bir ay simgesi ekleyelim.

/res klasörü içerisinde drawable-night adında yeni bir klasör oluşturalım ve gece modunda kullanılmasını istediğimiz resmi içerisine ekleyelim.

Not: Resimler aynı isimde olmalıdır.

Android Studio bizim için otomatik gruplandırma yapmaktadır.

Uygulamamızı çalıştırdığımızda her iki mod için değişiklikleri aşağıdaki gibi görmekteyiz.

Normal Mod
Gece Modu

Gece Moduna Göre Koşullar Eklemek

Bir projede her zaman renkleri ve resimleri uyumlu hale getirmek yeterli olmayabilir. Öyle durumlar vardır ki kod tarafında doğrudan müdahil olup gerekli değişiklikleri yapmanız gerekir.

Örnek uygulamamızdaki “Benim yazı rengim Kotlin ile değiştirildi” yazısının rengini kod tarafında değiştirelim. Öncelikle uygulamamızın hangi modda çalıştığını bilmemiz gerekmektedir.

Konfigürasyonlara ulaşıp UI_MODE değerini alıyoruz ve buna göre gerekli kontrolleri yapıp uygulamanın gece modunda çalışıp çalışmadığına karar veriyoruz.

NightModeUtil sınıfını kullanarak aşağıdaki gibi yazı rengimizi değiştirebiliriz.

Önemli Nokta

Her mod değiştirildiğinde activity yeniden oluşturulur. Eğer kullanıcının kaldığı yerden devam etmesi gereken bir durum varsa konfigürasyon değişiklikleri yakalanmalıdır. Bunun için AndroidManifest.xml içerisinde ilgili activity için android:configChanges=”uiMode” eklenmelidir.

Eğer tema değişikliği olursa kod tarafında onConfigurationChanged metodu tetiklenir. Bu metod içerisinde durumları kaydedebiliriz.

Son

Örnek projeyi GitHub hesabımda bulabilirsiniz.

Teşekkürler..

--

--