آموزش ایجاد صفحه ورود material design در اندروید (به همراه سورس کامل پروژه)

یکی از مهمترین بخش های هر نرم افزاری، رابط کاربری آن می باشد. اگر نرم افزار شما یک رابط کاربری UI خوب داشته باشد می تواند کاربران بسیاری را به خود جذب کند، همچنین نشان از حرفه ای بودن شما می دهد.

در این آموزش قصد دارید یک صفحه لاگین در اندروید را طراحی کنیم که شامل یک فیلد نام کاربری، پسوورد و یک دکمه ورود می باشد. 

 آموزش ایجاد صفحه ورود به اپلیکیشن material design در اندروید 

یک پروژه جدید در اندروید استودیو ایجاد نمایید.

فایل MainActivity پروژه را بصورت زیر تغییر دهید:

package ddbarcoder.com.ddholidays.loginul;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.EditText;
import android.widget.Toast;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class MainActivity extends AppCompatActivity {

    private EditText txt_email;
    private EditText txt_password;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        txt_email           = (EditText) findViewById(R.id.username);
        txt_password    = (EditText) findViewById(R.id.password);

    }

    public void checkLogin(View arg0) {

        final String email = txt_email.getText().toString();
        if (!isValidEmail(email)) {
            Toast.makeText(this, "Email Validate Error!", Toast.LENGTH_SHORT).show();
        }

        final String pass = txt_password.getText().toString();
        if (!isValidPassword(pass)) {
            Toast.makeText(this, "Password Error!", Toast.LENGTH_SHORT).show();
        }

        if(isValidEmail(email) && isValidPassword(pass))
        {
            Toast.makeText(this, "Now Login :)", Toast.LENGTH_SHORT).show();
        }

    }

    // validating email 
    private boolean isValidEmail(String email) {
        String EMAIL_PATTERN = "^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@"
                + "[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$";

        Pattern pattern = Pattern.compile(EMAIL_PATTERN);
        Matcher matcher = pattern.matcher(email);
        return matcher.matches();
    }

    // validating password
    private boolean isValidPassword(String pass) {
        if (pass != null && pass.length() >= 4) {
            return true;
        }
        return false;
    }
}

* دقت کنید که در خط اول نام پروژه را لازم نیست جایگزین کنید

اگر به کد بالا دقت کنید یک تابع بنام checkLogin() تعریف کردیم که یک ورودی می گیره. 

این تابع میاد ایمیل و پسوورد رو بررسی می کنه و در شرایط مختلف پیغام های متفاوتی به شما نمایش خواهد داد.

شما می توانید به راحتی این بخش را مطابق سلیقه  و نیاز خود ویرایش کنید

حال فایل activity_main.xml را باز و کد زیر را  در آن قرار دهید:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@mipmap/bg_login"
    android:padding="40dp">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:id="@+id/username"
        android:drawableLeft="@mipmap/account"
        android:hint="Username"
        android:layout_marginTop="170dp"
        android:textColor="#FFF"
        android:paddingLeft="0dp"
        android:drawablePadding="5dp"
        android:textColorHint="#999"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/password"
        android:drawableLeft="@mipmap/lock"
        android:hint="Password"
        android:layout_marginTop="10dp"
        android:textColor="#FFF"
        android:paddingLeft="0dp"
        android:drawablePadding="5dp"
        android:textColorHint="#999"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="SignIn"
        android:id="@+id/btn_login"
        android:background="@drawable/btn_login"
        android:layout_gravity="center_horizontal"
        android:onClick="checkLogin"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Forgot password?"
        android:id="@+id/textView3"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="40dp"
        android:textColor="#FFF"
        />

</LinearLayout>

در این بخش هم ما قسمت اصلی UI را ایجاد کرده ایم، که شامل دو فیلد ایمیل و نام کاربری و یک دکمه وورد می باشد.

در پوشه ی drawable  اپلیکیشن خود یک فایل بنام btn_login.xml ایجاد نمایید و کدهای زیر را در آن قرار دهید:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <corners android:radius="5dp" />
            <solid android:color="#D5AA00" />
        </shape>
    </item>
    <item >
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <corners android:radius="5dp" />
            <solid android:color="#FFCC00" />
        </shape>
    </item>
</selector>

این کدها کار ایجاد و زیبا سازی دکمه UI را انجام میدهند که شما میت وانید رنگ یا radius آن را تغییر دهید یا قابلیت های دیگری به آن اضاف نمایید

در نهایت نیز فایل styles.xml پروژه را بصورت زیر تغییر دهید:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

شما می توانید فایل نهایی پروژه به همراه تصاویر را از اینجا دانلود کنید

تصویر نهایی پروژه