Android ऐप में मटेरियल डिज़ाइन कंपोनेंट्स का उपयोग कैसे करें?

Android में मटेरियल डिज़ाइन कंपोनेंट्स इम्प्लीमेंट करना

यह ट्यूटोरियल दिखाता है कि कैसे Google के मटेरियल डिज़ाइन लाइब्रेरी का उपयोग करके आधुनिक, सुंदर UI बनाया जाता है - जिसमें टेक्स्ट फील्ड्स, बटन्स, प्रोग्रेस इंडिकेटर्स शामिल हैं।

चरण 1: प्रोजेक्ट बनाएं

Android Studio में नया प्रोजेक्ट बनाएं।

चरण 2: निर्भरता जोड़ें

build.gradle (Module: app) में मटेरियल लाइब्रेरी जोड़ें:

dependencies {
    implementation "com.google.android.material:material:1.11.0"
    // नवीनतम वर्जन के लिए: https://github.com/material-components/material-components-android/releases
}

चरण 3: थीम अपडेट करें

res/values/themes.xml में MaterialComponents थीम उपयोग करें:

<resources>
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
    </style>
</resources>

चरण 4: लॉगिन स्क्रीन लेआउट

res/layout/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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="24dp"
    android:gravity="center">

    <!-- मटेरियल लोगो/इमेज -->
    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginBottom="32dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_logo" />

    <!-- मटेरियल टेक्स्ट फील्ड (आउटलाइन्ड बॉक्स) -->
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/emailText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="ईमेल"
            android:inputType="textEmailAddress" />
    </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="16dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/pwdText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="पासवर्ड"
            android:inputType="textPassword" />
    </com.google.android.material.textfield.TextInputLayout>

    <!-- मटेरियल बटन (कंटेन्ड) -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="लॉगिन"
        app:cornerRadius="8dp" />

    <!-- प्रोग्रेस इंडिकेटर -->
    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:id="@+id/loginProgress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:visibility="gone"
        android:indeterminate="true" />

    <!-- मटेरियल आउटलाइन्ड बटन -->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonRegister"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="रजिस्टर"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:cornerRadius="8dp" />
</LinearLayout>

चरण 5: MainActivity कोड

src/MainActivity.java:

package com.app.sample;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import com.google.android.material.button.MaterialButton;
import com.google.android.material.progressindicator.LinearProgressIndicator;
import com.google.android.material.textfield.TextInputEditText;

public class MainActivity extends AppCompatActivity {
    TextInputEditText emailText, pwdText;
    MaterialButton buttonLogin, buttonRegister;
    LinearProgressIndicator loginProgress;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        emailText = findViewById(R.id.emailText);
        pwdText = findViewById(R.id.pwdText);
        buttonLogin = findViewById(R.id.buttonLogin);
        buttonRegister = findViewById(R.id.buttonRegister);
        loginProgress = findViewById(R.id.loginProgress);
        
        buttonLogin.setOnClickListener(v -> attemptLogin());
        buttonRegister.setOnClickListener(v -> navigateToRegister());
    }

    private void attemptLogin() {
        String email = emailText.getText().toString().trim();
        String password = pwdText.getText().toString().trim();
        
        if (email.isEmpty() || password.isEmpty()) {
            // मटेरियल टेक्स्ट फील्ड एरर दिखाएं
            if (email.isEmpty()) emailText.setError("ईमेल आवश्यक है");
            if (password.isEmpty()) pwdText.setError("पासवर्ड आवश्यक है");
            return;
        }
        
        // लोडिंग दिखाएं
        buttonLogin.setEnabled(false);
        loginProgress.setVisibility(View.VISIBLE);
        
        // सिमुलेटेड नेटवर्क कॉल
        new android.os.Handler().postDelayed(() -> {
            loginProgress.setVisibility(View.GONE);
            buttonLogin.setEnabled(true);
            // सफलता पर नेविगेट करें
        }, 2000);
    }

    private void navigateToRegister() {
        // रजिस्ट्रेशन स्क्रीन पर जाएं
    }
}

मुख्य मटेरियल कंपोनेंट्स

चरण 6: मैनिफेस्ट

थीम को एप्लिकेशन/एक्टिविटी पर लागू करें:

<application
    android:theme="@style/Theme.MyApp">
    <activity android:name=".MainActivity">...</activity>
</application>

बेस्ट प्रैक्टिसेज

• हमेशा MaterialComponents थीम पैरेंट उपयोग करें
• रंग पैलेट को colors.xml में परिभाषित करें
• शेप अपीयरेंस (कोने, कट) कस्टमाइज़ करें
• डार्क मोड सपोर्ट के लिए DayNight थीम उपयोग करें
• एक्सेसिबिलिटी: contentDescription, लेबल्स, टच टारगेट साइज (48dp) सुनिश्चित करें