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

1. Giriş

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

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

Materyal Tasarım, cesur ve güzel dijital ürünler oluşturmaya yönelik bir sistemdir. Stil, markalama, etkileşim ve hareket tutarlı bir dizi ilke ve bileşen altında birleştirildiğinde ü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 oluşturmak için tasarım ve mühendisliği bir bileşen kitaplığıyla birleştirir. Materyal Tasarım sistemi geliştikçe bu bileşenler, tutarlı ve piksel açısından mükemmel bir uygulama sağlamak ve Google'ın ön uç geliştirme standartlarına uymak 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 konusunda 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 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: Materyal Tasarım Yapısı ve Düzeni
• MDC 103: Materyal Tasarım'da Renk, Şekil, Yükseklik ve Tür ile Tema Oluşturma
• MDC 104: Materyal Tasarım Gelişmiş Bileşenleri

MDC 104'ün sonunda aşağıdaki gibi 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 Materyal Tasarım Temalandırma) başlıklı makaleden öğrenebilirsiniz.

Gerekenler

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

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

Başlangıç Orta İleri

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

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

Proje bağımlılıkları ekleme

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

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

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

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

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

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

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

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

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

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

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

MainActivity.java

package com.google.codelabs.mdc.java.shrine;

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

public class MainActivity extends AppCompatActivity implements NavigationHost {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.shr_main_activity);

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

   /**
    * Navigate to the given fragment.
    *
    * @param fragment       Fragment to navigate to.
    * @param addToBackstack Whether or not the current fragment should be added to the backstack.
    */
   @Override
   public void navigateTo(Fragment fragment, boolean addToBackstack) {
       FragmentTransaction transaction =
               getSupportFragmentManager()
                       .beginTransaction()
                       .replace(R.id.container, fragment);

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

       transaction.commit();
   }
}

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

