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

1. Giriş

Materyal Bileşenleri (MDC), geliştiricilerin Materyal Tasarım'ı uygulamasına yardımcı olur. Google'da mühendislerden ve kullanıcı deneyimi tasarımcılarından oluşan bir ekip tarafından oluşturulan MDC, onlarca güzel ve işlevsel kullanıcı arayüzü bileşeni içerir. Ayrıca Android, iOS, web ve Flutter.material.io/develop'da kullanılabilir.

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 stil, marka, etkileşim ve hareketi tutarlı bir ilke ve bileşen kümesi altında bir araya getirerek en büyük tasarım potansiyellerini gerçekleştirebilir.

Android uygulamalarında 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 kalitesinde uygulama ve Google'ın kullanıcı arabirimi geliştirme standartlarına uyum sağlamak için güncellenir. MDC web, iOS ve Flutter'da da 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, giysi ve ev eşyaları satan e-ticaret Android uygulaması Shrine adlı uygulamayı geliştirme konusunda size rehberlik edecek 4 codelab'in ilkidir. Bu eğitimde, MDC-Android'i kullanarak bileşenleri her marka veya stili yansıtacak şekilde nasıl özelleştirebileceğiniz gösterilecektir.

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 için olmak üzere iki metin alanı
• Biri "İptal" için olmak üzere iki düğme diğeri "Sonraki" için
• Uygulamanın adı (Yer)
• Shrine'ın logosunun resmi

İlgili codelab'ler şu adreste bulunabilir:

• MDC 102: Materyal Tasarım Yapısı ve Düzeni
• MDC 103: Renk, Şekil, Yükseklik ve Türle 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ştirmeyle ilgili temel bilgiler
• 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 uygulamaları geliştirme konusundaki deneyim düzeyinizi nasıl değerlendirirsiniz?

Acemi Orta Yeterli

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

Starter codelab uygulamasını indirin

Başlangıç uygulamasını indirin

Başlangıç uygulaması material-components-android-codelabs-101-starter/java 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 java -> öğesini seçin. Shrine projesini açmak için shrine (veya bilgisayarınızda mabet araması yapın).
2. Android Studio'nun projeyi oluşturup senkronize etmesi için biraz bekleyin. Bunu, Android Studio penceresinin alt kısmındaki etkinlik göstergelerinde de görebilirsiniz.
3. Bu noktada Android Studio, aşağıda gösterilene benzer Android SDK'sı veya derleme araçları sizde eksik olduğundan 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 bir 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 build.gradle dosyasını düzenleyerek aşağıdaki bağımlılıkları ekleyin 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ı geliştirip çalıştırmak için yeşil Çalıştır / Oynat düğmesine basın. Select Deployment Target (Dağıtım Hedefi Seçin) penceresinde, kullanılabilir cihazlarınız arasında zaten bir Android cihazınız varsa, 8. Adım'a atlayın. 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 yeni bir Android sürümünü (tercihen en yüksek API düzeyini) 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ındaki ayarları olduğu gibi bırakın ve Finish'i (Son) 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ıramıyorsanız durdurun ve geliştirici ortamınızla ilgili sorunları giderin.

Derleme sırasında INSTALL_FAILED_INVALID_APK hatası alırsanız bir "Build" işlemi yapmayı deneyin -> "Clean Project" (Temiz Proje) inceleyebilirsiniz.

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ı göreceksiniz ve hemen altındaki Shrine logosu.

Koda bir 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.java.shrine dizininde MainActivity.java klasörünü 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, 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.java öğesinin, LoginFragment öğesini göstermek için bir Fragment işlemi başlattığını görebilirsiniz. LoginFragment. Bu codelab'de bunu değiştireceğiz. 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 uygulamasını açtığınızda XML dosyası yerine uygulama önizlemesi görürseniz "Tasarım" seçeneğinden geçiş yapın "Metin" sekmesine gidin. sekmesini tıklayın. "Text" bölümünde çalışacağız sekmesinden yararlanın.

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ürüz. LoginFragment.java konusunu 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ı şişirir ve onCreateView() içinde görüntüler. Giriş sayfasının neye benzediğini görmek için shr_login_fragment.xml düzen dosyasına bakalı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, üst tarafında "Semt"i temsil eden, <ImageView> işareti bulunan bir <LinearLayout> görüyorsunuz logosundan sonra.

