AndroidCSS

Android material design Programming Blog

Android login form material design

It is important for any app to have a good and consistent user interface. Well-formed UI design not only attracts users it also shows professionality of your application. This tutorial depicts Android login form material design.

The android login form contains two text fields, the first field is for username and the second one is to enter a password, along with these two fields there is a sign-in button at the bottom.

Download The Code From Github

Android login form

Involves 4 main files shown below.

MainActivity.java

On SIGN IN button click, the checkLogin() function triggers. Which validate for correct username and password. The checkLogin() method call is defined in an onClick attribute of the button in the activity_main.xml file.

Proceed to next step if username and password are valid, else set error message for respective fields.

package com.guru.login;

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 java.util.regex.Matcher;
import java.util.regex.Pattern;

public class MainActivity extends AppCompatActivity {

    private EditText emailEditText;
    private EditText passEditText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Address the email and password field
        emailEditText = (EditText) findViewById(R.id.username);
        passEditText = (EditText) findViewById(R.id.password);

    }

    public void checkLogin(View arg0) {

        final String email = emailEditText.getText().toString();
        if (!isValidEmail(email)) {
            //Set error message for email field
            emailEditText.setError("Invalid Email");
        }

        final String pass = passEditText.getText().toString();
        if (!isValidPassword(pass)) {
            //Set error message for password field
            passEditText.setError("Password cannot be empty");
        }

        if(isValidEmail(email) && isValidPassword(pass))
        {
            // Validation Completed
        }

    }

    // validating email id
    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;
    }
}

activity_main.xml

The XML file for MainActivity.java.

All images required for android login form present in the path Your Android Project\app\src\main\res\mipmap-hdpi

Define XML file selector_xml_btn_yellow for background attribute of button. The below code specifies content for the XML file.

<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/back_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/button"
        android:background="@drawable/selector_xml_btn_yellow"
        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>

selector_xml_btn_yellow.xml

Create this file in Your Android Project\app\src\main\res\drawable folder.

Specifies the background color, corner radius, color of text with respect to button state.

<?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>

styles.xml

Location: Your Android Project\app\src\main\res\values\styles.xml

Specify AppTheme as Theme.AppCompat.Light.NoActionBar

<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>

Leave a Reply

Your email address will not be published.

*

About | Policy | Disclaimer

Creative Commons LicenceUp ↑