Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

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

MDC-103 Android: Renk, Hareket ve Tür ile malzeme tema (Java)

Malzeme Bileşenleri (MDC), geliştiricilerin Materyal Tasarım'ı uygulamasına yardımcı olur. Google'da bir mühendis ve kullanıcı deneyimi tasarımcıları ekibi tarafından oluşturulan MDC, onlarca güzel ve işlevsel kullanıcı arayüzü bileşenine sahiptir ve Android, iOS, web ve Flutter için kullanılabilir.

material.io/develop

Mlab-101 ve MDC-102 kodlu lab'larda kıyafet ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı uygulamanın temellerini oluşturmak için Malzeme Bileşenleri'ni (MDC) kullandınız. Bu uygulama, giriş ekranıyla başlayan ve kullanıcıyı, ürünleri gösteren bir ana ekrana götüren bir kullanıcı akışı içeriyor.

Materyal Tasarım'ın yakın zamanda kullanıma sunulmasıyla tasarımcılara ve geliştiricilere ürün markasını ifade etme esnekliği arttı. Artık MDC'yi, Heykeli özelleştirmek ve benzersiz tarzını her zamankinden daha fazla yansıtmak için kullanabilirsiniz.

Geliştireceğiniz uygulama

Bu codelab'de, Tapınağı'nı kullanarak markayı yansıtacak şekilde özelleştirmeniz gerekir:

Renk
Yazı biçimi
Yükseklik
Düzen

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

Temalar
Yazı biçimi
Yükseklik

Gerekenler

Android geliştirmeyle ilgili temel bilgiler
Android Studio(henüz yoksa buradan indirin)
Android emülatörü veya cihaz (Android Studio üzerinden kullanılabilir)
Örnek kod (sonraki adıma bakın)

Android uygulamaları oluşturma deneyiminizi nasıl değerlendirirsiniz?

Acemi

Orta

Yetkili

MDC-102'den devam mı ediyorsunuz?

MDC-102'yi tamamladıysanız kodunuz bu codelab'i kullanmaya hazır olmalıdır. 3. adıma atlayın: Rengi değiştirin.

Starter codelab uygulamasını indirme

Starter uygulamasını indirin

Başlangıç uygulaması, material-components-android-codelabs-103-starter/java dizininde bulunur. Başlamadan önce bu dizine cd girdiğinizden emin olun.

...veya GitHub'dan klonlayı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

Android Studio'da başlangıç kodunu yükleme

Kurulum sihirbazı tamamlandığında ve Android Studio'ya hoş geldiniz penceresi gösterildiğinde Mevcut bir Android Studio projesini aç'ı tıklayın. Örnek kodu yüklediğiniz dizine gidin ve Heykel projesini açmak için java -> Temple'ı (veya bilgisayar üzerinde arama yapın) seçin.
Android Studio'nun projeyi oluşturması ve senkronize etmesi için biraz bekleyin. Bu işlem, Android Studio penceresinin alt kısmındaki etkinlik göstergeleri tarafından gösterilmektedir.
Bu aşamada Android Studio, aşağıda gösterildiği gibi Android SDK'sı veya derleme araçları eksik olduğu için bazı derleme hatalarını ortaya çıkarabilir. Bu uygulamaları 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 kodun bu bağımlılık zaten listelenmesi gerekir ancak emin olmak için aşağıdaki adımları uygulamanız önerilir.

app modülü build.gradle dosyasına gidin ve dependencies bloğunun MDC Android'de bir 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 ve projeyi senkronize etmek için build.gradle dosyasını düzenleyin.

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'
}

Starter 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şturmak ve çalıştırmak için yeşil Çalıştır / Oynat düğmesine basın.
Kullanabileceğiniz cihazlarda halihazırda bir Android cihaz varsa Dağıtım Hedefi Seçin penceresinde 8. Adıma geçin. Aksi takdirde, Yeni Sanal Cihaz Oluştur'u tıklayın.
Donanım Seç ekranında, Pixel 2 gibi bir telefon cihazını seçin ve ardından İleri'yi tıklayın.
Sistem Resmi ekranında yeni bir Android sürümü (tercihen en yüksek API seviyesi) 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 (Son) seçeneğini tıklayın.
Dağıtım hedefi iletişim kutusundan bir Android cihaz seçin.
Tamam'ı tıklayın.
Android Studio uygulamayı oluşturur, dağıtır ve hedef cihazda otomatik olarak açar.

İşlem başarılı! Cihazınızda veya emülatörde Shrine'in giriş sayfası çalışıyor olmalıdır. İleri'ye bastığınızda, ana sayfada Tapınağın ana sayfası ve alt kısmında bir ürün resimleri tablosu görünür.

Renk, yükseklik ve yazı biçimini değiştirerek en üstteki uygulama çubuğunun Tapınak markasıyla eşleşmesini sağlayın.

Bu renk teması, özel renklerle bir tasarımcı tarafından oluşturulmuştur (aşağıdaki resimde gösterilmiştir). Türbenin markasından seçilip daha kapsamlı bir palet oluşturmak üzere genişleten Materyal Tema Düzenleyici'ye uygulanan renkleri içerir. (Bu renkler, 2014 Materyal renk paletlerinden gelmemektedir.)

