Get Started With Best Login And Registration Form Design

Posted on .
featured_logo

Hey Folks ! How are you all, Today I am going to show you how to develop an Login and Registration Form with cool design and coding . Get started with designing part and let me tell you one thing this registration form will be used in our upcoming tutorial series so keep visiting our next articles.Now lets start with coding –

Before starting I want to share something with you that colour coding should be good so that your application should look cool and understandable. You can use my colour code library for that , here is one look for that –

color_androidarena

android arena_colors

Step 1  – Create new project and give whatever name you want and see I have used two gradient xml in drwable folder for designing –

Note – Icons is in downloaded code drawable-hdpi folder.

Download code

This file namely greybackound.xml is basically a gradient file for designing ,It is situated in drawable folder.

Right click on res –> New folder –> drawable and paste the following codes.

greybackground.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape >
            <gradient
                android:startColor="#e8e8e7"
                android:centerColor="#e8e8e7"
                android:endColor="#e8e8e7"
                android:angle="270" />
          
            <corners
                android:radius="20dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

btn.xml is for button gradient like corner is circled.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

<gradient
android:angle="315"
android:centerX="35%"
android:centerColor="#2683c2"
android:startColor="#2683c2"
android:endColor="#2683c2"
android:type="linear"
/>
<corners android:radius="1000dp"/>



</shape>

 Login.xml file for login form design , paste this below code in your project –

<!-- copyrighted content owned by Android Arena (www.androidarena.co.in)-->
     <ScrollView
           xmlns:android="http://schemas.android.com/apk/res/android"
   			 xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/scrollView1"
            android:layout_width="fill_parent"
            android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="#e8e8e7"
        android:orientation="vertical" >
        
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="48dp"
            android:background="#13b586"
            android:orientation="horizontal"
            android:layout_alignParentTop="true">
            
            <ImageView android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/app_icon"
            android:layout_marginLeft="10dp"/>
        
        
        	<TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Login"
            android:textColor="#ffffff"
        	android:layout_marginLeft="25dp"
        	android:textSize="18sp"
        	android:textStyle="bold"
        	
        	android:layout_gravity="center_horizontal|center_vertical"/>
        	
        	
        	
        	<LinearLayout  
        	     android:layout_width="fill_parent"
            android:layout_height="48dp"
            android:gravity="right"
            android:orientation="horizontal" >
            
           <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tick"
     
           />
        
        </LinearLayout>
    </LinearLayout>
    
        
        <LinearLayout android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="30dp"
            android:orientation="vertical"
            android:gravity="center_horizontal"
            android:background="@drawable/greybackground"
            >
        	
            <ImageView android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/cup"
                android:layout_marginTop="15dp"
                android:layout_gravity="center_horizontal"/>
            
             <EditText android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:hint="Username"
                android:background="#f3f3f3"
                android:textColor="#f3f3f3"
                android:paddingLeft="5dp"
                android:layout_marginTop="30dp"/>
             
             <EditText android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:hint="password"
                android:background="#f3f3f3"
                android:paddingLeft="5dp"
                android:layout_marginTop="15dp"/>
             
             
             <LinearLayout 
       android:layout_marginTop="10dp"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
     android:gravity="center_horizontal"
      >
      
      <TextView 
          android:id="@+id/reg"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="16dp"
          android:textColor="#000000"
          android:text="Register Here"
          android:textStyle="bold"
          />
      <TextView 
         android:layout_marginLeft="5dp"
         android:layout_marginRight="5dp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="14dp"
          android:textColor="#000000"
          android:text="|"
          android:textStyle="bold"
          />
      <TextView 
         android:id="@+id/forgot_password"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
            android:textSize="16dp"
          android:textColor="#000000"
          android:text="Forgot Password?"
          android:textStyle="bold"
       
         />
      
  </LinearLayout>
             <Button android:layout_width="190dp"
                 android:layout_height="38dp"
                 android:layout_gravity="center_horizontal"
                 android:layout_marginTop="16dp"
                 android:text="submit"
                 android:textColor="#fff"
                 android:textSize="13dp"
                 android:background="#13b586"/>
             
             
             
               <Button android:layout_width="190dp"
                 android:layout_height="38dp"
                 android:layout_gravity="center_horizontal"
                 android:layout_marginTop="16dp"
                 android:text="Login with facebook"
                 android:textColor="#fff"
                 android:textSize="13dp"
                 android:background="#2683c2"/>
             
             <Button android:layout_width="190dp"
                 android:layout_height="38dp"
                 android:layout_gravity="center_horizontal"
                 android:layout_marginTop="16dp"
                 android:text="Login with google+"
                 android:textColor="#fff"
                 android:textSize="13dp"
                 android:background="#eb543b"/>
             
            
        </LinearLayout>
        
      
    
</LinearLayout>
        
    

    </ScrollView>
login

login_output

 

