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

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

Material Design ve Android için Material Components nedir?

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

Android uygulamaları için Material Components for Android (MDC Android), uygulamanızda tutarlılık sağlamak üzere tasarım ve mühendisliği bir bileşen kitaplığıyla birleştirir. Material Design sistemi geliştikçe bu bileşenler, piksel açısından mükemmel bir tutarlılık ve Google'ın ön uç geliştirme standartlarına uygunluk 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.

Ne oluşturacaksınız?

Bu codelab, Shrine adlı bir uygulama oluşturma sürecinde size yol gösterecek 4 codelab'den ilkidir. Shrine, giyim ve ev eşyaları satan bir e-ticaret Android uygulamasıdır. Bu örnekte, 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 kullanılan iki metin alanı
• Biri "İptal", diğeri "Sonraki" için iki düğme
• Uygulamanın adı (Shrine)
• Shrine'ın logosunun resmi

İlgili codelab'leri şu adreste bulabilirsiniz:

• MDC 102: Material Design Yapısı ve Düzeni
• MDC 103: Material Design'da Renk, Şekil, Yükseklik ve Tür ile Tema Oluşturma
• MDC 104: Material Design Gelişmiş Bileşenleri

MDC 104'ün sonunda aşağıdaki gibi görünen 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. Bunları nasıl özelleştireceğinizi MDC 103: Material Design Theming with Color, Shape, Elevation and Type (MDC 103: Renk, Şekil, Yükseklik ve Tür ile Material Design Temalandırma) başlıklı makalede öğrenebilirsiniz.

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

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ğerlerle 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 işlemi arka planda çalıştırabilirsiniz.

Başlangıç Codelab uygulamasını indirin

Başlangıç uygulamasını indirin

Başlangıç uygulaması, material-components-android-codelabs-101-starter/kotlin dizininde bulunur.

...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 101-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 (ö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.

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. 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ğı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" (Derle) -> "Clean Project" (Projeyi Temizle) işlemini yapmayı deneyin.

Başarılı aktarım 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örmelisiniz.

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

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

Not: Gezinme, Android Studio'yu kullanarak gezinme yolları oluşturma ve bunları koruma hakkında daha fazla bilgi edinmek için lütfen Kotlin Android Hakkında Temel Bilgiler 03.2: Gezinme yollarını tanımlama başlıklı 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österir.

onCreate(), MainActivity.kt, LoginFragment öğesini göstermek için Fragment işlemi başlatır. Bu codelab'de LoginFragment dosyasını değiştireceğiz. Etkinlik, NavigationHost içinde tanımlanan bir navigateTo(Fragment) yöntemini de uygular. Bu yöntem, herhangi bir parçanın farklı bir parçaya gitmesine olanak tanır.

Düzen dosyasını açmak için etkinlik dosyasında Command + Tıkla (veya Control + Tıkla) shr_main_activity tuşlarına basın ya da app -> res -> layout -> shr_main_activity.xml'da 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 codelab 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österdiği tüm parçalar için kapsayıcı görevi gören basit bir <FrameLayout> görüyoruz.

Şimdi 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österir.

Şimdi, giriş sayfasının nasıl göründüğünü görmek için shr_login_fragment.xml düzen 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 Shrine etiketini temsil eden bir <TextView> etiketi yer alıyor. Bu etiketin metni, @string/shr_app_name adlı bir dize kaynağıdır. Dize kaynağı adını Command + Tıkla (veya Control + Tıkla) ile tıklarsanız ya da app -> res -> values -> strings.xml öğesini 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ımlanır. Bu dosyadaki her kaynak, Shrine uygulamasının bir parçası olduğunu belirtmek için shr_ önekine sahip olmalıdır.

Başlangıç kodunu tanıdığınıza göre şimdi ilk bileşenimizi uygulayalım.

Başlamak için, kullanıcıların kullanıcı adlarını ve şifrelerini girmeleri için giriş sayfamıza iki metin alanı ekleyeceğiz. Kayar etiket ve hata mesajları gösteren yerleşik işlevsellik 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 sunacak şekilde büyük ölçüde geliştirildi. Daha iyi kullanılabilirlik ve görsel tasarım için kapsamlı kullanıcı deneyimi (UX) araştırmalarıyla desteklenen iyileştirmeler yapıldı.

Materyal Tasarım Kılavuzları'ndaki makalelerinde yeni metin alanları hakkında daha fazla bilgi edinin.

XML'yi ekleme

shr_login_fragment.xml içinde, <LinearLayout>'ün içine, "SHRINE" etiketinin <TextView> altına, TextInputEditText alt öğesini içeren iki TextInputLayout öğesi 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 Shift tuşuna iki kez dokunarak kayan bir arama çubuğu açın 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ının ipucu metni android:hint özelliğinde belirtilir.

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

strings.xml

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

Giriş doğrulama ekleme

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

Hata geri bildirimini göstermek için shr_login_fragment.xml dosyasında aşağıdaki değişiklikleri yapın:

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

Bu değişikliklerle birlikte 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örmelisiniz.

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üğmesini destekleme
• app:helperText kullanarak yerleşik yardımcı metin işlevi sunma
• app:counterEnabled ve app:counterMaxLength kullanarak toplam ve maksimum karakter sayılarını gösterme

Ardından, giriş sayfamıza "İptal" ve "Sonraki" olmak üzere iki düğme ekleyeceğiz. Simge niteliğindeki Materyal Tasarım mürekkep dalgalanma efektiyle birlikte gelen MDC Button bileşenini kullanacağız.

XML'yi ekleme

shr_login_fragment.xml içinde, TextInputLayout öğelerinin altına <LinearLayout> öğesine bir <RelativeLayout> ekleyin. Ardından, <MaterialButton> öğesinden iki tane <RelativeLayout> öğesine ekleyin.

Elde edilen XML dosyası şu şekilde 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 ve yükseltilmiş bir düğmedir. Ancak bu İptal düğmesi için yükseltilmemiş, doldurulmamış bir düğme istiyoruz. Bunu başarmak için style özelliğini uygularız: @style/Widget.MaterialComponents.Button.TextButton.

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

MDC Düğmesi özellikleri:

• 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 kontur

Son olarak, "SONRAKİ" düğmemizi başka bir parçaya geçiş yapacak şekilde bağlamak için LoginFragment.kt dosyasına biraz Kotlin kodu ekleyeceğiz.

isPasswordValid yöntemini LoginFragment.kt içinde onCreateView() altına ekleyelim. Bu yöntem, şifrenin geçerli olup olmadığını belirleyecek mantığa sahip olacak. 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, yeni oluşturduğumuz isPasswordValid() yöntemine göre hatayı ayarlayan ve temizleyen "Sonraki" düğmesine bir tıklama işleyici ekleyin. onCreateView() içinde bu tıklama işleyicisi, inflater satırı ile return view satırı arasına yerleştirilmelidir.

Şimdi de hatayı temizleyecek tuş etkinliklerini dinlemek için parola TextInputEditText alanına bir tuş dinleyicisi ekleyelim. Bu dinleyici, şifrenin geçerli olup olmadığını kontrol etmek için isPasswordValid() işlevini de kullanmalıdır. Bunu doğrudan onCreateView() içindeki tıklama dinleyicisinin altına ekleyebilirsiniz.

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

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

Artık 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ünmelidir:

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 durumuna (activity as NavigationHost).navigateTo(ProductGridFragment(), false) satırını ekledik. Bu satır, yeni bir parçaya (ProductGridFragment) gitmek için MainActivity'ten navigateTo() yöntemini çağırır. Bu sayfa şu anda boştur ve MDC-102'de bu sayfa üzerinde çalışacaksınız.

navigateTo() içindeki false parametresi, etkinliğe mevcut parçayı geri yığına eklememesi talimatını verir. Bu nedenle kullanıcı, geri tuşunu kullanarak giriş ekranına dönemez.

Şimdi uygulamayı oluşturun. İleri 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.

Android için Material Components kitaplığı, temel XML işaretlemesi ve yaklaşık 30 satır Kotlin kodu kullanarak Material Design yönergelerine uygun, tüm cihazlarda tutarlı bir şekilde görünen ve çalışan güzel bir giriş sayfası oluşturmanıza yardımcı oldu.

Tamamlanmış MDC 101 uygulamasını bitmiş codelab'i indirerek veya git ile 101-complete'i inceleyerek edinebilirsiniz: git checkout 101-complete.

Android Studio ile bu dizindeki shrine projesini açıp uygulamayı çalıştırarak sayfanızın sürümünü tamamlanmış sürümle karşılaştırarak 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: Material Design Structure and Layout (MDC 102: Materyal Tasarım Yapısı ve Düzeni) başlıklı makaleyi inceleyin. Material Components'ı denediğiniz için teşekkür ederiz. Bu codelab'den keyif aldığınızı umuyoruz.

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