MDC-101 Android: Malzeme Bileşenleri (MDC) ile İlgili Temel Bilgiler (Kotlin)

1. Giriş

Materyal Bileşenleri (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, onlarca güzel ve işlevsel kullanıcı arayüzü bileşenine sahiptir ve Android, iOS, web ve Flutter'da kullanılabilir.material.io/develop

Android için Materyal Tasarım ve Malzeme Bileşenleri nelerdir?

Materyal Tasarım, cesur ve güzel dijital ürünler oluşturmaya yönelik bir sistemdir. Ürün ekipleri, tarzı, markayı, etkileşimi ve hareketi tutarlı bir ilke ve bileşen grubu altında birleştirerek en yüksek tasarım potansiyellerini gerçekleştirebilir.

Android için Materyal Bileşenler (MDC Android), uygulamanız genelinde tutarlılık sağlamak amacıyla tasarım ve mühendisliği bir bileşen kitaplığıyla birleştirir. Materyal Tasarım sistemi geliştikçe bu bileşenler, tutarlı bir piksel mükemmelliğinde uygulama ve Google'ın kullanıcı arabirimi geliştirme standartlarına uyum sağlamak için güncellenir. MDC, web, iOS ve Flutter için de kullanılabilir.

Bu codelab'de, MDC Android'in çeşitli bileşenlerini kullanarak bir giriş sayfası oluşturacaksınız.

Oluşturacaklarınız

Bu codelab, giyim ve ev eşyaları satan bir e-ticaret Android uygulaması olan Shrine adlı bir uygulama oluşturma konusunda size yol gösterecek 4 codelab'den ilkidir. Bu eğitimde, MDC Android'i kullanarak bileşenleri herhangi bir markayı veya stili yansıtacak şekilde nasıl özelleştirebileceğiniz gösterilmektedir.

Bu codelab'de, Shrine için aşağıdakileri içeren bir giriş sayfası oluşturacaksınız:

• Biri kullanıcı adı, diğeri şifre girmek için olmak üzere iki metin alanı
• Biri "İptal", diğeri "İleri" için olan iki düğme
• Uygulamanın adı (Yer)
• Shrine logosunun resmi

İlgili codelab'leri şu adreste bulabilirsiniz:

• MDC 102: Material Design Yapısı ve Düzeni
• MDC 103: Renk, Şekil, Yükseklik ve Tür ile Materyal Tasarım Teması
• MDC 104: Materyal Tasarım Gelişmiş Bileşenleri

MDC 104'ün sonunda, şuna benzer bir Android uygulaması oluşturacaksınız:

Bu codelab'deki MDC Android bileşenleri

• Metin alanı
• Düğme

Bu codelab'de MDC Android tarafından sağlanan varsayılan bileşenleri kullanacaksınız. MDC 103: Renk, Şekil, Yükseklik ve Tür ile Materyal Tasarım Teması (MDC 103: Materyal Tasarım Teması) bölümünde bunları nasıl özelleştireceğinizi öğreneceksiniz.

Gerekenler

• Android geliştirme hakkında temel düzeyde bilgi
• Android Studio (yoksa buradan indirin)
• Bir Android emülatörü veya cihaz (Android Studio üzerinden kullanılabilir)
• Örnek kod (sonraki adıma bakın)

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

Acemi Orta Uzman

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

Android Studio'yu başlatma

Android Studio'yu açtığınızda "Android Studio'ya hoş geldiniz" başlıklı bir pencere gösterilir. Ancak, Android Studio'yu ilk kez başlatıyorsanız Android Studio Kurulum Sihirbazı adımlarını varsayılan değerleri kullanarak uygulayın. Bu adımda gerekli dosyaların indirilmesi ve yüklenmesi birkaç dakika sürebilir. Bu nedenle, bir sonraki bölümü yaparken bu dosyayı arka planda çalışır durumda bırakabilirsiniz.

Başlangıç Codelab uygulamasını indirin

Başlatıcı uygulamayı indirin

Başlatıcı uygulama, material-components-android-codelabs-101-starter/kotlin dizininde bulunur.

...veya GitHub'dan klonlayın

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

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

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

Android Studio'da başlangıç kodunu 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 Shipping projesini açmak için kotlin -> shrine'ı (veya bilgisayarınızda shrine 'ı arayın) seçin.
2. Android Studio penceresinin alt kısmındaki etkinlik göstergelerinde gösterildiği gibi, Android Studio'nun projeyi derleyip senkronize etmesi için bir süre bekleyin.
3. Bu noktada Android Studio, Android SDK'sı veya aşağıda gösterilen gibi derleme araçları eksik olduğu için bazı derleme hataları oluşturabilir. Bunları yüklemek/güncellemek ve projenizi senkronize etmek için Android Studio'daki talimatları uygulayın.

Proje bağımlılıklarını ekleme

Projenin MDC Android destek kitaplığına bağımlı olması gerekiyor. İndirdiğiniz örnek kodda bu bağımlılığın zaten listelenmiş olması gerekir ancak emin olmak için aşağıdaki adımları uygulamanız önerilir.

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

Başlatıcı uygulamayı çalıştırma

Çalıştır / Oynat düğmesinin solundaki derleme yapılandırmasının app olduğundan emin olun. Uygulamayı derleyip çalıştırmak için yeşil Çalıştır/Oynat düğmesine basın. Yayınlama 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 ardından Sonraki'yi tıklayın. Sistem Görüntüsü ekranında, tercihen en yüksek API düzeyinde bir son Android sürümünü seçin. Yüklü değilse gösterilen İndir bağlantısını tıklayıp indirme işlemini tamamlayın. İleri'yi tıklayın. Android Sanal Cihaz (AVD) ekranında ayarları olduğu gibi bırakın ve Son'u 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ılı bir şekilde çalıştıramıyorsanız durdurun ve geliştirici ortamınızla ilgili sorunları giderin.

Oluşturma sırasında INSTALL_FAILED_INVALID_APK hatası alırsanız Android Studio'da "Build" -> "Clean Project" (Projeyi Temizle) işlemini deneyin.

Başarıyla gerçekleştirildi. Shrine'ın giriş sayfası için başlangıç kodu, emülatörünüzde çalışıyor olmalıdır. "Shrine" adını ve hemen altında Shrine logosunu görürsünüz.

Koda bir göz atalım. Örnek kodumuzda, parçaları görüntülemek ve parçalar arasında gezinmek için basit bir Fragment gezinme çerçevesi sağladık.

shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine dizininde MainActivity.kt klasörünü açın. Şunları içermelidir:

Not: Navigasyon, Android Studio'yu kullanarak Gezinme yolları oluşturma ve yönetme hakkında daha fazla bilgi edinmek için lütfen Kotlin Android Temelleri 03.2: Gezinme yollarını tanımlama adlı alıştırmaya göz atın.

MainActivity.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment

class MainActivity : AppCompatActivity(), NavigationHost {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.shr_main_activity)

       if (savedInstanceState == null) {
           supportFragmentManager
                   .beginTransaction()
                   .add(R.id.container, LoginFragment())
                   .commit()
       }
   }

   override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
       val transaction = supportFragmentManager
               .beginTransaction()
               .replace(R.id.container, fragment)

       if (addToBackstack) {
           transaction.addToBackStack(null)
       }

       transaction.commit()
   }
}