Now activity_main.xml which is your Registration xml file paste the below code here –

activity_main.xml

<!-- copyrighted content owned by Android Arena (www.androidarena.co.in)-->
     <ScrollView
           xmlns:android="http://schemas.android.com/apk/res/android"
   			 xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/scrollView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
    <LinearLayout
      
         android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#faa519"
        android:orientation="vertical"
        >

       

       
        
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="48dp"
            android:background="#e8e8e7"
            android:orientation="horizontal"
            android:layout_alignParentTop="true">
            
            <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/linkedin"
            android:layout_marginLeft="10dp"/>
        
        
        	<TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sign up"
            android:textColor="#2582C5"
        	android:layout_marginLeft="25dp"
        	android:textSize="18sp"
        	android:textStyle="bold"
        	
        	android:layout_gravity="center_horizontal|center_vertical"/>
        	
        	
        	
        	<LinearLayout  
        	     android:layout_width="fill_parent"
            android:layout_height="48dp"
            android:gravity="right"
            android:orientation="horizontal" >
            
           <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/select"
     
           />
        
        </LinearLayout>
    </LinearLayout>
    
        
        <LinearLayout android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="30dp"
            android:orientation="vertical"
            android:background="@drawable/greybackground"
            >
        	
            <ImageView android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/plan"
                android:layout_marginTop="15dp"
                android:layout_gravity="center_horizontal"/>
            
             <EditText android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:hint="name"
                android:background="#f3f3f3"
                android:paddingLeft="5dp"
                android:layout_marginTop="30dp"/>
             <EditText android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:hint="email"
                android:background="#f3f3f3"
                android:paddingLeft="5dp"
                android:layout_marginTop="15dp"/>
             <EditText android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:hint="mobile"
                android:background="#f3f3f3"
                android:paddingLeft="5dp"
                android:layout_marginTop="15dp"/>
             <EditText android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:hint="address"
                android:background="#f3f3f3"
                android:paddingLeft="5dp"
                android:layout_marginTop="15dp"/>
             <EditText android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:hint="category"
                android:background="#f3f3f3"
                android:paddingLeft="5dp"
                android:layout_marginTop="15dp"/>
             <Button android:layout_width="190dp"
                 android:layout_height="38dp"
                 android:layout_gravity="center_horizontal"
                 android:layout_marginTop="16dp"
                 android:text="submit"
                 android:textColor="#fff"
                 android:background="@drawable/btn"/>
            
        </LinearLayout>
        
        <LinearLayout android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            
            >
        	
           
            
            
        </LinearLayout>
             
    
</LinearLayout>
        
    

    </ScrollView>

 

registration

registration_output

Now Coding part in java, I just simply connect two pages on click of Register here Text in login page. so here is my Login.java file-

//<!-- copyrighted content owned by Android Arena (www.androidarena.co.in)-->
package com.example.logindesign;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;

public class Login extends Activity {
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
                    WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.login);
        
        TextView reg = (TextView)findViewById(R.id.reg);
        reg.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Intent nxt = new Intent(getApplicationContext(),MainActivity.class);
				startActivity(nxt);
			}
		});
	}
}

MainActivity.java

//<!-- copyrighted content owned by Android Arena (www.androidarena.co.in)-->
package com.example.logindesign;


import android.app.Activity;
import android.os.Bundle;

import android.view.Window;
import android.view.WindowManager;


public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
                    WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);
        
    }


}

 AndroidManifest.xml file .

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.logindesign"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".Login"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="MainActivity"></activity>
    </application>

</manifest>

So final hierarchy of the project will be –

heirachy_android

Output –

login_output

 reg_ouput

 

For more query and errors do post and comment in the below Disqus section :p till then Happy Coding  :p

21 thoughts on “Get Started With Best Login And Registration Form Design

  1. asmita biswas

    hi, i have created a main activity where there are 2 buttons Login and Register. on clicking register button its going to next activity where user need to fill the form and submit. it will store in database. after that next time whenever i m trying to login with registered id and password its showing “id/password doesnt match”. I wrote simple code for Login validation. it checks whether the inserted Id is matching with the password stored in the same row of table. but every time its shows id/pd is not matching. i wrote a simple and correct code for validation . i think something is wrong with database. i cannot see my db file in file explorer in eclipes. can you share the code for storing registered info in database and how to check whether data is properly storing in database or not.

    Reply
    1. sharique zahidi

      hi Mahak..

      put this code before SetContentView

      requestWindowFeature(Window.FEATURE_NO_TITLE);
      this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
      WindowManager.LayoutParams.FLAG_FULLSCREEN);

      ur problem will be solved after this

      Reply
  2. Ratna Raju

    “Login cannot be resolved or is not a field”
    “reg cannot be resolved or is not a field”
    these two errors Im getting Login.java file

    Reply
  3. Abdulla Shaikh

    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    plzz R kya error aaraha hai

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *