MDC-103 Android: Renk, Yükseklik ve Tür ile Malzeme Teması (Kotlin)

1. Giriş

Material Components (MDC), geliştiricilerin Materyal Tasarım'ı uygulamasına yardımcı olur. Google'daki bir mühendis ve kullanıcı deneyimi tasarımcısı ekibi tarafından oluşturulan MDC, düzinelerce güzel ve işlevsel kullanıcı arayüzü bileşeni içerir. Android, iOS, web ve Flutter.material.io/develop için kullanılabilir.

MDC-101 ve MDC-102 adlı codelab'lerde, giyim ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı uygulamanın temelini oluşturmak için Material Components (MDC) kullandınız. Bu uygulama, giriş ekranıyla başlayan ve kullanıcıyı ürünlerin gösterildiği ana ekrana yönlendiren bir kullanıcı akışı içeriyor.

Materyal Tasarım'ın yakın zamanda genişletilmesiyle tasarımcılar ve geliştiriciler, ürünlerinin markasını ifade etme konusunda daha fazla esnekliğe sahip oldu. Artık Shrine'ı özelleştirmek ve benzersiz stilini yansıtmak için MDC'yi kullanabilirsiniz.

Ne oluşturacaksınız?

Bu codelab'de, Shrine'ı markasını yansıtacak şekilde özelleştirmek için şunları kullanacaksınız:

• Renk
• Yazı biçimi
• Rakım
• Düzen

Bu codelab, giyim ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı uygulamayı oluşturma sürecinde size yol gösterecek 4 codelab'den üçüncüsüdür.İlgili codelab'leri şu adreste bulabilirsiniz: MDC-101: Material Components (MDC) Basics MDC-102: Materyal Tasarım Yapısı ve Düzeni MDC-104: Material Design Advanced Components MDC 104'ün sonunda aşağıdaki gibi bir uygulama oluşturacaksınız:

Bu codelab'de kullanılan MDC Android bileşenleri ve alt sistemleri:

• Temalar
• Yazı biçimi
• Rakım

Gerekenler

• Android geliştirme hakkında temel düzeyde bilgi
• Android Studio (Henüz yüklemediyseniz buradan indirebilirsiniz.)
• Android emülatörü veya cihazı (Android Studio üzerinden kullanılabilir)
• Örnek kod (sonraki adıma bakın)

Android uygulamaları geliştirme deneyiminizi nasıl değerlendirirsiniz?

Başlangıç Orta İleri

2. Geliştirme ortamınızı kurma

MDC-102'den devam mı ediyorsunuz?

MDC-102'yi tamamladıysanız kodunuz bu codelab'de kullanılmaya hazırdır. 3. adıma (Rengi değiştirin) geçin.

Başlangıç Codelab uygulamasını indirin

Başlangıç uygulamasını indirin

Başlangıç uygulaması material-components-android-codelabs-103-starter/kotlin dizininde bulunur. Başlamadan önce bu dizine cd olduğunuzdan emin olun.

...veya GitHub'dan kopyalayın

Bu codelab'i GitHub'dan klonlamak için aşağıdaki komutları çalıştırın:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 103-starter

Daha fazla yardım için: GitHub'dan depo kopyalama

Başlangıç kodunu Android Studio'ya yükleme

1. Kurulum sihirbazı tamamlandıktan ve Android Studio'ya Hoş Geldiniz penceresi gösterildikten sonra Mevcut bir Android Studio projesini aç'ı tıklayın. Örnek kodu yüklediğiniz dizine gidin ve Kargo projesini açmak için kotlin -> shrine'ı seçin (veya bilgisayarınızda shrine'ı arayın).
2. Android Studio penceresinin alt kısmındaki etkinlik göstergelerinde belirtildiği gibi, Android Studio'nun projeyi oluşturup senkronize etmesi için bir süre bekleyin.
3. Bu noktada, Android Studio, Android SDK veya derleme araçları eksik olduğundan (örneğin, aşağıda gösterilen) bazı derleme hataları verebilir. Bunları yüklemek/güncellemek ve projenizi senkronize etmek için Android Studio'daki talimatları uygulayın.

Proje bağımlılıkları ekleme

