كبفاش تدير form validation ب أندرويد


فهادالدرس الجديد من سلسلة أندرويد غادي نشوفو كيفاش نديرو form validation فالتطبيق بسيط فيه فورم كتمكن المستخدم من إدخال المعلومات باش يتكونيكطا منبعد كنديرو ل validation لي كتمكن من إظهار رسائل التنبيه في حالة ما كان الشي حقل خاوي أو تجاوزنا عدد الحروف المسموح به درس بسيط للمبتدئين.

نظرة سريعة بالفيديو

1- الملف activity_main.xml

فأول حاجة غادي نديرو غادي نزيدو project جديد ف android studio ختار Basic Activity سميه FormValidation من بعد ميتزاد غادي تمشي للمجلد res/layout فيه كاين ملف activity_main.xml هادا هو الملف ديال الصفحة الرئيسية ديالنا فيه الكود لي فيه كاين les EditText لي غادي ياخدو ل email ول mot de passe وعندي معاهم TextInputLayout لي كتمكن من عرض les erreurs de validation وعندي ل bouton وكل واحد عندو ل id ديالو لي بيه غادي نسترجعوه فالملف MainActivity لي غادي نشوفوه من بعد الكود ديال activity_main.xml هو :

                                <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="5dp"
    tools:context="com.example.belasri.formvalidation.MainActivity">
    <LinearLayout
        android:orientation="vertical"
        android:background="#FFFFFF"
        android:layout_width="match_parent"
        android:elevation="5dp"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/title"
            android:text="Connexion"
            android:textColor="@color/colorError"
            android:fontFamily="sans-serif"
            android:textStyle="bold"
            android:textSize="30sp"
            android:padding="10dp"
            android:textAlignment="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/colorPrimaryDark"></View>
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/text_pseudo_layout"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="32dp"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="32dp"
            >
            <android.support.v7.widget.AppCompatEditText
                android:id="@+id/pseudo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:inputType="text"
                android:hint="@string/pseudo"
                />
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/text_password_layout"
            android:layout_below="@+id/text_pseudo_layout"
            android:layout_marginTop="32dp"
            android:layout_marginLeft="32dp"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="32dp"
            app:passwordToggleEnabled="true"
            app:counterOverflowTextAppearance="@style/textErrorColor"
            >
            <android.support.v7.widget.AppCompatEditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:inputType="textPassword"
                android:hint="@string/mot_de_passe"
                />
        </android.support.design.widget.TextInputLayout>
        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn"
            android:text="Valider"
            android:textColor="#FFF"
            android:textStyle="bold"
            android:textSize="20dp"
            style="@style/buttonRaised"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>

                            

2- الملف MainActivity.java

فالمجلد java كاين الملف الرئيسي ديالنا ولي هو MainActivity.java ولي فيه الكود لي كيتحقق واش حتى شي حقل ما خاوي من بعد مكنسترجع كلشي بل id ديالو فل onClick ديال ل bouton كنتحقق واش les champs مخاوينش ويلا كانوا كنعرض رسائل التنبيه من بعد عندي addTextChangedListener لي كتمكن من التحقق واش الحقل خاوي ملي كيحيد الcurseur منو وكتعرض رسائل التنبيه منبعد عندي الكود لي كيزيد لل mot de pasee العداد لي كيحسب شحال من حرف وكنعطيه العدد لي ميفوتوش لي هو 8 ولي يلا فاتو المستخدم اللون ديال الحقل كيتغير الكود ديال الملف هو:

                                package com.example.belasri.formvalidation;

import android.os.Bundle;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatEditText;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    AppCompatEditText username,password;
    TextInputLayout usernameLayout,passwordLayout;
    Button btnValid;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        username = (AppCompatEditText) findViewById(R.id.pseudo);
        password = (AppCompatEditText) findViewById(R.id.password);
        usernameLayout = (TextInputLayout) findViewById(R.id.text_pseudo_layout);
        passwordLayout = (TextInputLayout) findViewById(R.id.text_password_layout);
        btnValid = (Button) findViewById(R.id.btn);
        btnValid.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(username.getText().toString().isEmpty()){
                    usernameLayout.setErrorEnabled(true);
                    usernameLayout.setError("Veuillez entrer votre pseudo");
                }else{
                    usernameLayout.setErrorEnabled(false);
                }
                if(password.getText().toString().isEmpty()){
                    passwordLayout.setErrorEnabled(true);
                    passwordLayout.setError("Veuillez entrer le mot de passe");
                }else{
                    passwordLayout.setErrorEnabled(false);
                }
            }
        });
        username.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if(username.getText().toString().isEmpty()){
                    usernameLayout.setErrorEnabled(true);
                    usernameLayout.setError("Veuillez entrer votre pseudo");
                }else{
                    usernameLayout.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });
        password.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if(password.getText().toString().isEmpty()){
                    passwordLayout.setErrorEnabled(true);
                    passwordLayout.setError("Veuillez entrer le mot de passe");
                }else{
                    passwordLayout.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });
        passwordLayout.setCounterEnabled(true);
        passwordLayout.setCounterMaxLength(8);
    }
}

                            

3- الملف style.xml

فالمجلد res/values كاين الملف style.xml فيه كنزيد les styles لي غادي نحتاج ولي هما ال couleur ديال ل mot de passe ملي يفوت 8 ديال les caractères وديال ل background ديال ل bouton الكود ديالو هو :

                                <resources xmlns:android="http://schemas.android.com/tools">

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="textErrorColor">
        <!-- Customize your theme here. -->
        <item name="android:textColor">@color/colorError</item>
    </style>
    <style name="buttonRaised" parent="Widget.AppCompat.Button.Colored">
        <!-- Customize your theme here. -->
        <item name="backgroundTint">@color/buttonBckgroundColor</item>
        <item name="android:textColor">@color/buttonTextColor</item>
    </style>
</resources>

                            

4- الملف colors.xml

فالمجلد res/values كاين الملف colors.xml فيه كنزيد les couleurs لي غادي نحتاج الكود ديالو هو :

                                    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorError">#b71c1c</color>
    <color name="buttonBckgroundColor">#4CAF50</color>
    <color name="buttonTextColor">#FFFFFF</color>
</resources>
                                


بحث في الموقع


إشترك للتوصل بالجديد