onCreate(), MainActivity.java, LoginFragment öğesini göstermek için Fragment işlemi başlatır. LoginFragment. Bu codelab'de değiştireceğimiz şey budur. Etkinlik, NavigationHost içinde tanımlanan ve herhangi bir parçanın farklı bir parçaya gitmesine olanak tanıyan bir navigateTo(Fragment) yöntemi de uygular.

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 "Text" (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. LoginFragment.java uygulamasını açalım.

LoginFragment.java

package com.google.codelabs.mdc.java.shrine;

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

/**
* Fragment representing the login screen for Shrine.
*/
public class LoginFragment extends Fragment {

   @Override
   public View onCreateView(
           @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       // Inflate the layout for this fragment
       View view = inflater.inflate(R.layout.shr_login_fragment, container, false);

       // Snippet from "Navigate to the next Fragment" section goes here.

       return view;
   }

   // "isPasswordValid" from "Navigate to the next Fragment" section method goes here
}

LoginFragment, shr_login_fragment düzen dosyasını genişletir ve onCreateView() içinde gösterir. 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" />

       <!-- Snippet from "Add text fields" section goes here. -->

       <!-- Snippet from "Add buttons" section goes here. -->

   </LinearLayout>
</ScrollView>

Burada, "Tapınak" logosunu temsil eden, üstünde <ImageView> bulunan bir <LinearLayout> görüyoruz.

Bunu, "SHRINE" etiketini temsil eden bir <TextView> etiketi izler. 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 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ımlanır. Bu dosyadaki her kaynak, Shrine uygulamasına ait 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.

3. Metin alanları ekleme

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. Ayrıca, 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ı.

Yeni metin alanları hakkında daha fazla bilgiyi Material Guidelines makalesinde bulabilirsiniz.

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"
       android:inputType="text"
       android:maxLines="1" />
</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:

• Password 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.
• Şifre 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"
       android:inputType="text"
       android:maxLines="1" />
</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 kullanılarak yerleşik yardımcı metin işlevi sunma
• app:counterEnabled ve app:counterMaxLength kullanarak toplam ve maksimum karakter sayılarını gösterme

4. Düğme ekleme

Ardından, giriş sayfamıza "İptal" ve "Sonraki" olmak üzere iki düğme ekleyeceğiz. Materyal Tasarım'ın ikonik 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

5. Sonraki fragmana gitme

Son olarak, "SONRAKİ " düğmemizi başka bir parçaya bağlamak için LoginFragment.java'ya biraz Java kodu ekleyeceğiz. Düzenimize eklediğimiz her bileşene bir id atandığını fark edeceksiniz. Kodumuzdaki bileşenlere referans vermek ve hata kontrolü ile gezinme eklemek için bu idleri kullanacağız.

isPasswordValid yöntemini LoginFragment.java içinde onCreateView() altına ekleyelim. Bu yöntem, şifrenin geçerli olup olmadığını belirleyecek mantığı içerir. Bu demo için şifrenin en az 8 karakter uzunluğunda olduğundan emin olacağız:

LoginFragment.java

/*
   In reality, this will have more complex logic including, but not limited to, actual
   authentication of the username and password.
*/
private boolean isPasswordValid(@Nullable Editable text) {
   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.

Ardından, hatayı temizleyecek önemli etkinlikleri dinlemek için parola TextInputEditText öğesine bir önemli etkinlik dinleyicisi ekleyelim. Bu dinleyici, şifrenin geçerli olup olmadığını kontrol etmek için isPasswordValid() simgesini de kullanmalıdır. Bunu doğrudan onCreateView() içindeki tıklama işleyicisinin altına ekleyebilirsiniz.

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

LoginFragment.java

@Override
public View onCreateView(
       @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   // Inflate the layout for this fragment
   View view = inflater.inflate(R.layout.shr_login_fragment, container, false);
   final TextInputLayout passwordTextInput = view.findViewById(R.id.password_text_input);
   final TextInputEditText passwordEditText = view.findViewById(R.id.password_edit_text);
   MaterialButton nextButton = view.findViewById(R.id.next_button);

   // Set an error if the password is less than 8 characters.
   nextButton.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           if (!isPasswordValid(passwordEditText.getText())) {
               passwordTextInput.setError(getString(R.string.shr_error_password));
           } else {
               passwordTextInput.setError(null); // Clear the error
           }
       }
   });

   // Clear the error once more than 8 characters are typed.
   passwordEditText.setOnKeyListener(new View.OnKeyListener() {
       @Override
       public boolean onKey(View view, int i, KeyEvent keyEvent) {
           if (isPasswordValid(passwordEditText.getText())) {
               passwordTextInput.setError(null); //Clear the error
           }
           return 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.

Şimdi başka bir parçaya gidebiliriz. Hata doğrulama başarılı olduğunda başka bir parçaya gitmek için onCreateView() içindeki OnClickListener öğesini güncelleyin. Bunu, tıklama işleyicinin ProductGridFragment durumuna gitmek için aşağıdaki satırı ekleyerek yapabilirsiniz:else

LoginFragment.java

...
((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); // Navigate to the next Fragment
...

Tıklama işleyiciniz artık aşağıdaki gibi görünmelidir:

LoginFragment.java

...
MaterialButton nextButton = view.findViewById(R.id.next_button);

// Set an error if the password is less than 8 characters.
nextButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       if (!isPasswordValid(passwordEditText.getText())) {
           passwordTextInput.setError(getString(R.string.shr_error_password));
       } else {
           passwordTextInput.setError(null); // Clear the error
           ((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); // Navigate to the next Fragment
       }
   }
});
...

Bu yeni kod satırı, yeni bir parçaya (ProductGridFragment) gitmek için MainActivity'den 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.

6. Hepsi bitti

Android için Material Components kitaplığı, temel XML işaretlemesi ve yaklaşık 30 satır Java kodu kullanarak Materyal Tasarım 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'i beğendiğinizi 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