1. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সাহায্য করে। গুগলের ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি অ্যান্ড্রয়েড, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ। |
অ্যান্ড্রয়েডের জন্য মেটেরিয়াল ডিজাইন এবং মেটেরিয়াল কম্পোনেন্টগুলি কী কী?
ম্যাটেরিয়াল ডিজাইন হলো সাহসী এবং সুন্দর ডিজিটাল পণ্য তৈরির একটি ব্যবস্থা। নীতি এবং উপাদানগুলির একটি সুসংগত সেটের অধীনে স্টাইল, ব্র্যান্ডিং, মিথস্ক্রিয়া এবং গতিকে একত্রিত করে, পণ্য দলগুলি তাদের সর্বাধিক নকশা সম্ভাবনা উপলব্ধি করতে পারে।
অ্যান্ড্রয়েড অ্যাপ্লিকেশনের জন্য, ম্যাটেরিয়াল কম্পোনেন্টস ফর অ্যান্ড্রয়েড ( MDC অ্যান্ড্রয়েড ) আপনার অ্যাপ জুড়ে ধারাবাহিকতা তৈরির জন্য ডিজাইন এবং ইঞ্জিনিয়ারিংকে উপাদানগুলির একটি লাইব্রেরির সাথে একত্রিত করে। ম্যাটেরিয়াল ডিজাইন সিস্টেম বিকশিত হওয়ার সাথে সাথে, এই উপাদানগুলি সামঞ্জস্যপূর্ণ পিক্সেল-নিখুঁত বাস্তবায়ন এবং Google এর ফ্রন্ট-এন্ড ডেভেলপমেন্ট স্ট্যান্ডার্ডগুলির সাথে সম্মতি নিশ্চিত করার জন্য আপডেট করা হয়। MDC ওয়েব, iOS এবং Flutter এর জন্যও উপলব্ধ।
এই কোডল্যাবে, আপনি MDC অ্যান্ড্রয়েডের বেশ কয়েকটি উপাদান ব্যবহার করে একটি লগইন পৃষ্ঠা তৈরি করবেন।
তুমি কী তৈরি করবে
এই কোডল্যাবটি ৪টি কোডল্যাবের মধ্যে প্রথম যা আপনাকে Shrine নামে একটি অ্যাপ তৈরিতে সহায়তা করবে, এটি একটি ই-কমার্স অ্যান্ড্রয়েড অ্যাপ যা পোশাক এবং গৃহস্থালীর জিনিসপত্র বিক্রি করে। এটি প্রদর্শন করবে যে MDC অ্যান্ড্রয়েড ব্যবহার করে আপনি কীভাবে যেকোনো ব্র্যান্ড বা স্টাইল প্রতিফলিত করার জন্য উপাদানগুলিকে কাস্টমাইজ করতে পারেন।
এই কোডল্যাবে, আপনি Shrine-এর জন্য একটি লগইন পৃষ্ঠা তৈরি করবেন যাতে থাকবে:
- দুটি টেক্সট ফিল্ড, একটি ব্যবহারকারীর নাম লেখার জন্য এবং অন্যটি পাসওয়ার্ড দেওয়ার জন্য
- দুটি বোতাম, একটি "বাতিল করুন" এর জন্য এবং একটি "পরবর্তী" এর জন্য
- অ্যাপটির নাম (শ্রাইন)
- মন্দিরের লোগোর একটি ছবি
এই কোডল্যাবে MDC অ্যান্ড্রয়েড উপাদানগুলি
- টেক্সট ফিল্ড
- বোতাম
তোমার যা লাগবে
- অ্যান্ড্রয়েড ডেভেলপমেন্টের প্রাথমিক জ্ঞান
- অ্যান্ড্রয়েড স্টুডিও (যদি আপনার কাছে ইতিমধ্যে না থাকে তবে এখান থেকে ডাউনলোড করুন)
- একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
- নমুনা কোড (পরবর্তী ধাপ দেখুন)
অ্যান্ড্রয়েড অ্যাপ তৈরিতে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন
অ্যান্ড্রয়েড স্টুডিও শুরু করুন
যখন আপনি Android Studio খুলবেন, তখন "Welcome to Android Studio" শিরোনামের একটি উইন্ডো প্রদর্শিত হবে। তবে, যদি আপনি প্রথমবার Android Studio চালু করেন, তাহলে ডিফল্ট মান সহ Android Studio Setup Wizard ধাপগুলি অনুসরণ করুন। এই ধাপে প্রয়োজনীয় ফাইলগুলি ডাউনলোড এবং ইনস্টল করতে বেশ কয়েক মিনিট সময় লাগতে পারে, তাই পরবর্তী বিভাগটি করার সময় এটি ব্যাকগ্রাউন্ডে চলতে থাকুন।
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-android-codelabs-101-starter/kotlin ডিরেক্টরির মধ্যে অবস্থিত।
...অথবা GitHub থেকে ক্লোন করুন
GitHub থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলি চালান:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 101-starter
অ্যান্ড্রয়েড স্টুডিওতে স্টার্টার কোড লোড করুন
- সেটআপ উইজার্ডটি শেষ হয়ে গেলে এবং "ওয়েলকাম টু অ্যান্ড্রয়েড স্টুডিও" উইন্ডোটি প্রদর্শিত হলে, "একটি বিদ্যমান অ্যান্ড্রয়েড স্টুডিও প্রকল্প খুলুন" এ ক্লিক করুন। আপনি যে ডিরেক্টরিতে নমুনা কোডটি ইনস্টল করেছিলেন সেখানে নেভিগেট করুন এবং শিপিং প্রকল্পটি খুলতে "কোটলিন -> 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.kotlin.shrine ডিরেক্টরিতে MainActivity.kt খুলুন। এতে এটি থাকা উচিত:
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()
}
}
এই কার্যকলাপটি shr_main_activity.xml এ সংজ্ঞায়িত R.layout.shr_main_activity লেআউট ফাইলটি প্রদর্শন করে।
আপনি দেখতে পাচ্ছেন যে onCreate(), MainActivity.kt 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.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 লেআউট ফাইলটিকে স্ফীত করে এবং 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" />
</LinearLayout>
</ScrollView>
এখানে, আমরা একটি <LinearLayout> দেখতে পাচ্ছি যার উপরে একটি <ImageView> আছে, যা Shrine লোগোর প্রতিনিধিত্ব করে।
এরপর, লোগোর নিচে একটি <TextView> ট্যাগ আছে যা Shrine লেবেলকে প্রতিনিধিত্ব করে। এই লেবেলের টেক্সট হল @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" />
</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" />
</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.kt এ কিছু Kotlin কোড যোগ করব যাতে আমাদের "NEXT" বোতামটি অন্য একটি অংশে স্থানান্তরিত করা যায়।
LoginFragment.kt এ onCreateView() এর নিচে একটি প্রাইভেট বুলিয়ান isPasswordValid পদ্ধতি যোগ করা যাক, যাতে পাসওয়ার্ডটি বৈধ কিনা তা নির্ধারণের জন্য লজিক ব্যবহার করা যাবে। এই ডেমোর উদ্দেশ্যে, আমরা নিশ্চিত করব যে পাসওয়ার্ডটি কমপক্ষে 8 অক্ষর দীর্ঘ:
লগইনফ্রেগমেন্ট.কেটি
private fun isPasswordValid(text: Editable?): Boolean {
return text != null && text.length >= 8
}
এরপর, "Next" বোতামে একটি ক্লিক লিসেনার যোগ করুন যা আমাদের তৈরি করা isPasswordValid() পদ্ধতির উপর ভিত্তি করে ত্রুটি সেট করে এবং সাফ করে। onCreateView() এ, এই ক্লিক লিসেনারটি ইনফ্লেটার লাইন এবং return view লাইনের মধ্যে স্থাপন করা উচিত।
এবার আসুন পাসওয়ার্ডের সাথে একটি কী লিসেনার যোগ করি TextInputEditText দূর করার জন্য গুরুত্বপূর্ণ ইভেন্টগুলি শোনার জন্য। এই লিসেনারকে isPasswordValid() ব্যবহার করে পাসওয়ার্ডটি বৈধ কিনা তা পরীক্ষা করতে হবে। আপনি এটি onCreateView() এ ক্লিক লিসেনারের নীচে সরাসরি যোগ করতে পারেন।
আপনার onCreateView() পদ্ধতিটি এখন এরকম কিছু দেখাবে:
লগইনফ্রেগমেন্ট.কেটি
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
}
}
এখন, আমরা অন্য একটি অংশে নেভিগেট করতে পারি। onCreateView() এ, ত্রুটি যাচাইকরণ সফল হলে অন্য একটি অংশে নেভিগেট করার জন্য OnClickListener আপডেট করুন। আপনার clickListener কোডটি এখন নিম্নরূপ দেখাবে:
লগইনফ্রেগমেন্ট.কেটি
// 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)
}
})
আমরা ক্লিক লিসেনারের else ক্ষেত্রে ( activity as NavigationHost).navigateTo(ProductGridFragment(), false ) লাইনটি যুক্ত করেছি। এই লাইনটি MainActivity থেকে navigateTo() পদ্ধতিটিকে একটি নতুন খণ্ডে নেভিগেট করার জন্য কল করে - ProductGridFragment । বর্তমানে এটি একটি খালি পৃষ্ঠা যা আপনি MDC-102 তে কাজ করবেন।
এবার অ্যাপটি তৈরি করুন। এগিয়ে যান এবং Next বোতাম টিপুন।
তুমি এটা করেছো! এই স্ক্রিনটি হবে আমাদের পরবর্তী কোডল্যাবের সূচনা বিন্দু, যেটিতে তুমি MDC-102 তে কাজ করবে।
৬. সব শেষ
বেসিক XML মার্কআপ এবং Kotlin-এর প্রায় ৩০ লাইন ব্যবহার করে, Android লাইব্রেরির জন্য Material Components আপনাকে একটি সুন্দর লগইন পৃষ্ঠা তৈরি করতে সাহায্য করেছে যা Material Design নির্দেশিকা মেনে চলে এবং সমস্ত ডিভাইসে ধারাবাহিকভাবে দেখায় এবং আচরণ করে।
পরবর্তী পদক্ষেপ
MDC অ্যান্ড্রয়েড লাইব্রেরিতে টেক্সট ফিল্ড এবং বোতাম দুটি মূল উপাদান, তবে আরও অনেক উপাদান রয়েছে! আপনি MDC অ্যান্ড্রয়েডের বাকি উপাদানগুলি অন্বেষণ করতে পারেন। বিকল্পভাবে, শীর্ষ অ্যাপ বার, কার্ড ভিউ এবং গ্রিড লেআউট সম্পর্কে জানতে MDC 102: ম্যাটেরিয়াল ডিজাইন স্ট্রাকচার এবং লেআউটে যান। ম্যাটেরিয়াল কম্পোনেন্টগুলি চেষ্টা করার জন্য ধন্যবাদ। আমরা আশা করি আপনি এই কোডল্যাবটি উপভোগ করেছেন!