1. Başlamadan önce
Bu codelab'de, bahşiş hesaplayıcı uygulaması olan başlangıç uygulamasını güncelleyerek Materyal Tasarım 3'teki yeni özellikleri kullanarak uygulama kullanıcı arayüzünün, kullanıcının duvar kağıdına göre dinamik bir şekilde temasını belirleyeceksiniz. Aşağıda, dinamik renk uygulanmış uygulamanın ekran görüntülerini bulabilirsiniz. Renklerin nasıl uygulandığını kontrol etmenize olanak tanıyan bazı ek senaryoları da inceleyeceksiniz.
Ön koşullar
Geliştiriciler ise
- Android'deki temel tema oluşturma kavramlarına aşinayım.
- Uygulamanın temasında değişiklik yapma konusunda rahat
Neler öğreneceksiniz?
- Mevcut Materyal Bileşenler ile Materyal 3 temaları nasıl ayırt edilir?
- Tema Materyal 3'e nasıl güncellenir?
- Araçlarımızı kullanarak tema oluşturma ve uygulama
- Tema özelliklerinin birbiriyle ilişkisi
Gerekenler
- Android Studio'nun yüklü olduğu bir bilgisayar.
- İpucu Zamanı uygulamasının kodu. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. Başlangıç Uygulaması'na Genel Bakış
İpucu Süresi uygulaması, bahşişi özelleştirme seçenekleri bulunan bir bahşiş hesaplayıcı uygulamasıdır. Bu, Kotlin'de Android ile İlgili Temel Bilgiler eğitim kursumuzdaki örnek uygulamalardan biridir.
3. Gradle Bağımlılıklarını Güncelleme
Asıl temayı güncellemeden ve dinamik renk uygulamadan önce uygulamanızın derleme.gradle dosyasında yapılması gereken birkaç değişiklik var.
Bağımlılıklar bölümünde, malzeme 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, BuildSdkVersion ve targetSdkVersion değerlerini değiştirin.
31 yaş ve üzeri için:
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
Bu talimatlarda, nispeten yeni bağımlılıkları olan bir uygulama varsayılmaktadır. Halihazırda Materyal veya daha eski bir sürümü kullanmayan bir uygulama için lütfen Android için Materyal Tasarım Bileşenleri'nin Başlangıç dokümanlarındaki talimatlara bakın.
Temalarınızı oluşturduğunuz her yerde 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.* olarak güncellendikten sonra çoğu bileşen yeni stili devralmaya devam edecek. Düğmelerin artık yeni yuvarlak temayı kullandığını aşağıda görebilirsiniz.
Aşağıdaki temalar dosyasında değişen tek şey üst temadır. Birazdan bu temayı tamamen değiştireceğiz. Renk özelliklerinden bazıları eski ve oluşturduğumuz özel stillerden bazıları artık Material3'te standart.
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 Temasını ve Renk Rollerini Anlama
Material 3 renk sistemi, kullanıcı arayüzünüze renk uygulamak için düzenli bir yaklaşım kullanır. Theme.AppCompat özelliklerinden birkaçı hâlâ kullanılıyor. Bununla birlikte, Theme.MaterialComponents.* ve Theme.Material3.* sürümüne daha fazla özellik eklendi. Bu yüzden, uygulanmamış özelliklerin temel temadan taşmadığından emin olmak için uygulamanızın tüm ekranlarını incelemeniz önemlidir.
Renk rollerini anlama
Materyal 3 temasında renkle ilgili yirmiden fazla özellik vardır. Bu, başta göz korkutucu görünebilir, ancak türev renkler oluşturmak için aynı 4-5 renk rolüyle bir araya gelen birkaç temel renk var.
Bu renk grupları şunlardır:
- Birincil, uygulamanızın birincil rengi
- İkincil, uygulamanızın ikincil rengi
- Üçüncül, ya Birincil ve İkincil'i tamamlayan üçüncü bir renk
- Hata, hata metni ve iletişim kutuları için kullanılır
- Arka plan
- Yüzey, Yüzey Varyantı, Yüzey Ters
Birincil, İkincil, Üçüncül ve Hata rolleri şunlardır:
<ana renk> | Temel renk |
<ana renk> üzerinde | temel renk üzerinde görünen simgelerin ve metnin rengi |
<base color>Kapsayıcı | temel, renk, düğmeler, iletişim kutuları vb. için kullanılır |
<base color>Kapsayıcıda | kapsayıcıdaki simgelerin ve metnin rengi |
Örneğin, Malzeme 3'te varsayılan stile sahip bir Kayan İşlem Düğmesi, temel rengi olarak Primary kullanıyor. Bu nedenle, düğmenin arka plan rengi için primaryContainer ve içeriği için onPrimaryContainer kullanıyor.
Bir temayı elle özelleştirirken en azından değiştirdiğiniz her temel rengin on<base color> özelliğinin okunabilir olduğunu doğrulamalısınız.
En iyi uygulamalar, temelden uygulamanıza kadar herhangi bir yapı olmaması için renk grubundaki tüm rolleri aynı anda ayarlamaktır.
Arka plan ve yüzey renklerinin genellikle iki rolü vardır: temel rengin kendisi için ve üzerinde görünen simgeler veya metinler için on<base color>.
5. Materyal Tema Oluşturucu ile Materyal 3 teması oluşturma
Materyal Tema Oluşturucu, özel renk şeması oluşturmayı, M3 renk sistemine geçiş yapmak için yerleşik kod dışa aktarma özelliğini kullanmayı ve dinamik renklerden yararlanmayı kolaylaştırır. material.io/material-theme-builder hakkında daha fazla bilgi
İpucu Süresi uygulama temasında, bileşenler için çeşitli stiller yer alsa da stillerin çoğu, Materyal 3 temalarında varsayılan olarak kullanılır. Yalnızca Birincil ve İkincil renklere dikkat etmemiz gerekir.
Bunlar, yeşil birincil renge (#1B5E20) ve mavi bir İkincil renge (#0288D1) karşılık gelir.
Bu renkleri Malzeme Tema Oluşturucu'ya girebilir ve tam temayı dışa aktarabilirsiniz (başka bir yerde tam bir genel bakış bağlantısı verildiği varsayılır).
Girdiğiniz renklerin tonlarının, renk oluşturma algoritmasına uyacak şekilde değişebileceğini ve hem tamamlayıcı hem de okunabilir renkler sağlayacağını unutmayın.
Özel renkler girdiğinizde oluşturulan değerlerin bir alt kümesi aşağıda verilmiştir.
6. Materyal Tema Oluşturucu Dışa Aktarma Dosyalarıyla Çalışma
Dışa aktarma arşivi, açık ve koyu temalara karşılık gelen kendi domains.xml dosyasına sahip değerler ve gece-gece/ dizin dizinlerini içerir. Tüm renkler, value/colors.xml dosyasında tanımlanmıştır.
Dosyalar olduğu gibi kopyalanabilir, ancak AndroidManifest.xml temanızı veya tema dosyalarını birbiriyle eşleşecek şekilde değiştirmeniz gerekir. Aracın varsayılan adı AppTheme'dir.
Uygulamayı yeniden başlattığınızda ekranla neredeyse aynı görünür. Kayda değer bir değişiklik ise Switch ve RadioButtons oldu. Bu değişikliklerden sonra, seçilen durumları birincil renk ve ikincil renklerdeki tonlarla tematik hale getirildi. 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
Uygun bir Material 3 teması kullanıldığında, kullanıcı arayüzünü birkaç küçük eklemeyle dinamik hale getirebiliriz.
Dinamik Renkler API'si, tüm Etkinliklere dinamik renk uygulamanıza olanak tanır
veya farklı Görünümlere ya da Parçalara gösterilebilir. Şunun için:
tüm dünyaya dinamik renk uygulayacağız.
Uygulama sınıfı dosyası oluşturma
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Android manifest'inde yeni oluşturulan bu dosyaya referans vermemiz gerekiyor:
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
Android 12 ve sonraki sürümlerin yüklü olduğu sistemlerde, varsayılan düzende 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 veya sizin sağladığınız dinamik tema yer paylaşımını uygulamak için ActivityPreCreated üzerinde kesişen bir ActivityLifecycleCallbacks kaydeder.
8. Özel tema yer paylaşımı uygulama
Araçlarımız tema yer paylaşımlarını dışa aktarabilir, ancak az sayıda özelliği geçersiz kılıyorsanız bunları manuel olarak da oluşturabilirsiniz.
Tema yer paylaşımı, başka bir temayla birlikte kullanılmak üzere tasarlanmıştır ve yalnızca temel temanın üstünde değiştirilecek değerleri içerir.
Bir nedenden ötürü, marka bilinci oluşturma sürecinde, birincil renk tonlarının kırmızının tonları olması gerektiğini varsayalım. Bunu aşağıdaki dosyalar ve özellikler ile 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>
Android 12 yukarıdaki kod için dinamik bir açık tema uygular ve değişikliklerinizi bunun üzerine yerleştirir. Alternatif olarak, aşağıdakilerden herhangi biri dahil olmak üzere geçerli herhangi bir ThemeOverlay üst öğe olarak kullanılabilir:
ThemeOverlay.Material3.Light
ThemeOverlay.Material3.Dark
ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark
ThemeOverlay.Material3.DynamicColors.DayNight
Materyal varsayılanı yerine bu Tema Yer Paylaşımı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
Şu ana kadar, Material 3 temasında zaten mevcut olan özellikleri geçersiz kıldık. Dinamik renkte başka bir olası durumumuz daha var. Bu durumda, ayrılması gereken bir veya daha fazla özel özellik olabilir.
Bir uygulama dinamik rengi etkinleştirdiğinde 5 ton paletine erişebilir: üç vurgu paleti ve aşağıdaki yaklaşık rollere sahip iki nötr palet:
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 dış çizgiler |
Her palette, beyazdan ve ten rengine kadar uzanan,
siyah için: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.
Dinamik renk için bir kullanıcı arayüzü tasarlarken belirli renk hakkında daha az düşünmeli, tasarım sistemindeki bileşenin tonu ve parlaklığının diğerleriyle ilişkisi üzerine düşünmelisiniz.
Simgelerin ikincil vurgu paleti kullanılarak belirlenmesini istediğinizi ve attrs.xml dosyasında aşağıdaki girişle tonlama simgelerine 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 seçer.
Bu paletler Android 12'ye (API 31) özeldir. Bu nedenle, uygulamanızın minimum SDK sürümü 31 veya sonraki bir sürüme ayarlanmamışsa ilgili dosyaları -v31 son ekiyle klasörlere yerleştirmeniz gerekir.
10. Özet
Bu codelab'de şunları yaptınız:
- Temanızı Materyal 3'e yükseltmek için bağımlılık ekleyin.
- Yeni renk gruplarını ve rollerini anlayın.
- Statik temadan dinamik renge nasıl geçiş yapılacağını öğrenin.
- Tema yer paylaşımlarının nasıl kullanılacağını ve özel tema özellikleri için dinamik renklerin nasıl kullanılacağını anlama.