Projenin MDC Android destek kitaplığına bağımlı olması gerekir. İndirdiğiniz örnek kodda bu bağımlılık zaten listelenmiş olmalıdır ancak emin olmak için aşağıdaki adımları uygulamanız iyi bir uygulamadır.

1. app modülünün build.gradle dosyasına gidin ve dependencies bloğunun MDC Android'e bağımlılık içerdiğinden emin olun:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (İsteğe bağlı) Gerekirse aşağıdaki bağımlılıkları eklemek için build.gradle dosyasını düzenleyin ve projeyi senkronize edin.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Başlangıç uygulamasını çalıştırma

Çalıştır / Oynat düğmesinin solundaki derleme yapılandırmasının app olduğundan emin olun. Uygulamayı oluşturup çalıştırmak için yeşil Çalıştır / Oynat düğmesine basın. Dağıtım Hedefini Seçin penceresinde, kullanılabilir cihazlarınızda listelenen bir Android cihazınız varsa 8. adıma geçin. Aksi takdirde Yeni Sanal Cihaz Oluştur'u tıklayın. Donanım Seçin ekranında Pixel 2 gibi bir telefon cihazı seçin ve Sonraki'yi tıklayın. System Image (Sistem Görüntüsü) ekranında, tercihen en yüksek API düzeyi olan son Android sürümünü seçin. Yüklü değilse gösterilen İndir bağlantısını tıklayın ve indirme işlemini tamamlayın. İleri'yi tıklayın. Android Sanal Cihazı (AVD) ekranında ayarları olduğu gibi bırakın ve Bitir'i tıklayın. Dağıtım hedefi iletişim kutusundan bir Android cihaz seçin. Ok'i (Tamam) tıklayın. Android Studio, uygulamayı oluşturur, dağıtır ve hedef cihazda otomatik olarak açar.

Bağımlılığı ekleyemediyseniz veya uygulamayı başarıyla çalıştıramadıysanız durun ve geliştirme ortamınızda sorun giderme işlemi yapın.

Derleme sırasında INSTALL_FAILED_INVALID_APK hatası alırsanız Android Studio'da "Build" -> "Clean Project" seçeneğini kullanmayı deneyin.

Başarılı aktarım Cihazınızda veya emülatörünüzde Shrine'ın giriş sayfasını görmeniz gerekir. İleri'ye bastığınızda Shrine ana sayfası, üstte bir uygulama çubuğu ve altta ürün resimlerinin bulunduğu bir ızgarayla görünür.

Üst uygulama çubuğunun rengini, yüksekliğini ve tipografisini değiştirerek Shrine markasıyla eşleşmesini sağlayalım.

3. Rengi değiştirme

Bu renk teması, özel renkler (aşağıdaki resimde gösterilmiştir) kullanan bir tasarımcı tarafından oluşturulmuştur. Bu tema, Shrine'ın markasından seçilen ve Material Theme Editor'a uygulanan renkleri içerir. Material Theme Editor, daha dolu bir palet oluşturmak için bu renkleri genişletmiştir. (Bu renkler 2014 Materyal renk paletlerinden alınmamıştır.)

Material Theme Editor, bunları her rengin 50, 100, 200, ..., 900 etiketleri de dahil olmak üzere sayısal olarak etiketlenmiş tonlar halinde düzenlemiştir. Shrine, pembe renk kartelasında yalnızca 50, 100 ve 300 numaralı tonları, kahverengi renk kartelasında ise 900 numaralı tonu kullanır.

Üst uygulama çubuğunun rengini bu renk şemasını yansıtacak şekilde değiştirelim.

colorPrimaryDark ve colorAccent'i ayarlama

colors.xml içinde aşağıdaki satırları değiştirin. colorAccent özelliği, diğer özelliklerin yanı sıra üst uygulama çubuğunun rengini kontrol eder. colorPrimaryDark özelliği ise durum çubuğunun rengini kontrol eder.

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

Durum çubuğunda koyu simgeler kullanmak için Theme.Shrine, Shrine'ın uygulama temasına aşağıdakileri ekleyin:

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

İpucu: Araçlar ad alanını, aşağıda gösterildiği gibi <resource> etiketine aktarmanız gerekir:

<resources xmlns:tools="http://schemas.android.com/tools">

