1. Başlamadan önce
Bu codelab'de, Materyal Tasarım 3'teki yeni özellikleri kullanmak için başlangıç uygulamasını (bahşiş hesaplama uygulaması) güncelleyeceksiniz. Bu özellikler, uygulamanın kullanıcı arayüzünün kullanıcının duvar kağıdına göre dinamik olarak temalandırılmasına olanak tanır. Aşağıda, dinamik renk uygulanmış uygulamanın birkaç ekran görüntüsü yer almaktadır. Ayrıca, renklerin nasıl uygulanacağını kontrol etmenize olanak tanıyan bazı ek senaryoları da inceleyeceksiniz.
Ön koşullar
Geliştiriciler
- Android'deki temel tema kavramlarına aşina olmak
- Uygulama temasını değiştirebilme
Neler öğreneceksiniz?
- Mevcut Materyal bileşenleri ile Materyal 3 temaları arasındaki farklar
- Temaları Material 3'e güncelleme
- Araçlarımızı kullanarak tema oluşturma ve bunları uygulama
- Tema özelliklerinin birbirleriyle ilişkisi
İhtiyacınız olanlar
- Android Studio'nun yüklü olduğu bir bilgisayar.
- Tip Time uygulamasının kodu. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. Başlangıç Uygulamasına Genel Bakış
Tip Time uygulaması, bahşişi özelleştirme seçenekleri sunan bir bahşiş hesaplama uygulamasıdır. Bu uygulama, Kotlin ile Android'in Temelleri eğitim kursumuzdaki örnek uygulamalardan biridir.
3. Gradle Bağımlılıklarını Güncelleme
Gerçek temayı güncellemeden ve dinamik rengi uygulamadan önce uygulamanızın build.gradle dosyasında yapılması gereken birkaç değişiklik vardır.
Bağımlılıklar bölümünde, material kitaplığının 1.5.0-alpha04 veya sonraki bir sürüm olduğundan emin olun:
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}
Android bölümünde compileSdkVersion ve targetSdkVersion değerlerini değiştirin.
31 veya sonraki sürümlerde:
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
Bu talimatlarda, nispeten yeni bağımlılıkları olan bir uygulama olduğu varsayılır. Material'ı veya daha eski bir sürümü kullanmayan uygulamalar için lütfen Android için Materyal Tasarım Bileşenleri'nin Başlangıç belgelerindeki talimatları inceleyin.
Temalarınızı nerede oluşturduysanız oluşturun, Theme.MaterialComponents.* referanslarını Theme.Material3.* olarak değiştirin. Bazı stillerin Material3 ad alanında henüz yeni bir stili yok ancak üst tema Theme.Material3.* sürümüne güncellendiğinde çoğu bileşen yeni stili devralmaya devam edecek. Aşağıda, düğmelerin artık yeni yuvarlak temayı kullandığını görebilirsiniz.
Aşağıdaki tema dosyasında, yalnızca üst tema değiştirilmiştir. Bu temayı birazdan tamamen değiştireceğiz. Bazı renk özellikleri kullanımdan kaldırıldı ve oluşturduğumuz özel stillerin bir kısmı artık Material3'te standart olarak sunuluyor. Ancak
themes.xml
<style name="Theme.TipTime" parent="Theme.Material3.Light">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/green</item>
<item name="colorPrimaryVariant">@color/green_dark</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/blue</item>
<item name="colorSecondaryVariant">@color/blue_dark</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- For text input fields -->
<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
<!-- For radio buttons -->
<item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
<!-- For switches -->
<item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>
4. Renk temalarını ve renk rollerini anlama
Material 3 renk sistemi, renkleri kullanıcı arayüzünüze uygulamak için düzenli bir yaklaşım kullanır. Theme.AppCompat'daki bazı özellikler hâlâ kullanılıyor. Ancak Theme.MaterialComponents.* sürümünde daha fazla, Theme.Material3.* sürümünde ise daha da fazla özellik eklendi. Bu nedenle, temel temadan uygulanmamış özelliklerin sızmadığından emin olmak için uygulamanızın tüm ekranlarını incelemeniz önemlidir.
Renk rollerini anlama
Material 3 temasında renkle ilgili yirmiden fazla özellik bulunur. İlk başta göz korkutucu görünebilir ancak türetilmiş renkler oluşturmak için aynı 4-5 renk rolüyle birleşen birkaç temel renk vardır.
Bu renk grupları şunlardır:
- Birincil: Uygulamanızın birincil rengi
- İkincil: Uygulamanızın ikincil rengi
- Üçüncül: Birincil ve ikincil renkleri tamamlayan üçüncü bir renk
- Hata metni ve iletişim kutuları için kullanılan hata
- Arka plan
- Surface, SurfaceVariant, Surface Inverse
Birincil, ikincil, üçüncül ve hata için roller aşağıdaki gibidir:
<base color> | Temel renk |
on<base color> | Temel renkte görünen simgelerin ve metinlerin rengi |
<base color>Container | düğmeler, iletişim kutuları vb. için kullanılan, temel renkten türetilmiş renk |
on<base color>Container | kapsayıcıdaki simgelerin ve metnin rengi |
Örneğin, Material 3'te varsayılan stile sahip bir kayan işlem düğmesi temel renk olarak Primary kullandığı için düğmenin arka plan rengi için primaryContainer, içeriği için ise onPrimaryContainer kullanılır.
Bir temayı manuel olarak özelleştirirken en azından değiştirdiğiniz her temel rengin on<base color> özelliğinin okunabilirliğini koruduğunu doğrulamanız gerekir.
Temelden uygulamanıza kadar hiçbir yapaylık olmaması için bir renk grubundaki tüm rolleri aynı anda ayarlamanız en iyi uygulamadır.
Arka plan ve yüzey taban renkleri genellikle iki role sahiptir: taban rengi ve on<base color> üzerinde görünen simgeler veya metinler.
5. Material Theme Builder ile Material 3 teması oluşturma
Material Theme Builder, özel bir renk şeması oluşturmayı, M3 renk sistemine geçmek için yerleşik kod dışa aktarma özelliğini kullanmayı ve dinamik renkten yararlanmayı kolaylaştırır. Daha fazla bilgi: material.io/material-theme-builder
İpucu Zamanı uygulama teması, bileşenler için çeşitli stiller içerir ancak stillerin çoğu Material 3 temalarındaki varsayılan stillerdir. İlgilenmemiz gereken iki temel renk vardır: birincil ve ikincil.
Bu renkler, yeşil birincil renk (#1B5E20) ve mavi ikincil renge (#0288D1) karşılık gelir.
Bu renkleri Material Theme Builder'a girebilir ve tam bir tema dışa aktarabilirsiniz (başka bir yerde tam bir genel bakışa bağlantı verildiği varsayılır).
Girdiğiniz renklerin, renk oluşturma algoritmasına uyacak ve tamamlayıcı ve okunabilir renkler sağlayacak şekilde ton değiştirebileceğini unutmayın.
Aşağıda, özel renkler girdiğinizde oluşturulan değerlerin bir alt kümesi yer almaktadır.
6. Material Theme Builder dışa aktarma dosyalarıyla çalışma
Dışa aktarma arşivi, kendi themes.xml dosyasıyla birlikte değerler ve değerler-gece/ dizinlerini içerir. Bu dizinler, açık ve koyu temalara karşılık gelir. Tüm renkler values/colors.xml içinde tanımlanır.
Dosyalar olduğu gibi kopyalanabilir ancak tema adınızı AndroidManifest.xml dosyasında veya tema dosyalarında birbirleriyle eşleşecek şekilde değiştirmeniz gerekir. Araçlardaki varsayılan ad AppTheme'dir.
Uygulamayı yeniden başlattığınızda neredeyse aynı şekilde görünür. Önemli bir değişiklik de seçili durumları artık ikincil renkler yerine birincil renkteki tonlarla temalandırılan anahtarlar ve radyo düğmelerinde yapıldı. Daha büyük uygulamalarda bazı tasarımları yeniden gözden geçirmeniz gerekebilir.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tiptime">
<application ...>
<activity android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
7. Dinamik renk ekleme
Doğru bir Material 3 teması kullanıldığında, birkaç küçük eklemeyle kullanıcı arayüzünü dinamik hale getirebiliriz.
Dinamik Renkler API'si, tüm Etkinliklere dinamik renk uygulamanıza olanak tanır.
Uygulamada, tek tek etkinliklerde veya tek tek Görünümler'de ya da Parçalar'da Şunun için:
bu uygulamada dinamik rengi dünya genelinde kullanıma sunacağız.
Uygulama sınıfı dosyası oluşturma
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Bu yeni oluşturulan dosyaya Android manifestinde referans vermemiz gerekir:
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
Android 12 ve sonraki sürümlerde, çeşitli ton paletleri oluşturmak için kullanıcının varsayılan şema için duvar kağıdı incelenir. Bu paletlerdeki değerler, ThemeOverlay oluşturmak için kullanılır.
DynamicColors sınıfı, sistem tarafından oluşturulan dinamik tema yer paylaşımını veya sizin sağladığınız bir temayı uygulamak için ActivityLifecycleCallbacks üzerinde kesişen bir ActivityPreCreated kaydeder.
8. Özel tema katmanı uygulama
Araçlarımız tema katmanlarını dışa aktarabilir ancak az sayıda özelliği geçersiz kılıyorsanız bunları manuel olarak da oluşturabilirsiniz.
Tema katmanı, başka bir temayla birlikte kullanılmak üzere tasarlanmıştır ve yalnızca temel temada değiştirilecek değerleri sağlar.
Markalama gibi bir nedenden dolayı birincil renk tonlarının kırmızı tonları olması gerektiğini varsayalım. Aşağıdaki dosyalar ve özellikler için bu işlemi yapabiliriz.
colors.xml
<resources>
<color name="overlay_light_primary">#9C4146</color>
<color name="overlay_light_onPrimary">#FFFFFF</color>
<color name= "overlay_light_primaryContainer">#FFDADB</color>
<color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >
themes_overlays.xml
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
<item name="colorPrimary">@color/overlay_light_primary</item>
<item name="colorOnPrimary">@color/overlay_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>
Yukarıdaki kod için Android 12, dinamik bir açık tema uygular ve değişikliklerinizi bu temanın üzerine yerleştirir. Alternatif olarak, aşağıdakilerden herhangi biri de dahil olmak üzere geçerli bir ThemeOverlay'i üst öğe olarak kullanabilirsiniz:
ThemeOverlay.Material3.Light
ThemeOverlay.Material3.Dark
ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark
ThemeOverlay.Material3.DynamicColors.DayNight
Varsayılan Material yerine bu tema katmanını kullanmak için DynamicColors.applyToActivitiesIfAvailable çağrısını şu şekilde değiştirin:
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)
9. Özel özelliklere dinamik renk ekleme
Şimdiye kadar, Material 3 temasında zaten mevcut olan özellikleri geçersiz kıldık. Dinamik renkte, atanması gereken bir veya daha fazla özel özelliğin olabileceği başka bir durum söz konusudur.
Bir uygulama dinamik rengi etkinleştirdiğinde 5 ton paletine erişebilir. Bunlar, yaklaşık olarak aşağıdaki rollere sahip üç vurgu paleti ve iki nötr palettir:
system_accent1 | Birincil renk tonları |
system_accent2 | İkincil renk tonları |
system_accent3 | Üçüncül renk tonları |
system_neutral1 | Nötr arka planlar ve yüzeyler |
system_neutral2 | Nötr yüzeyler ve ana hatlar |
Her palet, beyazdan siyaha kadar değişen ton adımlarına sahiptir.
siyaha: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.
Dinamik renk için kullanıcı arayüzü tasarlarken belirli bir renk yerine, bileşenin tonu ve parlaklığının tasarım sistemindeki diğer öğelerle ilişkisi hakkında daha fazla düşünmeniz gerekir.
İkincil vurgu paleti kullanılarak temalandırılmış simgeler istediğinizi ve attrs.xml dosyasında aşağıdaki girişi kullanarak simgeleri renklendirmek için bir özellik eklediğinizi varsayalım.
attrs.xml
<resources>
<attr name="iconColor" format="color" />
</resources>
Tema yer paylaşımınız aşağıdaki gibi görünebilir:
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight">
<item name="iconColor">@android:color/system_accent2_600</item>
</style>
Uygulamayı yeniden yükleyip duvar kağıdınızı değiştirdiğinizde uygulama bu ikincil paleti kullanır.
Bu paletler Android 12'ye (API 31) özeldir. Bu nedenle, uygulamanızın minimum SDK'sı 31 veya üstü bir sürüme ayarlanmamışsa ilgili dosyaları -v31 sonekine sahip klasörlere yerleştirmeniz gerekir.
10. Özet
Bu codelab'de şunları yapabildiniz:
- Temanızı Material 3'e yükseltmek için bağımlılıklar ekleyin.
- Yeni renk gruplarını ve rolleri anlayın.
- Statik temadan dinamik renge nasıl geçeceğinizi öğrenin.
- Tema katmanlarının nasıl kullanılacağını ve özel tema özellikleri için dinamik rengin nasıl kullanılacağını öğrenin.