1. Başlamadan önce
Bu codelab'de, başlangıç uygulamasını (bir bahşiş hesaplama uygulaması) Materyal Tasarım 3'teki yeni özellikleri kullanacak şekilde 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ış uygulamaya ait 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 Tasarım bileşenleri ile Materyal Tasarım 3 temaları arasındaki farkı anlama
- 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, materyal 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 bir tarihe kadar:
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 bir uygulama için lütfen Android için Material Design Bileşenleri'nin Başlangıç belgelerindeki talimatları inceleyin.
Temalarınızı nerede oluşturduysanız Theme.MaterialComponents.* referanslarını Theme.Material3.* olarak değiştirin. Bazı stillerin Material3 ad alanında henüz yeni bir stili yoktur ancak üst tema Theme.Material3.* olarak güncellendiğinde çoğu bileşen yeni stili devralır. Aşağıda, düğmelerin artık yeni yuvarlak temayı kullandığını görebilirsiniz.
Aşağıdaki tema dosyasında değiştirilen tek şey üst temadır. Bu temayı birazdan tamamen değiştireceğiz. Renk özelliklerinden bazıları kullanımdan kaldırıldı ve oluşturduğumuz özel stillerden bazıları 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:
- Primary: 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 stil içeren 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ında varsayılandır. İ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, açık ve koyu temalara karşılık gelen kendi themes.xml dosyalarıyla birlikte values ve values-night/ dizinlerini içerir. 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 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ümlerde ya da parçalarda Şunun için:
Bu uygulamada dinamik renk dünya genelinde uygulanacak.
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, varsayılan şema için kullanıcının duvar kağıdı incelenerek çeşitli ton paletleri oluşturulur. 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 ActivityPreCreated üzerinde kesişen bir ActivityLifecycleCallbacks 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 özelliklerle bunu 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 bulunan ö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 bileşenlerle ilişkisini daha çok 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 daha yüksek bir değere ayarlanmamışsa ilgili dosyaları -v31 sonekine sahip klasörlere yerleştirmeniz gerekir.
10. Özet
Bu codelab'de şunları yapmayı öğrendiniz:
- Temanızı Material 3'e yükseltmek için bağımlılık ekleyin.
- Yeni renk grupları ve roller hakkında bilgi edinin.
- 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.