Bunun ardından, "SHRINE"ı temsil eden bir <TextView> etiketi var etiket. Bu etiketin metni, @string/shr_app_name adlı bir dize kaynağıdır. Dize kaynağı adını Komut + Tıklama (veya Ctrl + Tıklama) gerçekleştirirseniz veya app -> res -> values -> strings.xml öğesini açarsanız dize kaynaklarının tanımlandığı strings.xml dosyasını görebilirsiniz. Gelecekte yeni dize kaynakları eklenirse 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 alanları ekleyin

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ı destekleyecek daha fazla özelleştirme seçeneği sağlamak için 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ırmasıyla desteklenen iyileştirmeler de yapıldı.

Materyal Yönergeleri'ndeki makalede yeni metin alanları hakkında daha fazla bilgi edinebilirsiniz.

XML ekleme

shr_login_fragment.xml ürününde, <LinearLayout> içinde, "SHRINE" öğesinin altına, TextInputEditText alt öğesi olan iki TextInputLayout öğesi ekleyin etiket <TextView>:

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 Ü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 sağlar.

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

• Password (Şifre) TextInputLayout öğesinde app:errorEnabled özelliğini doğru olarak ayarlayın. Bu işlem, metin alanının altına hata mesajı için ekstra dolgu ekler.
• android:inputType özelliğini "textPassword" olarak ayarlayın Şifre TextInputEditText öğesinde. 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"
       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ı" için iki metin alanı içeren bir sayfa göreceksiniz ve "Şifre"!

Kayan etiket animasyonuna göz atın:

MDC Metin Alanı özellikleri şunları içerir:

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

4. Düğme ekle

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

XML ekleme

shr_login_fragment.xml ürününde, <LinearLayout> için TextInputLayout öğelerinin altına 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. Bunun 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, "SONRAKİ" kodumuzu bağlamak için LoginFragment.java adresine bazı Java kodları ekleyeceğiz. düğmesini başka bir parçaya sığdırır. Düzenimize eklediğimiz her bileşene bir id atanmış olduğunu fark edeceksiniz. Bu id öğelerini kodumuzdaki bileşenlere referans vermek ve hata kontrolleri ile gezinme eklemek için kullanacağız.

Şimdi, şifrenin geçerli olup olmadığını belirleme mantığıyla onCreateView() altındaki LoginFragment.java öğesine özel bir boole isPasswordValid yöntemi ekleyelim. 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;
}

Daha sonra, "İleri"ye bir tıklama işleyici ekleyin düğmesi, az önce oluşturduğumuz isPasswordValid() yöntemine göre hatayı ayarlar ve temizler. 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 işleyici ekleyelim. Bu işleyici, şifrenin geçerli olup olmadığını kontrol etmek için isPasswordValid() öğesini de kullanmalıdır. Bunu, onCreateView() ürününde tıklama işleyicinin hemen altına ekleyebilirsiniz.

onCreateView() yönteminiz artık şuna benzer olmalıdır:

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 Simge çözümlenemiyor hatalarıyla karşılaşıyorsa eksik simgeleri içe aktarmak için Alt + Enter veya (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. Tıklama işleyicinin else durumda ProductGridFragment öğesine gitmek için aşağıdaki satırı ekleyerek bunu gerçekleştirebilirsiniz:

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 parçaya (ProductGridFragment) gitmek için MainActivity öğesinden navigateTo() yöntemini çağırır. Şu anda bu, MDC-102'de ç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 sıra uygulamayı derleyin. Devam edin ve İleri düğmesine basın.

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

6. Hepsi bitti

Android kitaplığı için Materyal Bileşenleri, temel XML işaretlemesini ve yaklaşık 30 satır kullanarak Materyal Tasarım yönergelerine uyan ve 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 dizindeki Shrine projesini açıp uygulamayı çalıştırarak sayfanın sürümünü tamamlanan 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 bileşenlerin geri kalanını 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'a (MDC 102: Materyal Tasarım Yapısı ve Düzen) gidin. Materyal Bileşenler'i denediğiniz için teşekkürler. Bu codelab'den memnun kaldığınızı umuyoruz.

Bu codelab'i makul bir zaman ve çabayla tamamlayabildim

Kesinlikle katılıyorum Katılıyorum Ne memnunum ne değilim Katılmıyorum Kesinlikle katılmıyorum

Gelecekte Materyal Bileşenleri kullanmaya devam etmek istiyorum

Kesinlikle katılıyorum Katılıyorum Ne memnunum ne değilim Katılmıyorum Kesinlikle katılmıyorum