topsapps is a reporting platform for mobile developers that automatically downloads and visualizes sales data, App Store reviews, hourly ranks and more

Android Login and Registration Screen Design

Android Develop MarjoriePalumbo 46℃ 0评论

Almost all android application will have login or registration process in order to authenticate a user. In this article i will be demonstrating how to design android login and registration screen design (note that it just designing the screens – no database connection or user validation).

Android Login and Registration Screen Design

The final output screenshots of this tutorial will be like below image

Android Login and Registration Screen Design

To achieve login/registration screen design I am merging multiple android layouts. I placed Scroll View as a parent element. This Scroll View makes your screen scroll in vertical direction to avoid hiding exceeding objects on the screen. Inside scroll view I placed Relative View. The main reason for using Relative View is to make footer always stick at the bottom. Finally I am using Linear Layouts for placing Header, Form and Footer. See the following diagram to get an idea about the layouts I used.

Android Login and Registration Screen Design

Designing Login Screen

   In this tutorial the main focus is to creating android login, registration screens and navigating/switching between them.

1. Create a new project by going to File ⇒ New Android Project. Fill all the details and name your activity as LoginActivity.
2. Once the project is created, create a new activity class in your project src directory and name it as RegisterActivity.java ( Right Click on src/package ⇒ New ⇒ Class)
3. Now we need to create a layout for login screen. Under res/layouts create a new xml file and name it as login.xml
( Right Click on res/layout ⇒ New ⇒ Android XML File)
4. In login.xml type following code( Here i am giving code for basic layout)

 <?xml version="1.0" encoding="utf-8"?> <ScrollView   xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="fill_parent"   android:layout_height="fill_parent"   android:fillViewport="true">   <RelativeLayout     android:layout_width="fill_parent"     android:layout_height="wrap_content" android:background="#ffffff">      <!--  Header Starts-->     <!--  Header Ends -->      <!-- Footer Start -->                    <!-- Place footer next to header to set z-index property to minus value -->     <!-- Footer Ends -->      <!-- Login Form -->     <!-- Login Form Ends -->    </RelativeLayout> </ScrollView>  

⇒Designing Header ( with Logo & Gradient Background )

In login screen we have header with a logo and gradient background color. Design your logo with different dimensions for high-density( 72px height), medium density ( 48 px height) and low density (36px height).

Android Login and Registration Screen Design

5. Create a new xml file under res/layout and name it as header_gradient.xml and type the following code

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">     <gradient         android:startColor="#24b2eb"         android:centerColor="#4ccbff"         android:endColor="#24b2eb"         android:angle="270"/>     <corners android:radius="5dp" /> </shape> 

6. In login.xml add the following code between the header comments.

 <!--  Header Starts--> <LinearLayout android:id="@+id/header"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="@layout/header_gradient"    android:paddingTop="5dip"    android:paddingBottom="5dip">     <!-- Logo Start-->     <ImageView android:src="@drawable/logo"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:layout_marginLeft="10dip"/>     <!-- Logo Ends --> </LinearLayout> <!--  Header Ends --> 

⇒Designing Footer ( with background repeat image )

In login screen footer has a background repeat image. When you flip the device in horizontal direction you can see the footer with background repeated image.

Android Login and Registration Screen Design

7. Create a new xml file under res/layout and name it as footer_repeat.xml and type the following code.

 <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android"     android:src="@drawable/repeat_bg"     android:tileMode="repeat" /> 

8. In login.xml type the following code between footer comments

 <!-- Footer Start --> <LinearLayout android:id="@+id/footer"    android:layout_width="fill_parent"    android:layout_height="90dip"    android:background="@layout/footer_repeat"    android:layout_alignParentBottom="true"> </LinearLayout> <!-- Footer Ends --> 

⇒Designing Login Form

Login form contains two textfields with labels and a login button. In your login.xml file add the following code next to footer section.

 <!-- Login Form -->   <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:padding="10dip"     android:layout_below="@id/header">     <!--  Email Label -->     <TextView android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:textColor="#372c24"       android:text="Email"/>     <EditText android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="5dip"       android:layout_marginBottom="20dip"       android:singleLine="true"/>     <!--  Password Label -->     <TextView android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:textColor="#372c24"       android:text="Password"/>     <EditText android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="5dip"       android:singleLine="true"       android:password="true"/>     <!-- Login button -->     <Button android:id="@+id/btnLogin"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="10dip"       android:text="Login"/>     <!-- Link to Registration Screen -->     <TextView android:id="@+id/link_to_register"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="40dip"       android:layout_marginBottom="40dip"       android:text="New to Twitter? Register here"       android:gravity="center"       android:textSize="20dip"       android:textColor="#0b84aa"/>  </LinearLayout> <!-- Login Form Ends --> 

