Material 3 ve Jetpack Compose 2
Selamlar, daha önceki yazımızda Material Design ve Material Design 3'ten bahsetmiştik. Bu yazımızda Material Design 3'ün Jetpack Compose ile geliştirilen bir projede nasıl kullanıldığından ve doğru kullanılması durumunda Light ve Dark tema özelliklerinin ne kadar kolay eklendiğinden bahsedeceğim.
Hadi başlayalım :)
Son sürüm Android Studio’muzu (Bendeki versiyon: Chipmunk 2021.2.1 Patch 1) açalım ve yeni bir proje oluşturalım. Proje açarken “Empty Compose Activity (Material 3)” olan seçeneği seçip projemizi oluşturalım.
Projemizi açtık şimdi teker teker dosyalara bakalım ne neymiş :)
ui > theme > Color.kt
Burada projemizin renkleri mevcut. Light tema ve Dark tema için kullanmak istediğimiz renkleri biraz sonra burada tanımlayacağız.
ui > theme > Type.kt
Burada projemizin typography ayarları mevcut.
ui > theme > Theme.kt
Renk ve typography konularını yönettiğimiz dosyadır. Kendileri bizim için önemli bir dosya.
Şimdi adım adım ilerleyelim.
1. Adım — Renkler
Color.kt dosyamıza gelip renklerimizi tanımlayalım.
Farkındaysanız ve renkleri dark, light ve kullanıldığı yerlere göre böldüm. Böyle yapma sebebim renkleri daha iyi ayırmak yani ben bu dosyaya bakınca dark temanın background rengi şuymuş diyebileceğim benim için daha kolay oluyor.
Çok fazla renk tanımlamadım çünkü burada ki amaç mantığı kavramak zaten mantığı kavradıktan sonra diğer renkleri siz tanımlayabiliyor olacaksınız.
2. Adım — Typography
Type.kt dosyamıza gelip typographylerimizi tanımlayalım.
Burada bir şeyi farkettiniz mi?
Daha önceki yazımda bodyLarge ve titleLarge den Material 3'te olan kategoriler diye bahsetmiştim. Bu kategoriler projeyi açtığınız zaman default olarak tanımlanmış parametreler oluyor zaten. Siz sadece parametrelere değerleri giriyorsunuz.
Aşağıda Jetpack Compose’de tanımlanmış Typography sınıfını görebilirsiniz.
Mesela “title” yazdım ve Android Studio otomatik olarak “titleMedium” ve “titleSmall” parametrelerini önerdi. Aynı durum renkler içinde geçerli. Biraz sonra bahsedeceğim.
3. Adım — Ölüm Vuruşu
Theme.kt dosyamızı açalım. Buradaki kod bloklarının üstünden teker teker geçelim.
Dark tema renklerini aşağıdaki gibi tanımlıyoruz. Farkındaysanız background, primary vb. renkler zaten direkt olarak tanımlanmış durumda siz sadece Color.kt dosyasındaki renklerinizi parametrelere veriyorsunuz.
Light tema renklerini aşağıdaki gibi tanımlıyoruz.
Ve temamızı tanımlıyoruz.
Yukarıda temamızı tanımladık. Şimdi bu tema dosyasını biraz detaylandıralım.
Not: Dynamic Color Android 12 ve üstünde kullanılabilen bir özellik. Cihazınızda kullandığınız duvar kağıdına göre uygulamanın renkleri değişiyor.
Burada dynamicColor’mı, lightColor’mı yoksa DarkColor’mı kullanacağımızı belirliyoruz ve kullanacağımız renk paletini ve typographyi aşağıda olduğu gibi kendi temamıza veriyoruz.
Peki şimdiye kadar neler yaptık;
- Light Tema için background, primary, secondary, surface ve onSurface renklerini tanımladık.
- Dark Tema için background, primary, secondary, surface ve onSurface renklerini tanımladık.
- Typograpgy için bodyLarge ve titleLarge değerlerini tanımladık.
- Light Tema ve Dark Tema için tanımladığımız renkleri (background, primary, secondary, surface ve onSurface) temamıza verdik ve artık bu renkler için kendi renklerini kullanma benim sana verdiğim renkleri kullan dedik.
Her şeyi tanımladık şimdi bunları nasıl kullanacağız oraya gelelim. Ben projede 2 adet içeriğin olduğu bir liste göstereceğim ve bu içerikler kartlardan oluşacak. Bu kartların arkaplan rengi yukarıda tanımladığımız LightColorScheme ve DarkColorScheme’nin içindeki surface color olacak ve bu içeriklerin üstünde de 1 adet Title Text ve 1 adet Body Text olacak. Hadi bu içeriği tasarlayalım.
Renk kullanmak istiyor isek -> MaterialTheme.colorScheme.{renk} kullanmak zorundayız.
Typography kullanmak istiyor isek -> MaterialTheme.typography.{typography tipi} kullanmak zorundayız.
ItemView.kt dosyası bu şekilde olmalı;
Şimdi MainActivity.kt dosyasını açalım.
Burada Theme.kt’de ki MaterialTheme kullandığımı söyleyip Surface background için Material temanın background rengini kullandığımı söyledim.
Projenizde Material 3'ü bu şekilde kullanıp light ve dark temayı bu kadar basit şekilde implement edebilirsiniz.
Projenin kaynak kodlarına aşağıdan ulaşabilirsiniz;