Materyal Tema Düzenleyici, bu renkleri her biri için 50, 100, 200, .... ile 900 arası etiketler de dahil olmak üzere sayısal olarak etiketlenmiş gölgeler halinde düzenlemiştir. Tapınak yalnızca pembe karteladan 50, 100 ve 300 tonlarını ve kahverengi karteladan 900 gölgeyi kullanır.

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

colorPrimaryDark ve colorAccent'i ayarlama

colors.xml bölümünde, aşağıdaki satırları değiştirin. colorAccent özelliği, diğer uygulamaların 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 simgeleri kullanmak için Theme.Shrine Tapınağı uygulamasının uygulama temasına aşağıdakileri ekleyin:

styles.xml

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

colors.xml ve styles.xml şu şekilde 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 ürününde #442C2E olarak ayarlanmış yeni bir textColorPrimary renk kaynağı ekleyin ve toolbarIconColor özelliğini textColorPrimary rengine referans verecek şekilde güncelleyin.

android:textColorPrimary özelliğini textColorPrimary rengine ayarlamak için styles.xml dosyanızı güncelleyin.

Theme.Shrine içinde android:textColorPrimary ayarlanırsa metin, üst uygulama çubuğu ve üst uygulama çubuğumuzdaki simgeler de dahil olmak üzere tüm öğeler için biçimlendirilir.

Belirtmek istediğimiz bir konu daha var: Widget.Shrine.Toolbar stilindeki android:theme özelliğini Theme.Shrine olarak ayarlayın.

colors.xml ve styles.xml şu şekilde 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>

Üretin ve çalıştırın. Ürün ızgaranız artık şu şekilde görünmelidir:

Giriş ekranının stilini, renk şemamızla eşleşecek şekilde değiştirelim.

Metin alanlarına stil ekleme

Ana sayfada özetlenecek metin girişlerini ana hatlarıyla değiştirelim 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 cihazınıza 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'deki 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 ayarlama

Son olarak, giriş sayfasındaki düğmelerin renklerini ayarlayın. styles.xml cihazınıza şu 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 genişler ve düğmenin metin rengini ve arka plan tonunu değiştirir. Widget.Shrine.Button.TextButton, varsayılan metinMaterialButton stilinden genişler ve yalnızca metin rengini değiştirir.

Sonraki düğmesindeki Widget.Shrine.Button stilini ve İptal düğmenizdeki 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ında Tapınak logosunun rengini güncelleyin. Bu, vektöre (shr_logo.xml) çekilecek küçük bir değişiklik gerektirecektir. Çekilebilir dosyayı açın ve android:fillAlpha özelliğini 1 olarak değiştirin. Çekilebilir 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 adresindeki <ImageView> logosundaki android:tint özelliğini ?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" />

Üretin ve çalıştırın. Giriş ekranınız artık şu şekilde görünecektir:

Tasarımcınız, renk değişikliklerine ek olarak, sitede kullanacağınız belirli bir yazı biçimi de sağlamıştır. Bunu en üstteki uygulama çubuğuna da ekleyelim.

Üst uygulama çubuğunun stilini belirleme

En iyi uygulama çubuğunuzun metin görünümünü, tasarımcınızın belirttiği özelliklere uyacak şekilde değiştirin. Aşağıdaki metin görünümü stilini styles.xml stiline ekleyin ve Widget.Shrine.Toolbar stilinde bu stile referans vermek için titleTextAppearance özelliğini 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 şu şekilde 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>

Etiketlerin stilini ayarlama

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

Başlık etiketinizdeki textAppearanceHeadline6 yazı tipini textAppearanceSubtitle2 olarak şu şekilde güncelleyin:

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 shr_product_card.xml özelliğinde <TextView> etiketini shr_product_card.xml ö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>

Üretin ve çalıştırın. Ürün ızgara ekranınız artık şu şekilde görünmelidir:

Giriş ekranının yazı biçimini eşleşecek şekilde değiştirelim.

