Android TextInputLayout कैसे लागू करें

Android TextInputLayout लागू करना: पूर्ण गाइड

उदाहरण में जाने से पहले, हमें पता होना चाहिए कि Android में TextInputLayout क्या है। TextInputLayout, LinearLayout द्वारा विस्तारित है। यह एडिट टेक्स्ट के लिए एक रैपर के रूप में कार्य करता है और एडिट टेक्स्ट के लिए फ्लोटिंग हिंट एनिमेशन दिखाता है।

यह उदाहरण दर्शाता है कि Android TextInputLayout कैसे लागू करें।

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

Android Studio में एक नया प्रोजेक्ट बनाएं: File → New Project पर जाएं और नया प्रोजेक्ट बनाने के लिए सभी आवश्यक विवरण भरें।

चरण 2 - activity_main.xml लेआउट

res/layout/activity_main.xml में निम्न कोड जोड़ें:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#dde4dd"
    android:orientation="vertical">
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/layoutEmail"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/email"
            android:hint="Enter Email id"
            android:inputType="textEmailAddress"/>
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/layoutPassword"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/password"
            android:hint="Password"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>
    <Button
        android:id="@+id/click"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Click"></Button>
</LinearLayout>

उपरोक्त कोड में हमने दो TextInputEditText और एक बटन दिया है। जब आप बटन पर क्लिक करते हैं तो यह एडिट टेक्स्ट से डेटा लेगा और टोस्ट पर दिखाएगा।

चरण 3 - MainActivity.java

src/MainActivity.java में निम्न कोड जोड़ें:

package com.example.andy.myapplication;

import android.graphics.Point;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.TextureView;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    EditText email, password;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        email = findViewById(R.id.email);
        password = findViewById(R.id.password);
        Button click = findViewById(R.id.click);
        click.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!email.getText().toString().isEmpty() && !password.getText().toString().isEmpty()) {
                    Toast.makeText(MainActivity.this, "आपने ईमेल आईडी दर्ज की: " + email.getText().toString() + " पासवर्ड: " + password.getText().toString(), Toast.LENGTH_LONG).show();
                } else {
                    email.setError("कृपया ईमेल आईडी दर्ज करें");
                    password.setError("कृपया पासवर्ड दर्ज करें");
                }
            }
        });
    }
}

चरण 4 - build.gradle निर्भरताएं

build.gradle खोलें और डिज़ाइन सपोर्ट लाइब्रेरी निर्भरता जोड़ें।

apply plugin: 'com.android.application'
android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 15
        targetSdkVersion 28
        compileSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

आइए अपने एप्लिकेशन को चलाने का प्रयास करें। मान लें कि आपने अपने वास्तविक Android मोबाइल डिवाइस को कंप्यूटर से जोड़ा है। Android Studio से ऐप चलाने के लिए, अपनी प्रोजेक्ट की एक्टिविटी फ़ाइलों में से एक खोलें और टूलबार से Run आइकन पर क्लिक करें। विकल्प के रूप में अपना मोबाइल डिवाइस चुनें और फिर अपने मोबाइल डिवाइस की जांच करें जो आपकी डिफ़ॉल्ट स्क्रीन प्रदर्शित करेगा।

उपरोक्त परिणाम प्रारंभिक स्क्रीन है। अब कुछ डेटा दर्ज करें और बटन पर क्लिक करें:

अब सभी एडिटटेक्स्ट डेटा हटाएं और बटन पर क्लिक करें। यह नीचे दिखाए अनुसार परिणाम दिखाएगा: