অ্যান্ড্রয়েড অ্যাপে ম্যাটেরিয়াল ডিজাইন কম্পোনেন্টস কীভাবে ব্যবহার করবেন?

Material Components Library ইন্টিগ্রেশন এবং ব্যবহার

এই টিউটোরিয়ালটি দেখায় কীভাবে Google-এর Material Components for Android লাইব্রেরি যোগ করে মডার্ন UI কম্পোনেন্টস ব্যবহার করা যায়।

ধাপ ১: প্রজেক্ট তৈরি করুন

Android Studio-তে নতুন প্রজেক্ট।

ধাপ ২: Gradle Dependency যোগ করুন

build.gradle (Module: app) ফাইলে:

dependencies {
    // Material Components লাইব্রেরি (সর্বশেষ ভার্সন ব্যবহার করুন)
    implementation "com.google.android.material:material:1.11.0"
    
    // অন্যান্য androidx dependencies
    implementation "androidx.appcompat:appcompat:1.6.1"
    implementation "androidx.constraintlayout:constraintlayout:2.1.4"
}

নোট: `compileSdkVersion 34` বা újabb ব্যবহার করুন।

ধাপ ৩: থিম আপডেট করুন (res/values/themes.xml)

<resources xmlns:tools="https://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        
        <!-- Customize your theme here. -->
    </style>
</resources>

ধাপ ৪: লেআউটে ম্যাটেরিয়াল কম্পোনেন্টস ব্যবহার (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F95E5E"
    android:orientation="vertical"
    android:paddingTop="80dp"
    tools:context=".LoginActivity">

    <!-- Material CardView -->
    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:cardCornerRadius="16dp"
        app:cardElevation="8dp">
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="24dp">
            
            <ImageView
                android:id="@+id/loginLogo"
                android:layout_width="240dp"
                android:layout_height="222dp"
                android:layout_gravity="center"
                android:contentDescription="@string/login_logo"
                android:src="@drawable/read_my_blog" />
            
            <!-- Material TextInputLayout (ফ্লোটিং লেবেল সহ) -->
            <com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="10dp"
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox">
                
                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/emailText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/email_hint"
                    android:inputType="textEmailAddress"
                    android:textColor="#FFFF" />
                    
            </com.google.android.material.textfield.TextInputLayout>
            
            <com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="25dp"
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox">
                
                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/pwdText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/pass_hint"
                    android:inputType="textPassword"
                    android:textColor="#FFFF" />
                    
            </com.google.android.material.textfield.TextInputLayout>
            
            <!-- Material Button (Contained) -->
            <com.google.android.material.button.MaterialButton
                android:id="@+id/buttonLogin"
                android:layout_width="260dp"
                android:layout_height="60dp"
                android:layout_gravity="center"
                android:layout_marginBottom="20dp"
                android:text="@string/login_btn_txt"
                app:cornerRadius="30dp" />
            
            <!-- Material ProgressBar -->
            <com.google.android.material.progressindicator.LinearProgressIndicator
                android:id="@+id/loginProgress"
                android:layout_width="400dp"
                android:layout_height="20dp"
                android:layout_gravity="center"
                android:layout_marginBottom="30dp"
                android:visibility="invisible"
                android:indeterminate="true" />
            
            <!-- Material Button (Outlined) -->
            <com.google.android.material.button.MaterialButton
                android:id="@+id/buttonRegister"
                android:layout_width="260dp"
                android:layout_height="60dp"
                android:layout_gravity="center"
                android:text="@string/login_reg_btn_txt"
                style="@style/Widget.Material3.Button.OutlinedButton"
                app:cornerRadius="30dp" />
                
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>
</LinearLayout>

ধাপ ৫: MainActivity.java

package com.app.sample;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // লজিক এখানে যোগ করুন
    }
}

প্রধান ম্যাটেরিয়াল ৩ কম্পোনেন্টস

রঙ কাস্টমাইজেশন (res/values/colors.xml)

<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>