styles.xml için şu 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 ürününde yeni stili "<TextView>" başlığınıza ayarlayın (ve mevcut textAllCaps ve 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" />

Üretin ve çalıştırın. Giriş ekranınız artık şu şekilde görünecektir:

Şimdi, Heykel'le eşleşen renk ve yazı stiliyle sayfanın stilini belirlediğinize göre, Heykel'in ürünlerini gösteren kartlara göz atalım. Şu anda, uygulamada gezinmenin altındaki beyaz bir yüzeye yerleştirilmiş. Ürünlerin daha fazla ilgi çekmesini sağlayalım.

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

Üst uygulama çubuğunun ve içeriğin yükseltilerini, içeriğin en üstteki uygulama çubuğunun üzerinde kayan bir sayfada görünmesine neden olacak şekilde değiştirelim. shr_product_grid_fragment.xml'de NestedScrollView XML bileşenlerinize app:elevation özelliğini AppBarLayout ve android:elevation özelliğini 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.appcompat.app.AlertController.RecycleListView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

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

shr_product_card.xml içindeki app:cardElevation değerini 2dp yerine 0dp olarak değiştirerek her kartın yüksekliğini ayarlayabilirsiniz. app:cardBackgroundColor öğesini 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">

Hemen göz atın. Ürün tablosu sayfasındaki her kartın yüksekliğini ayarladınız.

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

styles.xml ürününde aşağıdaki özelliği Widget.Shrine.Button stilinize ekleyin:

styles.xml

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

Button's stilinde android:stateListAnimator ayarlandığında, sağladığımız animatörü kullanmak için İleri düğmesini ayarlar.

Üretin ve çalıştırın. Giriş ekranınız artık şu şekilde görünecektir:

Kartları farklı en boy oranlarında ve boyutlarında göstermek için düzeni değiştirin. Böylece her kart, birbirinden farklı görünür.

Kademeli RecyclerView adaptörü kullanma

staggeredgridlayout paketinde, yatay olarak kaydırılması gereken, asimetrik aşamalı kart düzeni görüntüleyen yeni bir RecyclerView adaptörü sağladık. Bu kodu kendi başınıza incelemekten çekinmeyin. Kodun nasıl uygulandığı burada açıklanmayacaktır.

Bu yeni adaptörü kullanmak için ProductGridFragment.java içinde onCreateView() yönteminizi değiştirin. "RecyclerView"yorumunu oluşturduktan sonra kod bloğunu aşağıdakilerle değiştirin:

ProductGRFragment.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, dolgularımızdan NestedScrollView bazılarını kaldırmak için product_grid_fragment.xml adlı öğede aşağıdaki gibi 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.java içinde değişiklik yaparak RecyclerView içindeki kart dolgumuzu da ayarlarız. ProductGridItemDecoration.java öğesinin getItemOffsets() yöntemini aşağıdaki gibi değiştirin:

ProductGRItemDecoration.java

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

Üretin ve çalıştırın. Ürün ızgara öğeleri artık şunları içermelidir:

Renk, markanızı ifade etmenin etkili bir yoludur ve küçük bir renk değişikliğinin kullanıcı deneyiminiz üzerinde büyük etkisi olabilir. Bunu denemek için, markanın renk şemasının tamamen farklı olması durumunda Tapınak'ın nasıl görüneceğine bakalım.

Stilleri ve renkleri değiştirme

styles.xml için 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 uygulamasında 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>

colors.xml ürününde araç çubuğu simge rengini aşağıda gösterildiği gibi değiştirin:

colors.xml

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

Ardından, araç çubuğu stilimizin android:theme özelliğini, mevcut kodlamaya sabit kodlamak yerine &&t;?theme&quot özelliğini kullanarak referans verin:

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ının metin alanlarında ipucu metni rengini açın. android:textColorHint alanını metin alanlarına ekleyin' stil:

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>

Üretin ve çalıştırın. Yeni tema artık önizlemeniz için görünecektir.

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

Şu ana kadar tasarımcınızın tasarım özelliklerine benzeyen bir uygulama oluşturdunuz.

Sonraki adımlar

Şu MDC bileşenlerini kullandınız: tema, tipografi ve yükseklik. MDC-Android Catalog MDC Android bileşenlerindeki diğer bileşenleri keşfedebilirsiniz.

Planlanan uygulama tasarımınız, MDC kitaplığında bileşeni olmayan öğeler içeriyorsa ne olur? MDC-104: Materyal Tasarım Gelişmiş Bileşenleri'nde, belirli bir görünüme ulaşmak için MDC kitaplığını kullanarak özel bileşenlerin nasıl oluşturulacağını inceleyeceğiz.

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

Kesinlikle katılıyorum

Katılıyorum

Nötr

Katılmıyorum

Kesinlikle katılmıyorum

Gelecekte Materyal Bileşenlerini kullanmaya devam etmek istiyorum

Kesinlikle katılıyorum

Katılıyorum

Nötr

Katılmıyorum

Kesinlikle katılmıyorum

MDC-103 Android: Renk, Hareket ve Tür ile malzeme tema (Java)

Geliştireceğiniz uygulama

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

Gerekenler

Android uygulamaları oluşturma deneyiminizi nasıl değerlendirirsiniz?

MDC-102'den devam mı ediyorsunuz?

Starter codelab uygulamasını indirme

...veya GitHub'dan klonlayın

Android Studio'da başlangıç kodunu yükleme

Proje bağımlılıkları ekleme

Starter uygulamasını çalıştırma

colorPrimaryDark ve colorAccent'i ayarlama

Metin alanlarına stil ekleme

Düğme renklerini ayarlama

Üst uygulama çubuğunun stilini belirleme

Etiketlerin stilini ayarlama

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

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

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

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

Kademeli RecyclerView adaptörü kullanma

Stilleri ve renkleri değiştirme

Sonraki adımlar

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

Gelecekte Materyal Bileşenlerini kullanmaya devam etmek istiyorum