Materyal ve Karanlık Tema Uygulamaları Oluşturun

Android uygulamasının görünümü ve hissi, bu uygulamanın kullanıcılarının arttırılmasında çok önemlidir. Kullanıcılar için daha iyi ve etkileşimli bir UI sağlamanın çeşitli yolları vardır. Bunun bir yolu Android Tema Sistemini kullanmaktır. Kullanıcılara daha iyi bir kullanıcı deneyimi sağlamak için kullanılabilir, ancak bunun dışında temaları geliştirici bakış açısından kullanmanın çeşitli yararları vardır. Onlar:

• Yeniden kullanılabilir paftalar: Bir tema sisteminin etkin kullanımı, paftaların farklı ama benzer bir pafta için kod yazmadan tekrar tekrar kullanılmasını sağlar.
• Kod bakımı: Düzenler tekrar tekrar kullanıldığından kodun korunmasına yol açar, yani kod satırı sayısı azalır, kod bakımı daha iyidir.
• Temalar: Daha iyi bir kullanıcı deneyimi için uygulamanızdaki bir Material (Tema) veya Dark (Tema) teması gibi çeşitli modern gün uygulamalarını kullanabilirsiniz.

Bu yüzden, bu blogda, Android’deki stilleri kullanarak materyal ve karanlık temalar uygulamasının nasıl oluşturulacağını öğreneceğiz. Tüm blogun zaman çizelgesi aşağıdadır:

• Temalar ve stiller arasındaki fark
• Malzeme Teması
• Karanlık Tema
• Kapanış notu

Öyleyse başlayalım.

Temalar ve stiller arasındaki fark

Uygulamanıza bir stil ya da tema uygulamaya çalıştığınızda hiç bir duruma geldiniz ancak bu işe yaramadı mı? Android geliştiricilerinin çoğu, temalar ve stiller arasındaki temel farkı bilmiyor. Bu nedenle, Materyal temasına ve Karanlık temaya daha derine dalmadan önce, temalar ve stiller arasındaki farkı öğrenmeliyiz.

Herkesin stiller ve temalar arasında kafa karışıklığı yaratmasının en büyük nedeni, stiller için <style> adında tek bir etikete sahip olmamız, ancak Android’de <theme> etiketi diye bir şey bulunmaması . Aşağıda bu ikisi arasındaki farklar:

• Kullanım: Stil bir nitelikler topluluğudur ve yalnızca belirli bir görünüm için ve başka hiçbir şey için kullanılmaz. Diğer tarafta ise tema bir stildir ve yalnızca belirli bir görünüm türünde değil tüm uygulama veya etkinlik veya görünümde kullanılabilir.
• Anahtar-değer: Stilleri bir harita olarak düşünebilirsiniz, çünkü bir anahtar ve değeri vardır. Dolayısıyla, görünüm niteliklerine sahibiz ve bu görünüm niteliklerine göre, onunla bir stil içinde ilişkilendirilen bazı değerlere sahibiz. Temada, tema özelliklerimiz ve değerlerimiz var. Bir stil örneği aşağıdadır:

Aşağıda bir tema örneği verilmiştir:

Bazen aşağıdaki gibi kodumuzda? Attr / komutunu kullanırız :

<item name="android:background">?attr/colorAccent</item>

• Kullanım şekli: Projede uygulanma biçimlerine göre stil ve tema arasında fark vardır. Bir görüntüye biraz stil uygularsanız, o zaman çocuğa değil, yalnızca o görüntüye uygulanır. Ancak diğer yandan, bir temaya bir tema uygularsanız, o tema bu çocuğa da uygulanacaktır.

Dikkat edilmesi gereken şey: Hiyerarşi durumunda, tema konusunda dikkatli olmalısınız. Bir ebeveyn görünüm adında var varsayalım Üst_öğe_1 ve adında iki çocuk görünümü vardır child1 ve child2 . Aynı android: background özelliği, her üç görünümde de kullanılıyor. Peki hangi mülk kullanılacak? Hiyerarşi durumunda, en yeni çocuğun mülkiyeti dikkate alınacak ve ebeveynlerin değerlerinin geri kalanı göz ardı edilecektir. Yani, bizim örneğimizde kullanılan özelliklerin değerlerinin child1 ve alt2 değerini herhangi kullanılacak Üst_öğe_1 dikkate alınmayacaktır.

Malzeme Teması

Böylece stiller ve temalar arasındaki farkı gördük. Şimdi Malzeme Temasını öğrenmek için zamanı.

Material Theming, Material Design kullanarak uygulamanıza yeni bir görünüm ve his kazandırmak için kullanılır. Material Theming’i kullanarak uygulamanızda çok geniş bir etkililik düzeyi elde edebilirsiniz.

