Tag Archives: Design

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