Application

Android Material Login And Registration Screen Design

3 Comments

If you are creating an application then in most cases you need to create a login and register screen. So in this post, I will demonstrate how to create a  material login and register screen. Android has a very big set of customization which helps make complex designs come true with few lines of adjustments.

You can download source code or application from links below

SOURCE CODE
APK

Below is the final output of this post  is as shown in the video below

Android Material Login And Registration Screen Design | loopwiki.com


1. The first step is to prepare assets needed for our project to create a new file in drawable=>logo.xml and paste code in it

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="57dp"
    android:viewportHeight="226.0"
    android:viewportWidth="790.0">
    <path
        android:fillColor="#ff0000"
        android:pathData="M393,226H27c-14.9,0 -27,-12.1 -27,-27V27C0,12.1 12.1,0 27,0h366c14.9,0 27,12.1 27,27v172C420,213.9 407.9,226 393,226z" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M25.3,21h18.4v148.4H25.3V21z" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M166.1,118c0,37.4 -25.9,53.7 -50.4,53.7c-27.4,0 -48.5,-20.1 -48.5,-52c0,-33.9 22.2,-53.7 50.2,-53.7C146.5,65.9 166.1,87 166.1,118zM85.9,119c0,22.2 12.7,38.9 30.7,38.9c17.6,0 30.7,-16.5 30.7,-39.3c0,-17.1 -8.6,-38.9 -30.3,-38.9C95.3,79.7 85.9,99.8 85.9,119z" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M280.9,118c0,37.4 -25.9,53.7 -50.4,53.7c-27.4,0 -48.5,-20.1 -48.5,-52c0,-33.9 22.2,-53.7 50.2,-53.7C261.2,65.9 280.9,87 280.9,118zM200.6,119c0,22.2 12.7,38.9 30.7,38.9c17.6,0 30.7,-16.5 30.7,-39.3c0,-17.1 -8.6,-38.9 -30.3,-38.9C210,79.7 200.6,99.8 200.6,119z" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M304.1,101.3c0,-13 -0.4,-23.4 -0.8,-33h16.5l0.8,17.3h0.4c7.5,-12.3 19.4,-19.6 35.9,-19.6c24.5,0 42.8,20.7 42.8,51.4c0,36.4 -22.2,54.3 -46,54.3c-13.4,0 -25.1,-5.9 -31.1,-15.9h-0.4v55h-18.2V101.3zM322.2,128.2c0,2.7 0.4,5.2 0.8,7.5c3.3,12.7 14.4,21.5 27.6,21.5c19.4,0 30.7,-15.9 30.7,-39.1c0,-20.3 -10.7,-37.6 -30.1,-37.6c-12.5,0 -24.2,9 -27.8,22.8c-0.6,2.3 -1.3,5 -1.3,7.5V128.2z" />
    <path
        android:fillColor="#ff0000"
        android:pathData="M450,68.2l13.4,51.4c2.9,11.3 5.6,21.7 7.5,32.2h0.6c2.3,-10.2 5.6,-21.1 9,-32L497,68.2h15.5l15.7,50.6c3.8,12.1 6.7,22.8 9,33h0.6c1.7,-10.2 4.4,-20.9 7.7,-32.8l14.4,-50.8h18.2l-32.6,101.2h-16.7l-15.5,-48.3c-3.6,-11.3 -6.5,-21.3 -9,-33.2h-0.4c-2.5,12.1 -5.6,22.6 -9.2,33.4l-16.3,48.1h-16.7L431.2,68.2H450z" />
    <path
        android:fillColor="#ff0000"
        android:pathData="M617,39.8c0.2,6.3 -4.4,11.3 -11.7,11.3c-6.5,0 -11.1,-5 -11.1,-11.3c0,-6.5 4.8,-11.5 11.5,-11.5C612.6,28.3 617,33.3 617,39.8zM596.5,169.4V68.2h18.4v101.2H596.5z" />
    <path
        android:fillColor="#ff0000"
        android:pathData="M663.6,114.6h0.4c2.5,-3.6 6.1,-7.9 9,-11.5l29.7,-34.9h22.2l-39.1,41.6l44.5,59.6h-22.4L673,120.9l-9.4,10.4v38h-18.2V21h18.2V114.6z" />
    <path
        android:fillColor="#ff0000"
        android:pathData="M767.5,39.8c0.2,6.3 -4.4,11.3 -11.7,11.3c-6.5,0 -11.1,-5 -11.1,-11.3c0,-6.5 4.8,-11.5 11.5,-11.5C763.1,28.3 767.5,33.3 767.5,39.8zM747,169.4V68.2h18.4v101.2H747z" />
</vector>

Download this sample image and paste it inside drawable=>sample.jpg we will be using this image for our screen background. Now create new drawable file drawable=>bg.xml this will be the actual background of our screens. Paste code in it.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/item_img">
        <bitmap android:src="@drawable/sample" />
    </item>
    <item android:id="@+id/background">
        <shape android:shape="rectangle">
            <solid android:color="#c8795548" />
        </shape>
    </item>
</layer-list>

Now create new drawable file drawable=>button_bg.xml  this file will be the custom background for our login and register buttons. Paste code in it.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent" />
    <corners android:radius="20dp" />
</shape>

2. Assets are ready Now we will create first activity LoginActivity. Create new class Package Name=>LoginActivity.java. Paste below code in it

package com.loopwiki.loginregisterscreendesign;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.text.Spanned;
import android.view.View;
import android.widget.TextView;