Malzeme Bileşenleri temaları, bir öğeyi global ölçekte biçimlendirmek için kullanılan çok sayıda özniteliğe sahiptir. Tüm özellikler genel olarak üç kategoriye ayrılabilir:

1. Renk
2. matbaacılık
3. şekil

Sadece yukarıda belirtilen üç kategorinin tümüne değerler vererek, uygulamanızda çok çeşitli kaliteli tasarım elde edebilirsiniz.

Renk

Malzeme temasında renkle ilgili çeşitli özellikler vardır. Özellikleri esas olarak birincil, ikincil, yüzey, bir hata oluşur ve üzerinde bu renklerin varyantı. Tüm bu özelliklerin açıklaması aşağıdadır:

• colorPrimary: Bu, uygulamanız için kullanılan birincil renktir. Bu sizin temeliniz olacak veya ana renginizi söyleyebilirsiniz.
• colorOnPrimary: Bu, birincil renginize yerleştirilen öğeler için kullanılır. Yani, bu birincil rengin aksine. Bu çok önemlidir, çünkü birincil renginizi ve ana rengin üzerinde bulunan öğeyi aynı olarak ayarlarsanız, kullanıcı bu ikisi arasında ayrım yapamayacağından kötü bir kullanıcı deneyimi yaşatır.
• colorPrimaryVarient: Bu, birincil renginizin biraz daha açık veya daha koyu bir çeşididir.
• colorSecondary: Bu, herhangi bir uygulamada birincil renkten sonra en çok kullanılan renktir.
• colorOnSecondary: Bu, bazı ikincil rengin üstünde bulunan böyle bir öğenin rengini ayarlamak istediğinizde kullanılır.
• colorSecondaryVarient: Bu, ikincil renginizin biraz daha açık veya daha koyu bir çeşididir.
• colorSurface: Bir yüzeyin rengini ayarlamak istediğinizde kullanılır. Bu yüzey, Malzeme Sayfalarına benzer herhangi bir şey olabilir.
• colorOnSurface: Bu renk, colorSurface yüzeyinde bulunan öğeler için kullanılır.
• colorError: Bu renk bazı hata mesajlarını göstermek için kullanılır. Genellikle kırmızı renktedir.
• colorOnError: Bu renk, colorError’un üstünde görüntülenen öğeler için kullanılır.
• colorBackground: Bu renk, diğer tüm ekranlar içeriğinin arkasındaki içerik için kullanılır.
• colorOnBackground: Bu, colorBackground’un üzerine yerleştirilen öğeler için kullanılır.

Aşağıdaki renkleri kullanarak uygulama temanızda yukarıdaki renkleri kullanabilirsiniz:

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <item name="colorPrimary">#0336ff</item>
    <item name="colorOnPrimary">#ffffff</item>
    <item name="colorPrimaryVariant">#0035c9</item>
    <item name="colorSecondary">#ffde03</item>
    <item name="colorOnSecondary">#000000</item>
    <item name="colorSecondaryVariant">#ffc000</item>
    <item name="colorSurface">#ffffff</item>
    <item name="colorOnSurface">#000000</item>
    <item name="colorError">#b00020</item>
    <item name="colorOnError">#FFFFFF</item>
    <item name="android:colorBackground">@color/background</item>
    <item name="colorOnBackground">#212121</item>
</style>

Ana renginiz veya renkler ile ilgili herhangi bir şey için doğru ikincil renk almayı zor buluyorsanız, Malzeme Renk Aracını kullanabilirsiniz .

matbaacılık

Uygulamanızda bir metin kullanırken, Malzeme Tasarımı için önerilen önceden tanımlanmış bazı ölçekleri kullanmalısınız. Bu nedenle, farklı ekranlar için farklı metinler için kod yazmanıza gerek yoktur. Yapmanız gereken tek şey sadece Materyal Tasarımı tarafından tanımlanan tip terazileri kullanmaktır.

Kullanılabilecek çeşitli tip ölçekleri:

• textAppearanceHeadline1: Işık, 96sp
• textAppearanceHeadline2: Işık, 60sp
• textAppearanceHeadline3: Düzenli, 48sp
• textAppearanceHeadline4: Düzenli, 34sp
• textAppearanceHeadline5: Düzenli, 24sp
• textAppearanceHeadline6: orta, 20sp
• textAppearanceSubtitle1: Normal, 16sp
• textAppearanceSubtitle2: Orta, 14sp
• textAppearanceBody1: Normal, 16sp
• textAppearanceBody2: Normal, 14sp
• textAppearanceCaption: Normal, 12sp
• textAppearanceButton: Normal, 14sp, tümü büyük harf
• textAppearanceOverline: Düzenli, 12sp, tümü büyük harf

Bunu kodunuzda kullanmak için aşağıdakileri kullanabilirsiniz:

<TextView ...
    android:textAppearance="?attr/textAppearanceBody1"/>

Malzeme Bileşenleri metin görünüm stillerinden herhangi birini özelleştirmek istiyorsanız, bunu yapabilirsiniz:

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="textAppearanceHeadline1">@style/AppTextAppearance.Headline1</item>
</style>

şekil

Uygulamanızda şekilleri kullanmak için uyulması gereken belirli kurallar vardır. Şekil küçük, orta ve büyük şekil türlerine ayrılabilir. Şeklin köşelerinde, yuvarlatılmış köşeleri veya kesilmiş köşeleri kullanabilirsiniz. Bunun dışında köşe yarıçapını ve hangi köşelerin yuvarlatılacağını ayarlayabilirsiniz. Köşeyle ilgili tüm şeyler ” cornerFamily ” özelliğinde yapılır.

Daha önce tartışıldığı gibi, Malzeme Tasarımında önerilen şekiller şunlardır:

• shapeAppearanceSmallComponent : Bu genellikle Düğmeler ve yongalar gibi küçük bileşenler için kullanılır.
• shapeAppearanceMediumComponent : Bu kartlar gibi orta boy şekiller için kullanılır.
• shapeAppearanceLargeComponent : Bu, alt tabakalar gibi büyük şekiller için kullanılır.

Yukarıdaki üçünü tipografi durumunda olduğu gibi özelleştirebilirsiniz.

Karanlık Tema

Android 10 piyasaya sürüldüğünde Android versiyonunun adından sonra en popüler ve en çok ilgi çeken şey Dark Theme oldu. Bu Android 10 veya API düzeyinde 29 kullanılabilir hale getirilir. Dark Theme kullanarak, cep telefonunun güç kullanımı artacaktır ve kullanıcılar göze baskı yapmadan uygulamayı düşük ışıklı ortamlarda da kullanabilirler.

Uygulamanızda Karanlık Tema’yı kullanmak için, uygulamanızın temasını bir DayNight temasından miras alacak şekilde ayarlamanız gerekir :

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

App temasını MaterialComponent’e yükselttiyseniz, şunları kullanabilirsiniz:

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

Karanlık Tema dışında, kullanıcılarınız kullanırken uygulamanın temasını değiştirebilir. Mevcut seçenekler:

• Işık Teması
• Karanlık Tema
• Pil Koruyucuya Göre Ayarla (Android P veya öncesi için önerilen varsayılan seçenek)
• Sistem varsayılanı (Android Q için önerilen varsayılan seçenek).

Şimdi, temayı dinamik olarak güncellemek için kullanmak zorundayız,

AppCompatDelegate.setDefaultNightMode(/**Your Mode**/)

Örnek,

object ThemeHelper {
    private const val lightMode = "light"
    private const val darkMode = "dark"
    private const val batterySaverMode = "battery"
    const val default = "default"

    fun applyTheme(theme: String) {
        when (theme) {
            lightMode -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
            darkMode -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
            batterySaverMode -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY)
            default -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)

        }
    }
}

Bu yüzden Android uygulamasında Karanlık Tema’nın nasıl uygulandığını gördük. Ama bununla işimiz bitti mi? Hayır. Bir örnek alalım. Farz edelim ki üzerinde biraz koyu renk kullanarak yazılmış az sayıda metin içeren bir uygulamaya sahibiz. Sonra uygulamanızın temasını Koyu Tema olarak değiştirirseniz, temanın koyu moda geçeceği ve metnin hala koyu renkli olduğu durumlarda bazı durumlar olabilir. Bu, çok kötü bir kullanıcı deneyimi sağlayacaktır, çünkü karanlık temanın koyu metni okunamaz durumdadır.

Bunun arkasındaki sebep, stillerimizdeki veya düzenlerimizdeki kodlanmış renkler, şunun gibi:

<TextView ...
    textColor="#000000" />

Bu nedenle, her zaman renkler için tema özelliklerini kullanmayı tercih edin.

<TextView ...
    textColor="?android:attr/textColorPrimary" />

Genelde, birincil renk, orta tonlu bir renk gibi olmalıdır, ancak Koyu Tema durumunda, birincil renginiz doygunluksuz bir açık renkte olmalıdır. Yani, o kadar kontrastı yok.Büyük yüzeyler için parlak renkler kullanmayın, çünkü çok fazla parlaklık yayarlar.

Genel olarak ve Koyu Tema’da hangi rengin birincil renk için uygun olduğunu bulmak için Malzeme Rengi Aracı’nı kullanabilirsiniz .