Bu etkinlik, shr_main_activity.xml içinde tanımlanan R.layout.shr_main_activity düzen dosyasını görüntüler.

onCreate(), içinde MainActivity.kt öğesinin, LoginFragment öğesini göstermek için bir Fragment işlemi başlattığını görebilirsiniz. Bu codelab'de LoginFragment üzerinde değişiklik yapacağız. Etkinlik ayrıca NavigationHost içinde tanımlanan ve herhangi bir parçanın farklı bir parçaya gitmesine olanak tanıyan bir navigateTo(Fragment) yöntemini de uygular.

Düzen dosyasını açmak için etkinlik dosyasını Command + tıklayın (veya Ctrl + Tıklama) shr_main_activity tuşlarına basın veya app -> res -> layout -> shr_main_activity.xml uygulamasında düzen dosyasına gidin.

Not: shr_main_activity.xml dosyasını açtığınızda XML dosyası yerine uygulama önizlemesi görürseniz panelin sol alt kısmındaki "Tasarım" sekmesinden "Metin" sekmesine geçin. Bu kod laboratuvarı boyunca "Metin" sekmesinde çalışacağız.

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"/>

Burada, etkinliğin görüntülediği tüm parçalar için kapsayıcı görevi gören basit bir <FrameLayout> görüyoruz.

