১. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়ন করতে সাহায্য করে। গুগলের একদল ইঞ্জিনিয়ার এবং ইউএক্স ডিজাইনার দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI কম্পোনেন্ট রয়েছে এবং এটি অ্যান্ড্রয়েড, আইওএস, ওয়েব এবং ফ্লাটারের জন্য উপলব্ধ। material.io/develop |
অ্যান্ড্রয়েডের জন্য ম্যাটেরিয়াল ডিজাইন এবং ম্যাটেরিয়াল কম্পোনেন্ট বলতে কী বোঝায়?
ম্যাটেরিয়াল ডিজাইন হলো আকর্ষণীয় ও সুন্দর ডিজিটাল পণ্য তৈরির একটি পদ্ধতি। একগুচ্ছ সুসংহত নীতি ও উপাদানের অধীনে স্টাইল, ব্র্যান্ডিং, ইন্টারঅ্যাকশন এবং মোশনকে একত্রিত করার মাধ্যমে প্রোডাক্ট টিমগুলো তাদের ডিজাইনের সর্বোচ্চ সম্ভাবনাকে কাজে লাগাতে পারে।
অ্যান্ড্রয়েড অ্যাপ্লিকেশনের জন্য, ম্যাটেরিয়াল কম্পোনেন্টস ফর অ্যান্ড্রয়েড ( MDC Android ) আপনার অ্যাপ্লিকেশন জুড়ে সামঞ্জস্যতা তৈরির জন্য কম্পোনেন্টের একটি লাইব্রেরির মাধ্যমে ডিজাইন এবং ইঞ্জিনিয়ারিংকে একত্রিত করে। ম্যাটেরিয়াল ডিজাইন সিস্টেমের বিবর্তনের সাথে সাথে, সামঞ্জস্যপূর্ণ পিক্সেল-পারফেক্ট বাস্তবায়ন এবং গুগলের ফ্রন্ট-এন্ড ডেভেলপমেন্ট স্ট্যান্ডার্ড মেনে চলা নিশ্চিত করতে এই কম্পোনেন্টগুলো আপডেট করা হয়। MDC ওয়েব, iOS এবং Flutter-এর জন্যও উপলব্ধ।
এই কোডল্যাবে, আপনি MDC Android-এর কয়েকটি কম্পোনেন্ট ব্যবহার করে একটি লগইন পেজ তৈরি করবেন।
আপনি যা তৈরি করবেন
এই কোডল্যাবটি ৪টি কোডল্যাবের মধ্যে প্রথম, যা আপনাকে Shrine নামক একটি অ্যাপ তৈরি করতে নির্দেশনা দেবে। এটি একটি ই-কমার্স অ্যান্ড্রয়েড অ্যাপ যা পোশাক এবং গৃহস্থালির সামগ্রী বিক্রি করে। এতে দেখানো হবে কিভাবে আপনি MDC-Android ব্যবহার করে যেকোনো ব্র্যান্ড বা স্টাইল অনুযায়ী কম্পোনেন্টগুলো কাস্টমাইজ করতে পারেন।
এই কোডল্যাবে, আপনি Shrine-এর জন্য একটি লগইন পেজ তৈরি করবেন যাতে নিম্নলিখিত বিষয়গুলো থাকবে:
- দুটি টেক্সট ফিল্ড, একটি ইউজারনেম এবং অন্যটি পাসওয়ার্ড দেওয়ার জন্য।
- দুটি বাটন, একটি 'বাতিল' করার জন্য এবং অন্যটি 'পরবর্তী' করার জন্য।
- অ্যাপটির নাম (শ্রাইন)
- শ্রাইনের লোগোর একটি ছবি
এই কোডল্যাবে MDC অ্যান্ড্রয়েড কম্পোনেন্টসমূহ
- টেক্সট ফিল্ড
- বোতাম
আপনার যা যা লাগবে
- অ্যান্ড্রয়েড ডেভেলপমেন্টের প্রাথমিক জ্ঞান
- অ্যান্ড্রয়েড স্টুডিও (আপনার কাছে না থাকলে এখান থেকে ডাউনলোড করুন)
- একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
- নমুনা কোড (পরবর্তী ধাপ দেখুন)
অ্যান্ড্রয়েড অ্যাপ তৈরিতে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন।
অ্যান্ড্রয়েড স্টুডিও চালু করুন
আপনি যখন অ্যান্ড্রয়েড স্টুডিও খুলবেন, তখন "Welcome to Android Studio" শিরোনামের একটি উইন্ডো প্রদর্শিত হবে। তবে, আপনি যদি প্রথমবারের মতো অ্যান্ড্রয়েড স্টুডিও চালু করে থাকেন, তাহলে ডিফল্ট মানগুলো ব্যবহার করে অ্যান্ড্রয়েড স্টুডিও সেটআপ উইজার্ডের ধাপগুলো অনুসরণ করুন। এই ধাপে প্রয়োজনীয় ফাইলগুলো ডাউনলোড এবং ইনস্টল হতে কয়েক মিনিট সময় লাগতে পারে, তাই পরবর্তী অংশের কাজ করার সময় এটিকে ব্যাকগ্রাউন্ডে চলতে দিতে পারেন।
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-android-codelabs-101-starter/java ডিরেক্টরির মধ্যে অবস্থিত।
...অথবা গিটহাব থেকে এটি ক্লোন করুন
গিটহাব থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলো চালান:
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 লিখে সার্চ করুন)।
- অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নিচের দিকে অ্যাক্টিভিটি ইন্ডিকেটরগুলোতে যেমনটা দেখানো হচ্ছে, প্রজেক্টটি বিল্ড ও সিঙ্ক হওয়ার জন্য কিছুক্ষণ অপেক্ষা করুন।
- এই পর্যায়ে, অ্যান্ড্রয়েড স্টুডিও কিছু বিল্ড এরর দেখাতে পারে, কারণ আপনার কাছে অ্যান্ড্রয়েড এসডিকে বা বিল্ড টুলস নেই, যেমনটি নিচে দেখানো হয়েছে। এগুলো ইনস্টল/আপডেট করতে এবং আপনার প্রজেক্ট সিঙ্ক করতে অ্যান্ড্রয়েড স্টুডিওর নির্দেশাবলী অনুসরণ করুন।
প্রকল্পের নির্ভরতা যোগ করুন
প্রজেক্টটির জন্য 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'
}
স্টার্টার অ্যাপটি চালান
|
সফল! Shrine-এর লগইন পেজের স্টার্টার কোডটি আপনার এমুলেটরে চালু হয়ে যাওয়ার কথা। আপনি "Shrine" নামটি এবং তার ঠিক নিচে Shrine-এর লোগোটি দেখতে পাবেন।
চলুন কোডটি দেখে নেওয়া যাক। আমাদের নমুনা কোডে আমরা ফ্র্যাগমেন্ট প্রদর্শন করতে এবং ফ্র্যাগমেন্টগুলোর মধ্যে চলাচল করার জন্য একটি সহজ Fragment নেভিগেশন ফ্রেমওয়ার্ক দিয়েছি।
shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.java.shrine ডিরেক্টরিতে থাকা MainActivity.java খুলুন। এর মধ্যে নিম্নলিখিত বিষয়গুলো থাকা উচিত:
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) মেথডও ইমপ্লিমেন্ট করে, যা যেকোনো ফ্র্যাগমেন্টকে অন্য একটি ফ্র্যাগমেন্টে নেভিগেট করতে দেয়।
লেআউট ফাইলটি খোলার জন্য অ্যাক্টিভিটি ফাইলের shr_main_activity তে Command + Click (বা Control + Click ) করুন, অথবা 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 খুলি।
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" লেবেলের <TextView> এর নিচে, <LinearLayout> এর ভিতরে একটি 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>
এবার অ্যাপটি চালানোর চেষ্টা করুন। আপনি "ইউজারনেম" এবং "পাসওয়ার্ড" এর জন্য দুটি টেক্সট ফিল্ড সহ একটি পৃষ্ঠা দেখতে পাবেন!
ভাসমান লেবেল অ্যানিমেশনটি দেখুন:
৪. বাটন যোগ করুন
এরপরে, আমরা আমাদের লগইন পেজে দুটি বাটন যোগ করব: 'Cancel' এবং 'Next'। আমরা MDC Button কম্পোনেন্টটি ব্যবহার করব, যেটিতে ম্যাটেরিয়াল ডিজাইনের আইকনিক ইঙ্ক রিপল এফেক্টটি বিল্ট-ইন রয়েছে।
XML যোগ করুন
shr_login_fragment.xml ফাইলে, <LinearLayout> এর মধ্যে TextInputLayout এলিমেন্টগুলোর নিচে একটি <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>
ব্যাস! অ্যাপটি চালু করলে, প্রতিটি বোতামে ট্যাপ করলে একটি কালির ঢেউ দেখা যাবে।
৫. পরবর্তী খণ্ডে যান
অবশেষে, আমাদের "NEXT" বাটনটিকে অন্য একটি ফ্র্যাগমেন্টের সাথে সংযুক্ত করার জন্য আমরা LoginFragment.java তে কিছু জাভা কোড যোগ করব। আপনারা লক্ষ্য করবেন যে, আমাদের লেআউটে যোগ করা প্রতিটি কম্পোনেন্টের একটি করে id দেওয়া ছিল। আমরা আমাদের কোডে কম্পোনেন্টগুলোকে রেফারেন্স করতে এবং কিছু এরর চেকিং ও নেভিগেশন যোগ করতে এই id ব্যবহার করব।
চলুন LoginFragment.java এর onCreateView() নিচে একটি private boolean isPasswordValid মেথড যোগ করি, যেখানে পাসওয়ার্ডটি বৈধ কিনা তা নির্ধারণ করার লজিক থাকবে। এই ডেমোর জন্য, আমরা শুধু নিশ্চিত করব যে পাসওয়ার্ডটি কমপক্ষে ৮ অক্ষরের।
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;
}
এরপরে, "Next" বাটনে একটি ক্লিক লিসেনার যোগ করুন যা আমাদের তৈরি করা isPasswordValid() মেথডের উপর ভিত্তি করে এরর সেট ও ক্লিয়ার করবে। onCreateView() ফাংশনে, এই ক্লিক লিসেনারটি inflater লাইন এবং return view লাইনের মাঝে স্থাপন করতে হবে।
এরপরে, পাসওয়ার্ড TextInputEditText এ একটি কী লিসেনার যোগ করতে হবে, যা কী ইভেন্টগুলো শুনে এররটি ক্লিয়ার করবে। এই লিসেনারটিতে পাসওয়ার্ডটি বৈধ কিনা তা পরীক্ষা করার জন্য isPasswordValid() ব্যবহার করা উচিত। আপনি এটি onCreateView() ফাংশনের ক্লিক লিসেনারের ঠিক নিচে যোগ করতে পারেন।
আপনার onCreateView() মেথডটি এখন দেখতে অনেকটা এইরকম হবে:
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;
}
এখন, আমরা অন্য একটি ফ্র্যাগমেন্টে যেতে পারি। ত্রুটি যাচাইকরণ সফল হলে অন্য একটি ফ্র্যাগমেন্টে যাওয়ার জন্য onCreateView() এর OnClickListener আপডেট করুন। ক্লিক লিসেনারের else case-এ ProductGridFragment এ যাওয়ার জন্য নিম্নলিখিত লাইনটি যোগ করে আপনি এটি করতে পারেন:
LoginFragment.java
...
((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); // Navigate to the next Fragment
...
আপনার ক্লিক লিসেনারটি এখন নিম্নরূপ দেখতে হবে:
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
}
}
});
...
কোডের এই নতুন লাইনটি একটি নতুন ফ্র্যাগমেন্ট— ProductGridFragment এ নেভিগেট করার জন্য MainActivity এর navigateTo() মেথডকে কল করে। বর্তমানে এটি একটি খালি পেজ, যেটির উপর আপনি MDC-102-এ কাজ করবেন।
এখন অ্যাপটি তৈরি করুন। এগিয়ে যান এবং নেক্সট বাটনটি চাপুন।
তুমি পেরেছ! এই স্ক্রিনটি হবে আমাদের পরবর্তী কোডল্যাবের সূচনা বিন্দু, যেটি তুমি MDC-102-এ করবে।
৬. সব শেষ।
সাধারণ XML মার্কআপ এবং প্রায় ৩০ লাইনের জাভা কোড ব্যবহার করে, Material Components for Android লাইব্রেরিটি আপনাকে একটি সুন্দর লগইন পেজ তৈরি করতে সাহায্য করেছে যা Material Design-এর নির্দেশিকা মেনে চলে এবং সব ডিভাইসে এর চেহারা ও আচরণ একই রকম থাকে।
পরবর্তী পদক্ষেপ
টেক্সট ফিল্ড এবং বাটন হলো MDC অ্যান্ড্রয়েড লাইব্রেরির দুটি মূল কম্পোনেন্ট, কিন্তু আরও অনেক আছে! আপনি MDC অ্যান্ড্রয়েড-এ বাকি কম্পোনেন্টগুলো সম্পর্কে জানতে পারবেন। বিকল্পভাবে, টপ অ্যাপ বার, কার্ড ভিউ এবং গ্রিড লেআউট সম্পর্কে জানতে MDC 102: ম্যাটেরিয়াল ডিজাইন স্ট্রাকচার অ্যান্ড লেআউট কোর্সটি দেখতে পারেন। ম্যাটেরিয়াল কম্পোনেন্টস ব্যবহার করার জন্য ধন্যবাদ। আমরা আশা করি আপনি এই কোডল্যাবটি উপভোগ করেছেন!