Android Login and Registration Screen Design

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

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

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.

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)

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

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

Ravi is hardcore Android programmer and Android programming has been his passion since he compiled his first hello-world program. Solving real problems of Android developers through tutorials has always been interesting part for him.