Sonra LoginFragment.kt uygulamasını açalım.

LoginFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class LoginFragment : Fragment() {

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       return view
   }
}

LoginFragment, shr_login_fragment düzen dosyasını şişirir ve onCreateView() içinde görüntüler.

Şimdi, giriş sayfasının nasıl göründüğünü görmek için shr_login_fragment.xml sayfa düzeni dosyasına göz atalım.

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

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

       <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:textAllCaps="true"
           android:textSize="16sp" />
   </LinearLayout>
</ScrollView>

Burada, tapınak logosunu temsil eden üst kısmında <ImageView> bulunan bir <LinearLayout> görüyoruz.

Bunun ardından, logonun altında Tapınak etiketini temsil eden bir <TextView> etiketi bulunuyor. Bu etiketin metni, @string/shr_app_name adlı bir dize kaynağıdır. Dize kaynağı adını Komut + Tıkla (veya Denetleyici + Tıkla) seçerseniz ya da app -> res -> values -> strings.xml dosyasını açarsanız dize kaynaklarının tanımlandığı strings.xml dosyasını görebilirsiniz. Gelecekte daha fazla dize kaynağı eklendiğinde bunlar burada tanımlanacaktır. Bu dosyadaki her kaynağın, Shrine uygulamasının bir parçası olduğunu belirtmek için bir shr_ öneki olmalıdır.

Artık başlangıç kodunu öğrendiğinize göre ilk bileşenimizi uygulayalım.

3. Metin alanı ekleme

Başlangıç olarak, giriş sayfamıza, kullanıcıların kullanıcı adlarını ve şifrelerini girmeleri için iki metin alanı ekleyeceğiz. Kayan bir etiket ve hata mesajları görüntüleyen yerleşik bir işlev içeren MDC Metin Alanı bileşenini kullanacağız.

Materyal Tasarım metin alanları, markanızı desteklemek için daha fazla özelleştirme seçeneği sunmak amacıyla büyük ölçüde geliştirildi. Bu geliştirmeler, daha iyi kullanılabilirlik ve görsel tasarım için kapsamlı kullanıcı deneyimi (UX) araştırmalarıyla desteklenir.

Materyal Kuralları makalesinde yeni metin alanları hakkında daha fazla bilgi edinebilirsiniz.

XML'i ekleme

shr_login_fragment.xml öğesine, <LinearLayout> içinde bir TextInputEditText alt öğesi bulunan iki TextInputLayout öğesi ekleyin. Bu öğeleri "SHRINE" (TAPINAK) etiketinin <TextView> altına ekleyin:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

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

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

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

İpucu: Android Studio'da bir dosyayı hızlıca açmak için Üst Karakter tuşuna iki kez dokunarak kayan arama çubuğunu görüntüleyin ve açmak istediğiniz dosyanın adını yazın.

Yukarıdaki snippet, her biri bir <TextInputLayout> öğesi ve bir <TextInputEditText> alt öğesinden oluşan iki metin alanını temsil eder. Her metin alanına ilişkin ipucu metni android:hint özelliğinde belirtilir.