colors.xml ve styles.xml öğeleriniz aşağıdaki gibi görünmelidir:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

colors.xml bölümünde, #442C2E için yeni bir textColorPrimary renk kaynağı grubu ekleyin ve toolbarIconColor özelliğini textColorPrimary rengine referans verecek şekilde güncelleyin.

styles.xml dosyanızı güncelleyerek

özelliğini, az önce tanımladığımız textColorPrimary renge atayın.

Bir şey daha: Widget.Shrine.Toolbar stilindeki android:theme özelliğini Theme.Shrine olarak ayarlayın.

Theme.Shrine içinde android:textColorPrimary ayarını yaptığınızda, üst uygulama çubuğu da dahil olmak üzere tüm öğelerdeki metin ve üst uygulama çubuğumuzdaki simgeler stilize edilir.

colors.xml ve styles.xml öğeleriniz aşağıdaki gibi görünmelidir:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

Derleyin ve çalıştırın. Ürün ızgaranız artık aşağıdaki gibi görünecektir:

Giriş ekranının stilini renk şemamıza uyacak şekilde değiştirelim.

Metin alanlarını biçimlendirme

Giriş sayfasındaki metin girişlerini ana hatlı hale getirelim ve düzenimiz için daha iyi renkler kullanalım.

colors.xml dosyanıza aşağıdaki renk kaynağını ekleyin:

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

styles.xml bölümüne iki yeni stil ekleyin:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Son olarak, shr_login_fragment.xml içindeki TextInputLayout XML bileşenlerinizin her ikisinde de stil özelliğini yeni stilinize ayarlayın:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Düğme renklerini stilize etme

Son olarak, giriş sayfasındaki düğmelerin renklerini şekillendirin. styles.xml dosyanıza aşağıdaki stilleri ekleyin:

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Widget.Shrine.Button stili, varsayılan MaterialButton stilinden türetilir ve düğmenin metin rengini ve arka plan tonunu değiştirir. Widget.Shrine.Button.TextButton, varsayılan metin MaterialButton stilini genişletir ve yalnızca metin rengini değiştirir.

İleri düğmenizde Widget.Shrine.Button stilini, İptal düğmenizde ise Widget.Shrine.Button.TextButton stilini aşağıdaki gibi ayarlayın:

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

Giriş sayfasındaki Shrine logosunun rengini güncelleyin. Bu işlem için shr_logo.xml adlı drawable vektörde küçük bir değişiklik yapılması gerekir. Çizilebilir dosyayı açın ve android:fillAlpha özelliğini 1 olarak değiştirin. Çizilebilir öğe aşağıdaki gibi görünmelidir:

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

Ardından, shr_login_fragment.xml içindeki logo <ImageView> öğesinde android:tint özelliğini aşağıdaki gibi ?android:attr/textColorPrimary olarak ayarlayın:

shr_login_fragment.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

Derleyin ve çalıştırın. Giriş ekranınız aşağıdaki gibi görünmelidir:

Renkler ve temalarla ilgili notlar:

• Markanızı daha iyi ifade etmek için kullanıcı arayüzünüzdeki rengi özelleştirebilirsiniz.
• Birincil ve ikincil renkleriniz olmak üzere iki renkten başlayarak bu renklerin açık ve koyu varyasyonlarını içeren bir renk paleti oluşturun. Alternatif olarak, palet oluşturmak için Materyal Tasarım palet aracını kullanabilirsiniz.
• Tipografinizin rengini unutmayın.
• Metin ve arka plan rengi kontrastının erişilebilir bir oranda (büyük yazı tipi için 3:1, küçük yazı tipi için 4.5:1) olduğundan emin olun.

4. Tipografi ve etiket stillerini değiştirme

Tasarımcınız, renk değişikliklerinin yanı sıra sitede kullanmanız için belirli bir tipografi de önerdi. Bunu da üst uygulama çubuğuna ekleyelim.

Üst uygulama çubuğunu stilize etme

Üst uygulama çubuğunuzun metin görünümünü, tasarımcınızın sağladığı spesifikasyona uyacak şekilde biçimlendirin. styles.xml öğesine aşağıdaki metin görünümü stilini ekleyin ve titleTextAppearance özelliğini, Widget.Shrine.Toolbar stilinizde bu stile referans verecek şekilde ayarlayın.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