The Final Code for login.xml

 <?xml version="1.0" encoding="utf-8"?> <ScrollView   xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="fill_parent"   android:layout_height="fill_parent"   android:fillViewport="true">   <RelativeLayout     android:layout_width="fill_parent"     android:layout_height="wrap_content" android:background="#ffffff">      <!--  Header  Starts-->     <LinearLayout android:id="@+id/header"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:background="@layout/header_gradient"       android:paddingTop="5dip"       android:paddingBottom="5dip">       <!-- Logo Start-->       <ImageView android:src="@drawable/logo"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_marginLeft="10dip"/>       <!-- Logo Ends -->     </LinearLayout>     <!--  Header Ends -->     <!-- Footer Start -->     <LinearLayout android:id="@+id/footer"       android:layout_width="fill_parent"       android:layout_height="90dip"       android:background="@layout/footer_repeat"       android:layout_alignParentBottom="true">     </LinearLayout>     <!-- Footer Ends -->      <!-- Login Form -->   <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:padding="10dip"     android:layout_below="@id/header">     <!--  Email Label -->     <TextView android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:textColor="#372c24"       android:text="Email"/>     <EditText android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="5dip"       android:layout_marginBottom="20dip"       android:singleLine="true"/>     <!--  Password Label -->     <TextView android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:textColor="#372c24"       android:text="Password"/>     <EditText android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="5dip"       android:singleLine="true"       android:password="true"/>     <!-- Login button -->     <Button android:id="@+id/btnLogin"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="10dip"       android:text="Login"/>     <!-- Link to Registration Screen -->     <TextView android:id="@+id/link_to_register"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="40dip"       android:layout_marginBottom="40dip"       android:text="New to Twitter? Register here"       android:gravity="center"       android:textSize="20dip"       android:textColor="#0b84aa"/>    </LinearLayout>     <!-- Login Form Ends -->   </RelativeLayout> </ScrollView>  

 

Designing the registration form

The registration form also had the same header and footer, but the form changes. The registration form contains fields like full name, email, password (if needed retype password). The following is the code for registration screen.

9. In your project under res/layout folder create new xml file register.xml and type the following code

 <?xml version="1.0" encoding="utf-8"?> <ScrollView   xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="fill_parent"   android:layout_height="fill_parent"   android:fillViewport="true">   <RelativeLayout     android:layout_width="fill_parent"     android:layout_height="wrap_content" android:background="#fff">      <!--  Header  Starts-->     <LinearLayout android:id="@+id/header"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:background="@layout/header_gradient"       android:paddingTop="5dip"       android:paddingBottom="5dip">       <!-- Logo Start-->       <ImageView android:src="@drawable/logo"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_marginLeft="10dip"/>       <!-- Logo Ends -->     </LinearLayout>     <!--  Header Ends -->     <!-- Footer Start -->     <LinearLayout android:id="@+id/footer"       android:layout_width="fill_parent"       android:layout_height="90dip"       android:background="@layout/footer_repeat"       android:layout_alignParentBottom="true">     </LinearLayout>     <!-- Footer Ends -->      <!-- Registration Form -->   <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:padding="10dip"     android:layout_below="@id/header">     <!-- Full Name Label -->     <TextView android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:textColor="#372c24"       android:text="Full Name"/>     <EditText android:id="@+id/reg_fullname"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="5dip"       android:singleLine="true"       android:layout_marginBottom="20dip"/>     <!--  Email Label -->     <TextView android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:textColor="#372c24"       android:text="Email"/>     <EditText android:id="@+id/reg_email"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="5dip"       android:singleLine="true"       android:layout_marginBottom="20dip"/>     <!-- Password Label -->     <TextView android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:textColor="#372c24"       android:text="Password"/>     <EditText android:id="@+id/reg_password"           android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:password="true"       android:singleLine="true"       android:layout_marginTop="5dip"/>     <!-- Register Button -->     <Button android:id="@+id/btnRegister"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="10dip"       android:text="Register New Account"/>     <!-- Link to Login Screen -->     <TextView android:id="@+id/link_to_login"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:layout_marginTop="40dip"       android:layout_marginBottom="40dip"       android:text="Already has account! Login here"       android:gravity="center"       android:textSize="20dip"       android:textColor="#025f7c"/>    </LinearLayout>     <!-- Registration Form Ends -->   </RelativeLayout> </ScrollView>  

Switching from Login screen to Registration screen

10. Now screen designs are ready. Open your LoginActivity.java and modify your code to following. In the following code we are setting layout to login.xml. Second on clicking on Registration page link we are switching screen from LoginActivity to RegisterActivity

 package com.androidhive.loginandregister;  import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.TextView;  public class LoginActivity extends Activity {     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         // setting default screen to login.xml         setContentView(R.layout.login);          TextView registerScreen = (TextView) findViewById(R.id.link_to_register);          // Listening to register new account link         registerScreen.setOnClickListener(new View.OnClickListener() {     public void onClick(View v) {     // Switching to Register screen     Intent i = new Intent(getApplicationContext(), RegisterActivity.class);     startActivity(i);    }   });     } } 

Switching from Registration screen to Login screen

11. Open your RegisterActivity.java and modify your code to following. To switch back to login screen just call finish(). It will close the registration screen, so login screen will be shown

 package com.androidhive.loginandregister;  import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.TextView;  public class RegisterActivity extends Activity {     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         // Set View to register.xml         setContentView(R.layout.register);          TextView loginScreen = (TextView) findViewById(R.id.link_to_login);          // Listening to Login Screen link         loginScreen.setOnClickListener(new View.OnClickListener() {     public void onClick(View arg0) {                                 // Closing registration screen     // Switching to Login Screen/closing register screen     finish();    }   });     } } 

Adding Activity entry in AndroidManifest.xml

12. Finally add entry for the newly created RegisterActivty.class in your AndroidManifest.xml file.

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">     <gradient         android:startColor="#24b2eb"         android:centerColor="#4ccbff"         android:endColor="#24b2eb"         android:angle="270"/>     <corners android:radius="5dp" /> </shape> 

0

Run your project by right clicking on your project folder ⇒ Run As ⇒ 1 Android Application. You will see an awesome output.

转载请注明:TopsApps » Android Login and Registration Screen Design

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址