এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

MDC-101 Android: ম্যাটেরিয়াল কম্পোনেন্টস (MDC) বেসিকস (Kotlin)

১. ভূমিকা

ম্যাটেরিয়াল কম্পোনেন্টস (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/kotlin ডিরেক্টরির মধ্যে অবস্থিত।

...অথবা গিটহাব থেকে এটি ক্লোন করুন

গিটহাব থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলো চালান:

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'-এ ক্লিক করুন। যে ডিরেক্টরিতে আপনি স্যাম্পল কোডটি ইনস্টল করেছিলেন সেখানে যান এবং শিপিং প্রজেক্টটি খোলার জন্য 'kotlin -> shrine' নির্বাচন করুন (অথবা আপনার কম্পিউটারে 'shrine' লিখে সার্চ করুন)।
অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নিচের দিকে অ্যাক্টিভিটি ইন্ডিকেটরগুলোতে যেমনটা দেখানো হচ্ছে, প্রজেক্টটি বিল্ড ও সিঙ্ক হওয়ার জন্য কিছুক্ষণ অপেক্ষা করুন।
এই পর্যায়ে, অ্যান্ড্রয়েড স্টুডিও কিছু বিল্ড এরর দেখাতে পারে, কারণ আপনার কাছে অ্যান্ড্রয়েড এসডিকে বা বিল্ড টুলস নেই, যেমনটি নিচে দেখানো হয়েছে। এগুলো ইনস্টল/আপডেট করতে এবং আপনার প্রজেক্ট সিঙ্ক করতে অ্যান্ড্রয়েড স্টুডিওর নির্দেশাবলী অনুসরণ করুন।

KzoYWC1S7Se7yL8igi1vXF_mbVxAdl2lg5kb7RODrsVpEng0G6U3NK1Qnn0faBBZd2u71yMXioy9tD-7fv3NXvVO4N3EtMMeWDTmqBMMl6egd9R5uXX0T_SKmahbmRor3wZZHX0ByA

প্রকল্পের নির্ভরতা যোগ করুন

প্রজেক্টটির জন্য 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'
}

স্টার্টার অ্যাপটি চালান

নিশ্চিত করুন যে রান / প্লে বাটনের বাম দিকের বিল্ড কনফিগারেশনটি app হিসেবে সেট করা আছে।
অ্যাপটি বিল্ড ও রান করতে সবুজ রান / প্লে বাটনটি চাপুন।
'Select Deployment Target' উইন্ডোতে, আপনার উপলব্ধ ডিভাইসগুলোর তালিকায় যদি আগে থেকেই কোনো অ্যান্ড্রয়েড ডিভাইস তালিকাভুক্ত থাকে, তাহলে সরাসরি ধাপ ৮- এ চলে যান। অন্যথায়, 'Create New Virtual Device'-এ ক্লিক করুন।
হার্ডওয়্যার নির্বাচন স্ক্রিনে, পিক্সেল ২-এর মতো একটি ফোন ডিভাইস নির্বাচন করুন এবং তারপরে পরবর্তী (Next) ক্লিক করুন।
সিস্টেম ইমেজ স্ক্রিনে, একটি সাম্প্রতিক অ্যান্ড্রয়েড সংস্করণ নির্বাচন করুন, বিশেষত সর্বোচ্চ এপিআই লেভেলেরটি। যদি এটি ইনস্টল করা না থাকে, তবে প্রদর্শিত ডাউনলোড লিঙ্কে ক্লিক করুন এবং ডাউনলোডটি সম্পূর্ণ করুন।
পরবর্তী ধাপে যান।
অ্যান্ড্রয়েড ভার্চুয়াল ডিভাইস (AVD) স্ক্রিনে, সেটিংস অপরিবর্তিত রেখে ফিনিশ-এ ক্লিক করুন।
ডেপ্লয়মেন্ট টার্গেট ডায়ালগ থেকে একটি অ্যান্ড্রয়েড ডিভাইস নির্বাচন করুন।
Ok ক্লিক করুন।
অ্যান্ড্রয়েড স্টুডিও অ্যাপটি বিল্ড করে, ডেপ্লয় করে এবং টার্গেট ডিভাইসে স্বয়ংক্রিয়ভাবে খুলে দেয়।

সফল! Shrine-এর লগইন পেজের স্টার্টার কোডটি আপনার এমুলেটরে চালু হয়ে যাওয়ার কথা। আপনি "Shrine" নামটি এবং তার ঠিক নিচে Shrine-এর লোগোটি দেখতে পাবেন।