Metin alanı için @string/shr_hint_username ve @string/shr_hint_password olmak üzere iki yeni dize kaynağı ekledik. Bu dize kaynaklarını görmek için strings.xml uygulamasını açın.

strings.xml

<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>

Giriş doğrulaması ekleme

TextInputLayout bileşenleri, yerleşik hata geri bildirimi işlevi sunar.

Hata geri bildiriminin gösterilmesi için shr_login_fragment.xml öğesinde şu değişiklikleri yapın:

• Şifre TextInputLayout öğesinde app:errorEnabled özelliğini true olarak ayarlayın. Bu işlem, metin alanının altına hata mesajı için ek dolgu ekler.
• Şifre TextInputEditText öğesinde android:inputType özelliğini "textPassword" olarak ayarlayın. Bu işlem, şifre alanındaki giriş metnini gizler.

Bu değişikliklerle, shr_login_fragment.xml içindeki metin alanları şu şekilde görünmelidir:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

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

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   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>

Şimdi uygulamayı çalıştırmayı deneyin. "Kullanıcı Adı" ve "Şifre" için iki metin alanı içeren bir sayfa göreceksiniz.

Kayan etiket animasyonuna göz atın:

MDC metin alanı özellikleri şunlardır:

• Yerleşik hata geri bildirimini görüntüleme
• app:passwordToggleEnabled kullanarak şifre görünürlüğü için açma/kapatma düğmesi desteği
• app:helperText kullanarak yerleşik yardımcı metin işlevi sunma
• app:counterEnabled ve app:counterMaxLength kullanılarak toplam ve maksimum karakter sayısı gösteriliyor

4. Düğme ekleme

Daha sonra, giriş sayfamıza iki düğme ekleyeceğiz: "İptal" ve "İleri". İkonik Materyal Tasarım mürekkep dalga etkisi efektinin yerleşik olarak bulunduğu MDC Düğmesi bileşenini kullanacağız.

XML'i ekleme

shr_login_fragment.xml'te, TextInputLayout öğelerinin altına <LinearLayout> için bir <RelativeLayout> ekleyin. Ardından <RelativeLayout> öğesine iki <MaterialButton> öğesi ekleyin.

Elde edilen XML dosyası aşağıdaki gibi görünmelidir:

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"
       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.MaterialComponents.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>

Not: MaterialButton bileşeninin varsayılan stili renkli, yükseltilmiş bir düğmedir. Ancak bu İptal düğmesi için yükseltilmemiş, doldurulmamış bir düğme istiyoruz. Bunu yapmak için bir style özelliği uygularız: @style/Widget.MaterialComponents.Button.TextButton.

İşte bu kadar. Uygulamayı çalıştırdığınızda her bir düğmeye dokunduğunuzda mürekkep dalgası gösterilir.

MDC düğmesi özellikleri şunlardır:

• Varsayılan olarak yerleşik dokunma geri bildirimi (MDC Ripple olarak adlandırılır)
• Varsayılan yükseklik
• Özelleştirilebilir köşe yarıçapı ve çizgisi

5. Sonraki Parçaya git

Son olarak, başka bir parçaya geçiş yapmak için "SONRAKİ" düğmemizi bağlamak üzere LoginFragment.kt alanına bazı Kotlin kodu ekleyeceğiz.

onCreateView() altındaki LoginFragment.kt içine, şifrenin geçerli olup olmadığını belirleyen mantık içeren gizli bir boole isPasswordValid yöntemi ekleyelim. Bu demo için şifrenin en az 8 karakter uzunluğunda olduğundan emin olacağız:

LoginFragment.kt

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

Ardından, "Sonraki" düğmesine, az önce oluşturduğumuz isPasswordValid() yöntemine göre hatayı ayarlayan ve temizleyen bir tıklama dinleyici ekleyin. onCreateView() ürününde bu tıklama işleyici, şişirme satırı ile return view satırı arasına yerleştirilmelidir.

