1. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সাহায্য করে। গুগলের ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি অ্যান্ড্রয়েড, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ। |
অ্যান্ড্রয়েডের জন্য মেটেরিয়াল ডিজাইন এবং মেটেরিয়াল কম্পোনেন্টগুলি কী কী?
ম্যাটেরিয়াল ডিজাইন হলো সাহসী এবং সুন্দর ডিজিটাল পণ্য তৈরির একটি ব্যবস্থা। নীতি এবং উপাদানগুলির একটি সুসংগত সেটের অধীনে স্টাইল, ব্র্যান্ডিং, মিথস্ক্রিয়া এবং গতিকে একত্রিত করে, পণ্য দলগুলি তাদের সর্বাধিক নকশা সম্ভাবনা উপলব্ধি করতে পারে।
অ্যান্ড্রয়েড অ্যাপ্লিকেশনের জন্য, ম্যাটেরিয়াল কম্পোনেন্টস ফর অ্যান্ড্রয়েড ( MDC অ্যান্ড্রয়েড ) আপনার অ্যাপ্লিকেশন জুড়ে ধারাবাহিকতা তৈরি করার জন্য ডিজাইন এবং ইঞ্জিনিয়ারিংকে উপাদানগুলির একটি লাইব্রেরির সাথে একত্রিত করে। ম্যাটেরিয়াল ডিজাইন সিস্টেম বিকশিত হওয়ার সাথে সাথে, এই উপাদানগুলি সামঞ্জস্যপূর্ণ পিক্সেল-নিখুঁত বাস্তবায়ন এবং Google এর ফ্রন্ট-এন্ড ডেভেলপমেন্ট মানগুলির সাথে সম্মতি নিশ্চিত করার জন্য আপডেট করা হয়। MDC ওয়েব, iOS এবং Flutter এর জন্যও উপলব্ধ।
এই কোডল্যাবে, আপনি MDC অ্যান্ড্রয়েডের বেশ কয়েকটি উপাদান ব্যবহার করে একটি লগইন পৃষ্ঠা তৈরি করবেন।
তুমি কী তৈরি করবে
এই কোডল্যাবটি ৪টি কোডল্যাবের মধ্যে প্রথম যা আপনাকে Shrine নামে একটি অ্যাপ তৈরিতে সহায়তা করবে, এটি একটি ই-কমার্স অ্যান্ড্রয়েড অ্যাপ যা পোশাক এবং গৃহস্থালীর জিনিসপত্র বিক্রি করে। এটি প্রদর্শন করবে কিভাবে আপনি MDC-Android ব্যবহার করে যেকোনো ব্র্যান্ড বা স্টাইল প্রতিফলিত করার জন্য উপাদানগুলিকে কাস্টমাইজ করতে পারেন।
এই কোডল্যাবে, আপনি Shrine-এর জন্য একটি লগইন পৃষ্ঠা তৈরি করবেন যাতে থাকবে:
- দুটি টেক্সট ফিল্ড, একটি ব্যবহারকারীর নাম লেখার জন্য এবং অন্যটি পাসওয়ার্ড দেওয়ার জন্য
- দুটি বোতাম, একটি "বাতিল করুন" এর জন্য এবং একটি "পরবর্তী" এর জন্য
- অ্যাপটির নাম (শ্রাইন)
- মন্দিরের লোগোর একটি ছবি
এই কোডল্যাবে MDC অ্যান্ড্রয়েড উপাদানগুলি
- টেক্সট ফিল্ড
- বোতাম
তোমার যা লাগবে
- অ্যান্ড্রয়েড ডেভেলপমেন্টের প্রাথমিক জ্ঞান
- অ্যান্ড্রয়েড স্টুডিও (যদি আপনার কাছে ইতিমধ্যে না থাকে তবে এখান থেকে ডাউনলোড করুন)
- একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
- নমুনা কোড (পরবর্তী ধাপ দেখুন)
অ্যান্ড্রয়েড অ্যাপ তৈরিতে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন
অ্যান্ড্রয়েড স্টুডিও শুরু করুন
যখন আপনি Android Studio খুলবেন, তখন "Welcome to Android Studio" শিরোনামের একটি উইন্ডো প্রদর্শিত হবে। তবে, যদি আপনি প্রথমবার Android Studio চালু করেন, তাহলে ডিফল্ট মান সহ Android Studio Setup Wizard ধাপগুলি অনুসরণ করুন। এই ধাপে প্রয়োজনীয় ফাইলগুলি ডাউনলোড এবং ইনস্টল করতে বেশ কয়েক মিনিট সময় লাগতে পারে, তাই পরবর্তী বিভাগটি করার সময় এটি ব্যাকগ্রাউন্ডে চলতে থাকুন।
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-android-codelabs-101-starter/java ডিরেক্টরির মধ্যে অবস্থিত।
...অথবা GitHub থেকে ক্লোন করুন
GitHub থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলি চালান:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 101-starter
অ্যান্ড্রয়েড স্টুডিওতে স্টার্টার কোড লোড করুন
- সেটআপ উইজার্ডটি শেষ হয়ে গেলে এবং Welcome to Android Studio উইন্ডোটি প্রদর্শিত হলে, Open an existing Android Studio project এ ক্লিক করুন। আপনি যে ডিরেক্টরিতে নমুনা কোডটি ইনস্টল করেছিলেন সেখানে নেভিগেট করুন এবং Shrine প্রজেক্টটি খুলতে java -> shrine নির্বাচন করুন (অথবা আপনার কম্পিউটারে shrine অনুসন্ধান করুন)।
- অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নীচের দিকে কার্যকলাপ নির্দেশকগুলি যেমনটি দেখায়, অ্যান্ড্রয়েড স্টুডিওটি প্রকল্পটি তৈরি এবং সিঙ্ক করার জন্য কিছুক্ষণ অপেক্ষা করুন।
- এই মুহুর্তে, Android Studio-তে কিছু বিল্ড ত্রুটি দেখা দিতে পারে কারণ আপনার Android SDK বা বিল্ড টুলগুলি, যেমন নীচে দেখানো হয়েছে, অনুপস্থিত। এগুলি ইনস্টল/আপডেট করতে এবং আপনার প্রকল্প সিঙ্ক করতে Android Studio-তে নির্দেশাবলী অনুসরণ করুন।
প্রকল্পের নির্ভরতা যোগ করুন
প্রকল্পটির জন্য MDC অ্যান্ড্রয়েড সাপোর্ট লাইব্রেরির উপর নির্ভরতা প্রয়োজন। আপনার ডাউনলোড করা নমুনা কোডটিতে ইতিমধ্যেই এই নির্ভরতা তালিকাভুক্ত থাকা উচিত, তবে নিশ্চিত করার জন্য নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করা ভাল অভ্যাস।
-
appমডিউলেরbuild.gradleফাইলে যান এবং নিশ্চিত করুন যেdependenciesব্লকে MDC Android এর উপর নির্ভরতা রয়েছে:
api 'com.google.android.material:material:1.1.0-alpha06'
- (ঐচ্ছিক) প্রয়োজনে, নিম্নলিখিত নির্ভরতা যোগ করতে
build.gradleফাইলটি সম্পাদনা করুন এবং প্রকল্পটি সিঙ্ক করুন।
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'
}
স্টার্টার অ্যাপটি চালান
|
সফল! শ্রাইনের লগইন পৃষ্ঠার স্টার্টার কোডটি আপনার এমুলেটরে চলমান থাকা উচিত। আপনি "শ্রাইন" নামটি এবং তার ঠিক নীচে শ্রাইন লোগোটি দেখতে পাবেন।
আসুন কোডটি একবার দেখে নেওয়া যাক। আমরা আমাদের নমুনা কোডে একটি সহজ Fragment নেভিগেশন ফ্রেমওয়ার্ক প্রদান করেছি যাতে টুকরোগুলি প্রদর্শন করা যায় এবং টুকরোগুলির মধ্যে নেভিগেট করা যায়।
shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.java.shrine ডিরেক্টরিতে 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();
}
}
এই কার্যকলাপটি shr_main_activity.xml এ সংজ্ঞায়িত R.layout.shr_main_activity লেআউট ফাইলটি প্রদর্শন করে।
আপনি দেখতে পাচ্ছেন যে onCreate(), MainActivity.java LoginFragment দেখানোর জন্য একটি Fragment লেনদেন শুরু করে। LoginFragment. এই কোডল্যাবের জন্য আমরা এটিই পরিবর্তন করব। এই কার্যকলাপটি NavigationHost তে সংজ্ঞায়িত একটি navigateTo(Fragment) পদ্ধতিও প্রয়োগ করে, যা যেকোনো fragment কে একটি ভিন্ন fragment এ নেভিগেট করতে দেয়।
লেআউট ফাইলটি খুলতে অ্যাক্টিভিটি ফাইলে কমান্ড + ক্লিক (অথবা কন্ট্রোল + ক্লিক ) shr_main_activity টিপুন, অথবা app -> res -> layout -> shr_main_activity.xml এ লেআউট ফাইলে নেভিগেট করুন।
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" />
এখানে, আমরা একটি সহজ <FrameLayout> দেখতে পাচ্ছি যা কার্যকলাপে প্রদর্শিত যেকোনো টুকরোর জন্য একটি ধারক হিসেবে কাজ করে। আসুন 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 লেআউট ফাইলটিকে ফুলিয়ে onCreateView() এ প্রদর্শন করে। লগইন পৃষ্ঠাটি কেমন দেখাচ্ছে তা দেখতে shr_login_fragment.xml লেআউট ফাইলটি একবার দেখে নেওয়া যাক।
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>
এখানে, আমরা একটি <LinearLayout> দেখতে পাচ্ছি যার উপরে একটি <ImageView> আছে, যা "Shrine" লোগোটি উপস্থাপন করে।
এরপর, "SHRINE" লেবেলটি প্রতিনিধিত্ব করে একটি <TextView> ট্যাগ আছে। এই লেবেলের টেক্সট হল @string/shr_app_name নামক একটি স্ট্রিং রিসোর্স । যদি আপনি Command + Click (অথবা Control + Click ) স্ট্রিং রিসোর্স নামটি ব্যবহার করেন, অথবা app -> res -> values -> strings.xml খুলুন, তাহলে আপনি strings.xml ফাইলটি দেখতে পাবেন যেখানে স্ট্রিং রিসোর্সগুলি সংজ্ঞায়িত করা হয়েছে। ভবিষ্যতে যখন আরও স্ট্রিং রিসোর্স যুক্ত করা হবে, তখন সেগুলি এখানে সংজ্ঞায়িত করা হবে। এই ফাইলের প্রতিটি রিসোর্সের একটি shr_ প্রিফিক্স থাকা উচিত যা বোঝায় যে তারা Shrine অ্যাপের অংশ।
এখন যেহেতু আপনি স্টার্টার কোডের সাথে পরিচিত, আসুন আমাদের প্রথম উপাদানটি বাস্তবায়ন করি।
৩. টেক্সট ফিল্ড যোগ করুন
শুরু করার জন্য, আমরা আমাদের লগইন পৃষ্ঠায় দুটি টেক্সট ফিল্ড যুক্ত করব যাতে লোকেরা তাদের ব্যবহারকারীর নাম এবং পাসওয়ার্ড লিখতে পারে। আমরা MDC টেক্সট ফিল্ড উপাদানটি ব্যবহার করব, যার মধ্যে অন্তর্নির্মিত কার্যকারিতা রয়েছে যা একটি ভাসমান লেবেল এবং ত্রুটি বার্তা প্রদর্শন করে।
XML যোগ করুন
shr_login_fragment.xml এ, "SHRINE" লেবেলের নীচে <LinearLayout> <TextView> ভিতরে একটি চাইল্ড TextInputEditText সহ দুটি TextInputLayout উপাদান যোগ করুন:
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>
উপরের স্নিপেটটি দুটি টেক্সট ফিল্ড উপস্থাপন করে, প্রতিটিতে একটি <TextInputLayout> এলিমেন্ট এবং একটি <TextInputEditText> চাইল্ড রয়েছে। প্রতিটি টেক্সট ফিল্ডের জন্য ইঙ্গিত টেক্সট android:hint অ্যাট্রিবিউটে নির্দিষ্ট করা আছে।
আমরা টেক্সট ফিল্ডের জন্য দুটি নতুন স্ট্রিং রিসোর্স অন্তর্ভুক্ত করেছি - @string/shr_hint_username এবং @string/shr_hint_password । এই স্ট্রিং রিসোর্সগুলি দেখতে strings.xml খুলুন।
strings.xml সম্পর্কে
...
<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>
...
ইনপুট যাচাইকরণ যোগ করুন
TextInputLayout উপাদানগুলি অন্তর্নির্মিত ত্রুটি প্রতিক্রিয়া কার্যকারিতা প্রদান করে।
ত্রুটি প্রতিক্রিয়া দেখানোর জন্য, shr_login_fragment.xml এ নিম্নলিখিত পরিবর্তনগুলি করুন:
- Password
TextInputLayoutএলিমেন্টেapp:errorEnabledঅ্যাট্রিবিউটটিকে true এ সেট করুন। এটি টেক্সট ফিল্ডের নীচে ত্রুটি বার্তার জন্য অতিরিক্ত প্যাডিং যোগ করবে। - Password
TextInputEditTextএলিমেন্টেandroid:inputTypeঅ্যাট্রিবিউটটিকে "textPassword" এ সেট করুন। এটি পাসওয়ার্ড ক্ষেত্রের ইনপুট টেক্সট লুকাবে।
এই পরিবর্তনগুলির সাথে, shr_login_fragment.xml এর টেক্সট ফিল্ডগুলি এইরকম দেখাবে:
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>
এবার অ্যাপটি চালানোর চেষ্টা করুন। আপনি "Username" এবং "Password" এর জন্য দুটি টেক্সট ফিল্ড সহ একটি পৃষ্ঠা দেখতে পাবেন!
ভাসমান লেবেল অ্যানিমেশনটি দেখুন:
৪. বোতাম যোগ করুন
এরপর, আমরা আমাদের লগইন পৃষ্ঠায় দুটি বোতাম যুক্ত করব: "বাতিল করুন" এবং "পরবর্তী।" আমরা MDC বোতাম উপাদানটি ব্যবহার করব, যা আইকনিক মেটেরিয়াল ডিজাইন ইঙ্ক রিপল ইফেক্ট বিল্ট-ইন সহ আসে।
XML যোগ করুন
shr_login_fragment.xml এ, TextInputLayout এলিমেন্টের নিচে <LinearLayout> এ একটি <RelativeLayout> যোগ করুন। তারপর <RelativeLayout> এ দুটি <MaterialButton> এলিমেন্ট যোগ করুন।
ফলাফলস্বরূপ XML ফাইলটি দেখতে এইরকম হওয়া উচিত:
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>
ব্যস! অ্যাপটি চালানোর সময়, প্রতিটি বোতামে ট্যাপ করলে একটি কালির লহর প্রদর্শিত হবে।
৫. পরবর্তী খণ্ডে নেভিগেট করুন
অবশেষে, আমরা LoginFragment.java তে কিছু জাভা কোড যোগ করব যাতে আমাদের "NEXT" বোতামটি অন্য একটি অংশের সাথে সংযুক্ত হয়। আপনি লক্ষ্য করবেন যে আমাদের লেআউটে যোগ করা প্রতিটি উপাদানের জন্য একটি id নির্ধারিত ছিল। আমরা এই id ব্যবহার করে আমাদের কোডের উপাদানগুলি উল্লেখ করব এবং কিছু ত্রুটি পরীক্ষা এবং নেভিগেশন যোগ করব।
LoginFragment.java তে onCreateView() এর নিচে একটি প্রাইভেট বুলিয়ান isPasswordValid পদ্ধতি যোগ করা যাক, যাতে পাসওয়ার্ডটি বৈধ কিনা তা নির্ধারণের জন্য লজিক ব্যবহার করা যাবে। এই ডেমোর উদ্দেশ্যে, আমরা কেবল নিশ্চিত করব যে পাসওয়ার্ডটি কমপক্ষে 8 অক্ষর দীর্ঘ:
লগইনফ্রেগমেন্ট.জাভা
/*
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;
}
এরপর, "Next" বোতামে একটি ক্লিক লিসেনার যোগ করুন যা আমাদের তৈরি করা isPasswordValid() পদ্ধতির উপর ভিত্তি করে ত্রুটি সেট করে এবং সাফ করে। onCreateView() এ, এই ক্লিক লিসেনারটি ইনফ্লেটার লাইন এবং return view লাইনের মধ্যে স্থাপন করা উচিত।
এরপর, পাসওয়ার্ড TextInputEditText এ একটি কী লিসেনার যোগ করা যাক, যাতে ত্রুটিটি দূর করার জন্য গুরুত্বপূর্ণ ইভেন্টগুলি শোনা যায়। এই লিসেনারকে isPasswordValid() ব্যবহার করে পাসওয়ার্ডটি বৈধ কিনা তা পরীক্ষা করা উচিত। আপনি এটি onCreateView() এ ক্লিক লিসেনারের নীচে সরাসরি যোগ করতে পারেন।
আপনার onCreateView() পদ্ধতিটি এখন এরকম কিছু দেখাবে:
লগইনফ্রেগমেন্ট.জাভা
@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;
}
এখন, আমরা অন্য একটি অংশে নেভিগেট করতে পারি। ত্রুটি যাচাইকরণ সফল হলে অন্য একটি অংশে নেভিগেট করার জন্য onCreateView() এ OnClickListener আপডেট করুন। ক্লিক শ্রোতার else ক্ষেত্রে ProductGridFragment এ নেভিগেট করার জন্য আপনি নিম্নলিখিত লাইনটি যোগ করে এটি সম্পন্ন করতে পারেন:
লগইনফ্রেগমেন্ট.জাভা
...
((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); // Navigate to the next Fragment
...
আপনার ক্লিক লিসেনার এখন এইরকম দেখাবে:
লগইনফ্রেগমেন্ট.জাভা
...
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
}
}
});
...
এই নতুন কোড লাইনটি MainActivity থেকে navigateTo() পদ্ধতিকে একটি নতুন খণ্ড - ProductGridFragment - এ নেভিগেট করার জন্য কল করে। বর্তমানে এটি একটি খালি পৃষ্ঠা যা আপনি MDC-102 এ কাজ করবেন।
এবার অ্যাপটি তৈরি করুন। এগিয়ে যান এবং Next বোতাম টিপুন।
তুমি এটা করেছো! এই স্ক্রিনটি হবে আমাদের পরবর্তী কোডল্যাবের সূচনা বিন্দু, যেটিতে তুমি MDC-102 তে কাজ করবে।
৬. সব শেষ
বেসিক XML মার্কআপ এবং জাভার প্রায় ৩০ লাইন ব্যবহার করে, Android লাইব্রেরির জন্য Material Components আপনাকে একটি সুন্দর লগইন পৃষ্ঠা তৈরি করতে সাহায্য করেছে যা Material Design নির্দেশিকা মেনে চলে এবং সমস্ত ডিভাইসে ধারাবাহিকভাবে দেখায় এবং আচরণ করে।
পরবর্তী পদক্ষেপ
MDC অ্যান্ড্রয়েড লাইব্রেরিতে টেক্সট ফিল্ড এবং বোতাম দুটি মূল উপাদান, তবে আরও অনেক উপাদান রয়েছে! আপনি MDC অ্যান্ড্রয়েডের বাকি উপাদানগুলি অন্বেষণ করতে পারেন। বিকল্পভাবে, শীর্ষ অ্যাপ বার, কার্ড ভিউ এবং গ্রিড লেআউট সম্পর্কে জানতে MDC 102: ম্যাটেরিয়াল ডিজাইন স্ট্রাকচার এবং লেআউটে যান। ম্যাটেরিয়াল কম্পোনেন্টগুলি চেষ্টা করার জন্য ধন্যবাদ। আমরা আশা করি আপনি এই কোডল্যাবটি উপভোগ করেছেন!