চলুন কোডটি দেখে নেওয়া যাক। আমাদের নমুনা কোডে আমরা ফ্র্যাগমেন্ট প্রদর্শন করতে এবং ফ্র্যাগমেন্টগুলোর মধ্যে চলাচল করার জন্য একটি সহজ 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) মেথডও ইমপ্লিমেন্ট করে, যা যেকোনো ফ্র্যাগমেন্টকে অন্য একটি ফ্র্যাগমেন্টে নেভিগেট করতে দেয়।

লেআউট ফাইলটি খোলার জন্য অ্যাক্টিভিটি ফাইলের 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.kt খোলা যাক।

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> ট্যাগ রয়েছে। এই লেবেলের টেক্সটটি হলো @string/shr_app_name নামের একটি স্ট্রিং রিসোর্স । আপনি যদি স্ট্রিং রিসোর্সের নামে Command + Click (বা Control + Click ) করেন, অথবা app -> res -> values -> strings.xml ফাইলটি খোলেন, তাহলে আপনি strings.xml ফাইলটি দেখতে পাবেন, যেখানে স্ট্রিং রিসোর্সগুলো সংজ্ঞায়িত করা আছে। ভবিষ্যতে আরও স্ট্রিং রিসোর্স যোগ করা হলে, সেগুলো এখানেই সংজ্ঞায়িত করা হবে। এই ফাইলের প্রতিটি রিসোর্সের শুরুতে shr_ প্রিফিক্স থাকা উচিত, যা নির্দেশ করে যে সেগুলো Shrine অ্যাপের অংশ।

এখন যেহেতু আপনি স্টার্টার কোডের সাথে পরিচিত হয়েছেন, চলুন আমাদের প্রথম কম্পোনেন্টটি ইমপ্লিমেন্ট করি।

৩. টেক্সট ফিল্ড যোগ করুন

শুরুতে, ব্যবহারকারীদের ইউজারনেম এবং পাসওয়ার্ড দেওয়ার জন্য আমরা আমাদের লগইন পেজে দুটি টেক্সট ফিল্ড যোগ করব। এর জন্য আমরা MDC টেক্সট ফিল্ড কম্পোনেন্টটি ব্যবহার করব, যেটিতে একটি ফ্লোটিং লেবেল এবং এরর মেসেজ দেখানোর মতো বিল্ট-ইন কার্যকারিতা রয়েছে।

আপনার ব্র্যান্ডকে সমর্থন করার জন্য আরও বেশি কাস্টমাইজেশন বিকল্প দিতে ম্যাটেরিয়াল ডিজাইন টেক্সট ফিল্ডগুলিকে ব্যাপকভাবে উন্নত করা হয়েছে। এর উন্নতিগুলো করা হয়েছে উন্নততর ব্যবহারযোগ্যতা এবং ভিজ্যুয়াল ডিজাইনের জন্য ব্যাপক ইউজার এক্সপেরিয়েন্স (UX) গবেষণার ওপর ভিত্তি করে।

তাদের ম্যাটেরিয়াল গাইডলাইনস-এর আর্টিকেলটিতে নতুন টেক্সট ফিল্ডগুলো সম্পর্কে আরও জানুন।

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" />
</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>

এবার অ্যাপটি চালানোর চেষ্টা করুন। আপনি "ইউজারনেম" এবং "পাসওয়ার্ড" এর জন্য দুটি টেক্সট ফিল্ড সহ একটি পৃষ্ঠা দেখতে পাবেন!

ভাসমান লেবেল অ্যানিমেশনটি দেখুন:

এমডিসি টেক্সট ফিল্ডের বৈশিষ্ট্যগুলোর মধ্যে রয়েছে:

অন্তর্নির্মিত ত্রুটি প্রতিক্রিয়া প্রদর্শন করা হচ্ছে
app:passwordToggleEnabled ব্যবহার করে পাসওয়ার্ড দেখার সুবিধার জন্য একটি টগল সমর্থন করা হচ্ছে
app:helperText ব্যবহার করে অন্তর্নির্মিত সহায়ক টেক্সট কার্যকারিতা প্রদান করা
app:counterEnabled এবং app:counterMaxLength ব্যবহার করে মোট এবং সর্বোচ্চ অক্ষর সংখ্যা প্রদর্শন করা হচ্ছে

৪. বাটন যোগ করুন

এরপরে, আমরা আমাদের লগইন পেজে দুটি বাটন যোগ করব: '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.kt তে কিছু কোটলিন কোড যোগ করব।