colors.xml ve styles.xml öğeleriniz aşağıdaki gibi görünmelidir:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

Etiketlere stil uygulama

Ürün kartı etiketlerini, doğru metin görünümünü kullanacak ve kartın içinde yatay olarak ortalanacak şekilde biçimlendiririz.

Başlık etiketinizdeki tipografiyi textAppearanceHeadline6 olarak güncelleyin:textAppearanceSubtitle2

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

Resim etiketlerini ortalamak için <TextView> etiketlerini shr_product_card.xml içinde değiştirerek android:textAlignment="center" özelliğini ayarlayın:

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

Derleyin ve çalıştırın. Ürün ızgarası ekranınız artık aşağıdaki gibi görünmelidir:

Oturum açma ekranının tipografisini eşleşecek şekilde değiştirelim.

Giriş ekranının yazı tipini değiştirme

styles.xml alanına aşağıdaki stili ekleyin:

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

shr_login_fragment.xml bölümünde, yeni stili "SHRINE" başlığınıza ayarlayın <TextView> (ve mevcut textAllCaps ile textSize özelliklerini silin):

shr_login_fragment.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

Derleyin ve çalıştırın. Giriş ekranınız aşağıdaki gibi görünmelidir:

Yazı biçimiyle ilgili notlar:

• Küçük yazı ve gövde metni için kullanılan metin yazı tiplerini seçerken belirli bir stil yerine net yazı tiplerini tercih edin.
• Büyük fontlar ve başlıklar için kullanılan görüntüleme yazı tipleri, markayı ifade etmek veya vurgulamak için kullanılmalıdır.

5. Yüksekliği ayarlama

Sayfayı Shrine'a uygun belirli bir renk ve tipografiyle stilize ettiğinize göre şimdi Shrine'ın ürünlerini gösteren kartlara göz atalım. Şu anda uygulamanın gezinme bölümünün altındaki beyaz bir yüzeye yerleştiriliyorlar. Ürünlere dikkat çekmek için daha fazla vurgu yapalım.

Ürün ızgarası yüksekliğini değiştirme

İçeriğin, üst uygulama çubuğunun üzerinde kayan bir sayfada görünmesini sağlamak için üst uygulama çubuğunun yüksekliklerini değiştirin. app:elevation özelliğini AppBarLayout öğenize, android:elevation özelliğini ise shr_product_grid_fragment.xml içindeki NestedScrollView XML bileşenlerinize aşağıdaki gibi ekleyin:

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

Kart yüksekliğini (ve rengini) değiştirme

app:cardElevation içindeki shr_product_card.xml değerini 2dp'den 0dp'e değiştirerek her kartın yüksekliğini ayarlayın. app:cardBackgroundColor değerini de @android:color/transparent olarak değiştirin.

shr_product_card.xml

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

Göz atın. Ürün ızgarası sayfasındaki her kartın yüksekliğini ayarlamış olmanız gerekir.

Sonraki düğmesinin yüksekliğini değiştirme

styles.xml içinde Widget.Shrine.Button stilinize aşağıdaki özelliği ekleyin:

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