/**
 * Created by amardeep on 10/24/2017.
 */

public class LoginActivity extends AppCompatActivity {

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

        TextView textViewCreateAccount = (TextView) findViewById(R.id.textViewCreateAccount);
        textViewCreateAccount.setText(fromHtml("<font color='#ffffff'>I don't have account yet. </font><font color='#00b8d4'>create one</font>"));
        textViewCreateAccount.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(LoginActivity.this, RegisterActivity.class);
                startActivity(intent);
            }
        });
    }

    @SuppressWarnings("deprecation")
    public static Spanned fromHtml(String html) {
        Spanned result;
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
            result = Html.fromHtml(html, Html.FROM_HTML_MODE_LEGACY);
        } else {
            result = Html.fromHtml(html);
        }
        return result;
    }
}

create new layout file layout=>activity_login.xml. Paste below code in it

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/bg"
    android:fitsSystemWindows="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="16dp"
            android:src="@drawable/logo" />

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/editTextEmail"
                android:inputType="textEmailAddress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/email" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            app:passwordToggleTint="@color/colorAccent"
            app:passwordToggleEnabled="true">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/editTextPassword"
                android:layout_width="match_parent"
                android:inputType="textPassword"
                android:layout_height="wrap_content"
                android:hint="@string/password" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/buttonLogin"
            style="@style/DefaultButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="16dp"
            android:text="@string/login" />

        <TextView
            android:id="@+id/textViewCreateAccount"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:gravity="center_horizontal" />
    </LinearLayout>
</ScrollView>
material design login screen example one

3.Now we will  RegisterActivity. Create new class Package Name=>RegisterActivity.java. Paste below code in it

package com.loopwiki.loginregisterscreendesign;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

/**
 * Created by amardeep on 10/24/2017.
 */

public class RegisterActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);
        TextView textViewLogin = (TextView) findViewById(R.id.textViewLogin);
        textViewLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });
        Button buttonRegister = (Button) findViewById(R.id.buttonRegister);
        buttonRegister.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });
    }
}

create new layout file layout=>activity_register.xml. Paste below code in it

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/bg"
    android:fitsSystemWindows="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="16dp"
            android:src="@drawable/logo" />

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/editTextUserName"
                android:inputType="textPersonName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/username" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/editTextEmail"
                android:inputType="textEmailAddress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/email" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/colorAccent"
            android:layout_marginTop="8dp">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/editTextPassword"
                android:layout_width="match_parent"
                android:inputType="textPassword"
                android:layout_height="wrap_content"
                android:hint="@string/password" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/buttonRegister"
            style="@style/DefaultButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="16dp"
            android:layout_weight="1"
            android:text="@string/register" />

        <TextView
            android:id="@+id/textViewLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="16dp"
            android:text="@string/back_to_login"
            android:textColor="@android:color/white" />
    </LinearLayout>
</ScrollView>
material design login screen example two

4.Inside manifest.xml paste below lines

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.loopwiki.loginregisterscreendesign">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".LoginActivity"
            android:theme="@style/AppTheme.Transparent">
            <intent-filter>
                <category android:name="android.intent.category.LAUNCHER" />
                <action android:name="android.intent.action.MAIN" />
            </intent-filter>
        </activity>
        <activity
            android:name=".RegisterActivity"
            android:theme="@style/AppTheme.Transparent" />
    </application>

</manifest>

5.Inside values=>colors.xml paste below lines

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#795548</color>
    <color name="colorPrimaryDark">#5d4037</color>
    <color name="colorAccent">#00b8d4</color>
</resources>

6.Inside values=>styles.xml paste below lines

<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>
        <item name="windowActionBarOverlay">true</item>
    </style>

    <style name="AppTheme.Transparent" parent="AppTheme">
        <item name="windowActionBarOverlay">true</item>
    </style>

    <style name="DefaultButton" parent="@android:style/Widget.Button">
        <item name="android:minHeight">40dp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">14sp</item>
        <item name="android:background">@drawable/button_bg</item>
        <item name="android:padding">5dp</item>
        <item name="android:minWidth">200dp</item>
    </style>

</resources>

7.Inside values=>styles.xml(v21) (Note: if you don’t know how to create version specific file refer this article ) paste below lines

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme.Transparent" parent="AppTheme">
        <item name="windowActionBarOverlay">true</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

8.Inside values=>strings.xml

<resources>
    <string name="app_name">LoginRegisterScreenDesign</string>
    <string name="create_account"><font color="#00ff00">text</font></string>
    <string name="email">Email</string>
    <string name="password">Password</string>
    <string name="login">Login</string>
    <string name="username">Username</string>
    <string name="register">Register</string>
    <string name="back_to_login">Back to Login</string>
</resources>


Now run your application and see two two beautiful screens we just made.

Author

Hello there, My name is Amardeep founder of loopwiki.com. I have experience in many technologies like Android, Java, Php, etc. In this variety of technologies, I love Android App Development. If you have any idea and you want me to develop for you then let's have chat Conatct

Related Posts

3 Comments

  2. tam Reply

    At the RegisterActivity. Create new class Package Name=>RegisterActivity.java

    I copy and paste the code but there is an error message on the following

    R.layout.activity_register
    R.id.textViewLogin
    R.id.buttonRegister

    cannot resolve symbol R

    please advise

    • Amardeep Yadav Post Author Reply

      You should remove that import line and then you can import you resource reference by pressing alt + enter on any of your R ref.

Write A Comment