চলুন, LoginFragment.kt এর onCreateView() নিচে একটি private boolean isPasswordValid মেথড যোগ করি, যেখানে পাসওয়ার্ডটি বৈধ কিনা তা নির্ধারণ করার লজিক থাকবে। এই ডেমোর জন্য, আমরা শুধু নিশ্চিত করব যে পাসওয়ার্ডটি কমপক্ষে ৮ অক্ষরের।

LoginFragment.kt

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

এরপরে, "Next" বাটনে একটি ক্লিক লিসেনার যোগ করুন যা আমাদের তৈরি করা isPasswordValid() মেথডের উপর ভিত্তি করে এরর সেট ও ক্লিয়ার করবে। onCreateView() ফাংশনে, এই ক্লিক লিসেনারটি inflater লাইন এবং return view লাইনের মাঝে স্থাপন করতে হবে।

এখন, পাসওয়ার্ড TextInputEditText এ একটি কী লিসেনার যোগ করা যাক, যা কী ইভেন্টগুলো শুনে এররটি ক্লিয়ার করবে। এই লিসেনারটিতে পাসওয়ার্ডটি বৈধ কিনা তা পরীক্ষা করার জন্য isPasswordValid() ব্যবহার করা উচিত। আপনি এটি onCreateView() ফাংশনের ক্লিক লিসেনারের ঠিক নিচে যোগ করতে পারেন।

আপনার onCreateView() মেথডটি এখন দেখতে অনেকটা এইরকম হবে:

LoginFragment.kt

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 কোডটি এখন নিম্নরূপ হবে:

LoginFragment.kt

// 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 case-এ ( activity as NavigationHost).navigateTo(ProductGridFragment(), false ) লাইনটি যোগ করেছি। এই লাইনটি একটি নতুন ফ্র্যাগমেন্ট – ProductGridFragment এ নেভিগেট করার জন্য MainActivity থেকে navigateTo() মেথডটিকে কল করে। বর্তমানে এটি একটি খালি পেজ, যেটি নিয়ে আপনারা MDC-102-এ কাজ করবেন।

এখন অ্যাপটি তৈরি করুন। এগিয়ে যান এবং নেক্সট বাটনটি চাপুন।

তুমি পেরেছ! এই স্ক্রিনটি হবে আমাদের পরবর্তী কোডল্যাবের সূচনা বিন্দু, যেটি তুমি MDC-102-এ করবে।

৬. সব শেষ।

সাধারণ XML মার্কআপ এবং প্রায় ৩০ লাইনের কোটলিন কোড ব্যবহার করে, Material Components for Android লাইব্রেরিটি আপনাকে একটি সুন্দর লগইন পেজ তৈরি করতে সাহায্য করেছে যা Material Design-এর নির্দেশিকা মেনে চলে এবং সব ডিভাইসে এর চেহারা ও আচরণ একই রকম থাকে।

পরবর্তী পদক্ষেপ

টেক্সট ফিল্ড এবং বাটন হলো MDC অ্যান্ড্রয়েড লাইব্রেরির দুটি মূল কম্পোনেন্ট, কিন্তু আরও অনেক আছে! আপনি MDC অ্যান্ড্রয়েড-এ বাকি কম্পোনেন্টগুলো সম্পর্কে জানতে পারবেন। বিকল্পভাবে, টপ অ্যাপ বার, কার্ড ভিউ এবং গ্রিড লেআউট সম্পর্কে জানতে MDC 102: ম্যাটেরিয়াল ডিজাইন স্ট্রাকচার অ্যান্ড লেআউট কোর্সটি দেখতে পারেন। ম্যাটেরিয়াল কম্পোনেন্টস ব্যবহার করার জন্য ধন্যবাদ। আমরা আশা করি আপনি এই কোডল্যাবটি উপভোগ করেছেন!

আমি যুক্তিসঙ্গত সময় ও শ্রম দিয়ে এই কোডল্যাবটি সম্পন্ন করতে পেরেছি।

দৃঢ়ভাবে একমত

একমত

নিরপেক্ষ

দ্বিমত

তীব্রভাবে দ্বিমত পোষণ করি।

আমি ভবিষ্যতে ম্যাটেরিয়াল কম্পোনেন্টস ব্যবহার করা চালিয়ে যেতে চাই।

দৃঢ়ভাবে একমত

একমত

নিরপেক্ষ

দ্বিমত

তীব্রভাবে দ্বিমত পোষণ করি।