Bu sayfa, Cloud Translation API ile çevrilmiştir.

MDC-103 Android: Renk, Hareket ve Tür (Java) ile materyal teması oluşturma

Material Bileşenleri (MDC), geliştiricilerin Material Design'ı 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 ve Android, iOS, web ve Flutter için kullanılabilir.

material.io/develop

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 bir ana ekrana yönlendiren bir kullanıcı akışı içeriyor.

Material Design'ın yakın zamanda genişletilmesi, tasarımcılara ve geliştiricilere ürünlerinin markasını ifade etme konusunda daha fazla esneklik sunuyor. Artık MDC'yi kullanarak Shrine'ı özelleştirebilir ve benzersiz stilini yansıtabilirsiniz.

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'de kullanılan MDC Android bileşenleri ve alt sistemleri

Temalar
Yazı biçimi
Rakım

Gerekenler

Android geliştirme hakkında temel bilgiler
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

MDC-102'den devam mı ediyorsunuz?

MDC-102'yi tamamladıysanız kodunuz bu codelab'de kullanıma hazır olmalıdı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/java 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

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

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 Shrine projesini açmak için java -> shrine'ı seçin(veya bilgisayarınızda shrine'ı arayın).
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.
Bu noktada, Android Studio, Android SDK veya derleme araçları eksik olduğundan (ör. 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.

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'

(İ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.
Select Deployment Target (Dağıtım Hedefini Seç) penceresinde, kullanılabilir cihazlarınızda listelenen bir Android cihazınız varsa 8. Adım'a 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.
Sistem Görüntüsü ekranında, tercihen en yüksek API düzeyine sahip bir 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 Virtual Device (AVD) ekranında ayarları olduğu gibi bırakın ve Finish'i (Sonlandır) 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ş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 birlikte görünür.

Rengini, yüksekliğini ve tipografisini değiştirerek üst uygulama çubuğunu Shrine markasıyla eşleştirelim.

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 Materyal Tema Düzenleyici'ye uygulanan renkleri içerir. Materyal Tema Düzenleyici, bu renkleri genişleterek daha kapsamlı bir palet oluşturur. (Bu renkler 2014 Materyal renk paletlerinden alınmamıştır.)

Malzeme Teması Düzenleyici, bunları her rengin 50, 100, 200, ..., 900 etiketleri 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 şeylerin 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>

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ı, android:textColorPrimary özelliğini textColorPrimary rengine ayarlayacak şekilde güncelleyin.

Theme.Shrine içinde android:textColorPrimary ayarlandığında, üst uygulama çubuğu ve üst uygulama çubuğumuzdaki simgeler de dahil olmak üzere tüm öğelerdeki metinler stillendirilir.

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

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 uygun ş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>

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:

Tasarımcınız, renk değişikliklerinin yanı sıra sitede kullanmanız için belirli bir tipografi de belirledi. Bunu üst uygulama çubuğuna da 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 stilize edin. 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.

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:

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 daha fazla vurgu yaparak dikkat çekelim.

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

İçeriğin, üst uygulama çubuğunun üzerinde yüzen bir sayfada görünmesi için üst uygulama çubuğunun ve içeriğin yüksekliklerini değiştirelim. 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 şekilde 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.appcompat.app.AlertController.RecycleListView
       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

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

shr_product_card.xml

<com.google.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>

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:

Kartları farklı en-boy oranlarında ve boyutlarda gösterecek şekilde düzeni değiştirin. 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ı 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.java içindeki onCreateView() yönteminizi değiştirin. "set up the RecyclerView" yorumundan sonraki kod bloğunu aşağıdakilerle değiştirin:

ProductGridFragment.java

// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.HORIZONTAL, false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
   @Override
   public int getSpanSize(int position) {
       return position % 3 == 2 ? 2 : 1;
   }
});
recyclerView.setLayoutManager(gridLayoutManager);
StaggeredProductCardRecyclerViewAdapter adapter = new StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

Ayrıca, product_grid_fragment.xml dosyamızda küçük bir değişiklik yaparak NestedScrollView dosyamızdaki dolguları kaldırmamı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.java öğesini değiştirerek RecyclerView içindeki kart dolgumuzu da ayarlayacağız. ProductGridItemDecoration.java öğesinin getItemOffsets() yöntemini aşağıdaki gibi değiştirin:

ProductGridItemDecoration.java

@Override
public void getItemOffsets(Rect outRect, View view,
                          RecyclerView parent, RecyclerView.State state) {
   outRect.left = smallPadding;
   outRect.right = largePadding;
}

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

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 içinde 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.java.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 geçerli 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 metninin rengini açı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österilir.

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

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

Sonraki adımlar

Şu MDC bileşenlerini kullanmışsınızdır: tema, yazı biçimi ve yükseklik. MDC-Android Kataloğu'ndaki MDC Android bileşenleri bölümünde daha fazla bileşeni inceleyebilirsiniz.

Planladığınız uygulama tasarımında MDC kitaplığında bileşenleri olmayan öğeler varsa ne olur? MDC-104: Material Design Advanced Components (MDC-104: Material Design Gelişmiş Bileşenleri) 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

MDC-103 Android: Renk, Hareket ve Tür (Java) ile materyal teması oluşturma Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Ne oluşturacaksınız?

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

Gerekenler

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

MDC-102'den devam mı ediyorsunuz?

Başlangıç Codelab uygulamasını indirin

...veya GitHub'dan kopyalayın

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

Proje bağımlılıkları ekleme

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

colorPrimaryDark ve colorAccent'i ayarlama

Metin alanlarını biçimlendirme

Düğme renklerini stilize etme

Üst uygulama çubuğunu stilize etme

Etiketlere stil uygulama

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

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

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

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

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

Stilleri ve renkleri değiştirme

Sonraki adımlar

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

Gelecekte Material Components'ı kullanmaya devam etmek istiyorum

MDC-103 Android: Renk, Hareket ve Tür (Java) ile materyal teması oluşturma