Şimdi, hatayı giderecek önemli etkinlikleri dinlemek için TextInputEditText şifresine bir anahtar dinleyici ekleyelim. Bu dinleyici, şifrenin geçerli olup olmadığını kontrol etmek için isPasswordValid() değerini de kullanmalıdır. Bunu, onCreateView() ürününde tıklama işleyicinin hemen altına ekleyebilirsiniz.

onCreateView() yönteminiz artık aşağıdaki gibi görünecektir:

LoginFragment.kt

override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment.
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       // Set an error if the password is less than 8 characters.
       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

       // Clear the error once more than 8 characters are typed.
       view.password_edit_text.setOnKeyListener({ _, _, _ ->
           if (isPasswordValid(password_edit_text.text!!)) {
               // Clear the error.
               password_text_input.error = null
           }
           false
       })

       return view
   }
}

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

Şimdi başka bir parçaya gidebiliriz. onCreateView() içinde, hata doğrulama başarılı olduğunda başka bir parçaya gitmek için OnClickListener öğesini güncelleyin. clickListener kodunuz artık aşağıdaki gibi görünecektir:

LoginFragment.kt

// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
   if (!isPasswordValid(password_edit_text.text!!)) {
       password_text_input.error = getString(R.string.shr_error_password)
   } else {
       // Clear the error.
       password_text_input.error = null
       // Navigate to the next Fragment.
       (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
   }
})

Tıklama işleyicinin else destek kaydına (activity as NavigationHost).navigateTo(ProductGridFragment(), false) satırını ekledik. Bu satır, yeni bir parçaya (ProductGridFragment) gitmek için MainActivity öğesinden navigateTo() yöntemini çağırır. Şu anda bu, MDC-102'de üzerinde çalışacağınız boş bir sayfadır.

navigateTo() içindeki false parametresi, etkinliğe geçerli parçayı geri yığınına eklememesini bildirir. Bu durumda kullanıcı, geri tuşunu kullanarak giriş ekranına dönemez.

Şimdi uygulamayı oluşturun. Sonraki düğmesine basın.

Başardınız! Bu ekran, MDC-102'de üzerinde çalışacağınız bir sonraki codelab'imizin başlangıç noktası olacaktır.

6. Hepsi bitti

Android kitaplığı için Materyal Bileşenleri, temel XML işaretlemesini ve yaklaşık 30 satırlık Kotlin satırını kullanarak Materyal Tasarım yönergelerine uygun, aynı zamanda tüm cihazlarda tutarlı bir görünüm ve davranışa sahip, güzel bir giriş sayfası oluşturmanıza yardımcı oldu.

Tamamlanmış MDC 101 uygulamasına, tamamlanmış codelab'i indirerek veya git ile 101-complete (101-complete) dokümanını inceleyerek erişebilirsiniz: git checkout 101-complete.

Android Studio ile bu dizindeki shrine projesini açıp uygulamayı çalıştırarak sayfanızı tamamlanmış sürümle test edebilirsiniz.

Sonraki adımlar

Metin alanı ve düğme, MDC Android kitaplığındaki iki temel bileşendir ancak daha birçok bileşen vardır. MDC Android'deki diğer bileşenleri keşfedebilirsiniz. Alternatif olarak, üst uygulama çubuğu, kart görünümü ve ızgara düzeni hakkında bilgi edinmek için MDC 102: Materyal Tasarım Yapısı ve Düzeni başlıklı makaleyi inceleyin. Material Components'i denediğiniz için teşekkür ederiz. Bu codelab'den memnun kaldığınızı umuyoruz.

Bu codelab'i makul bir zaman ve çabayla tamamlayabildim

Kesinlikle katılıyorum Katılıyorum Nötr Katılmıyorum Kesinlikle katılmıyorum

Gelecekte Materyal Bileşenleri kullanmaya devam etmek istiyorum

Kesinlikle katılıyorum Katılıyorum Nötr Katılmıyorum Kesinlikle katılmıyorum