Not: Android Studio bu kodu yazarken Cannot resolve symbol (Sembol çözümlenemiyor) hatalarıyla karşılaşırsa eksik sembolleri içe aktarmak için Alt + Enter (Mac'te Option + Return) tuşlarına basın.

Button stilinde android:stateListAnimator ayarlandığında Sonraki düğmesi, sağladığımız animatörü kullanır.

Derleyin ve çalıştırın. Giriş ekranınız aşağıdaki gibi görünmelidir:

Yükseklik ile ilgili notlar:

• Tüm Materyal Tasarım yüzeyleri ve bileşenleri, yükseklik değerlerine sahiptir.
• Bir yüzeyin bittiği ve diğerinin başladığı yer arasındaki bölüm, yüzey kenarlarıyla ayırt edilir.
• Yüzeyler arasındaki yükseklik farkı, soluk arka planlar, parlak arka planlar veya gölgeler kullanılarak ifade edilebilir.
• Diğer yüzeylerin önündeki yüzeyler genellikle daha önemli içerikler barındırır.

6. Düzeni değiştirme

Kartları farklı en-boy oranlarında ve boyutlarda gösterecek şekilde düzeni değiştirelim. Böylece her kart diğerlerinden farklı görünür.

Aşamalı bir RecyclerView bağdaştırıcısı kullanma

staggeredgridlayout paketinde, yatay olarak kaydırılmak üzere tasarlanmış asimetrik bir kademeli kart düzeni gösteren yeni bir RecyclerView bağdaştırıcısı sağladık. Bu kodu kendi başınıza inceleyebilirsiniz ancak burada nasıl uygulandığına değinmeyeceğiz.

Bu yeni bağdaştırıcıyı kullanmak için ProductGridFragment.kt içindeki onCreateView() yönteminizi değiştirin. "set up the RecyclerView" yorumundan sonraki kod bloğunu aşağıdakilerle değiştirin:

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

Ayrıca, NestedScrollView öğelerimizdeki dolguları kaldırmak için shr_product_grid_fragment.xml öğemizde küçük bir değişiklik yapmamız gerekecek.

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

Son olarak, ProductGridItemDecoration.kt öğesini değiştirerek RecyclerView içindeki kart dolgumuzu da ayarlayacağız. ProductGridItemDecoration.kt öğesinin getItemOffsets() yöntemini aşağıdaki gibi değiştirin:

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

Derleyin ve çalıştırın. Ürün ızgarası öğeleri artık kademeli olarak gösterilmelidir:

7. Başka bir tema deneyin

Renk, markanızı ifade etmenin güçlü bir yoludur ve renkteki küçük bir değişiklik, kullanıcı deneyiminizi büyük ölçüde etkileyebilir. Bunu test etmek için Shrine'ın marka renk şeması tamamen farklı olsaydı nasıl görüneceğine bakalım.

Stilleri ve renkleri değiştirme

styles.xml bölümüne aşağıdaki yeni temayı ekleyin:

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

Ayrıca AndroidManifest.xml bölümünde uygulamanızda bu yeni temayı kullanın:

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
  android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

Araç çubuğu simge rengini aşağıdaki gibi colors.xml içinde değiştirin:

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

Ardından, araç çubuğu stilimizin android:theme özelliğini, sabit kodlamak yerine "?theme" özelliğini kullanarak mevcut temaya referans verecek şekilde ayarlayın:

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

Ardından, giriş ekranındaki metin alanlarında ipucu metin rengini açıklaştırın. Metin alanlarının stiline android:textColorHint özelliğini ekleyin:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

Derleyin ve çalıştırın. Yeni tema artık önizlemeniz için gösteriliyor olmalıdır.

MDC-104'e geçmeden önce bu bölümde değiştirilen kodu geri alın.

8. Özet

Bu noktaya kadar, tasarımcınızın tasarım spesifikasyonlarına benzeyen bir uygulama oluşturdunuz.

Tamamlanmış MDC 103 uygulamasına bitmiş codelab'i indirerek veya bu codelab'in tamamlanmış sürümünü git ile kontrol ederek ulaşabilirsiniz: git checkout 103-complete.

Uygulamanızın sürümünü, uygulamanın tamamlanmış sürümüne karşı test edebilirsiniz.

Sonraki adımlar

Aşağıdaki MDC bileşenlerini kullanmışsınızdır: tema, tipografi ve yükseklik. [MDC Web kitaplığında] daha fazla bileşen ve alt sistem keşfedebilirsiniz.

Planladığınız uygulama tasarımında MDC kitaplığında bileşenleri olmayan öğeler varsa ne olur? MDC-104: Materyal Tasarım Gelişmiş Bileşenler kursunda, belirli bir görünüm elde etmek için MDC kitaplığını kullanarak özel bileşenlerin nasıl oluşturulacağını ele alacağız.

Bu codelab'i makul bir süre ve çabayla tamamlayabildim.

Kesinlikle katılıyorum Katılıyorum Ne katılıyorum ne katılmıyorum Katılmıyorum Kesinlikle katılmıyorum

Gelecekte Material Components'ı kullanmaya devam etmek istiyorum

Kesinlikle katılıyorum Katılıyorum Ne katılıyorum ne katılmıyorum Katılmıyorum Kesinlikle katılmıyorum