How to create simple and beautiful user login screen in android application free project download.
Login scree is the most important part of every android application which will server its user to some kind of authenticate functionality. So in this tutorial we are going to make a simple Android Login UI Design Screen Example Tutorial With Source Code step by step guide.
Widgets used in this project :
- RelativeLayout .
- ImageView .
- TextInputLayout ( Floating EditText ) .
- Button .
- TextView .
Please follow the below steps to import Design support library in your project in order to use Floating EditText :
1. Open your project’s build.gradle ( Module : app ) file.
2. Please add below code inside your build.gradle ( Module : app ) file.
compile 'com.android.support:appcompat-v7:24.0.0' compile 'com.android.support:design:24.2.1'
3. Screenshot of build.gradle ( Module : app ) file after adding above code.
Here your go friends….Now We are going start coding.
Android Login UI Design Screen Example Tutorial With Source Code.
Code for MainActivity.java file.
package com.android_examples.loginui_android_examplescom; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }
Code for activity_main.xml layout file.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.android_examples.loginui_android_examplescom.MainActivity" android:background="#9C27B0" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_margin="20dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="40dp" android:id="@+id/imageView" android:src="@drawable/logo"/> <android.support.design.widget.TextInputLayout android:id="@+id/TextInputLayout1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_below="@+id/imageView" android:textColorHint="#fefefe" android:layout_centerHorizontal="true" > <EditText android:id="@+id/edittext1" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Email" android:layout_below="@+id/imageView" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:textColor="#FFFFFF" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/TextInputLayout2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_below="@+id/TextInputLayout1" android:textColorHint="#fefefe" android:layout_centerHorizontal="true" > <EditText android:id="@+id/edittext2" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" android:layout_below="@+id/imageView" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_centerHorizontal="true" android:textColor="#FFFFFF" /> </android.support.design.widget.TextInputLayout> <Button android:id="@+id/button1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="LOGIN" android:layout_below="@+id/TextInputLayout2" android:layout_marginTop="10dp" android:background="#FFA000" android:textColor="#fefefe" android:textSize="20dp" android:layout_centerHorizontal="true" /> <TextView android:text="No Account? Create One" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/button1" android:layout_centerHorizontal="true" android:layout_marginTop="29dp" android:id="@+id/textView" android:textColor="#fefefe" android:textSize="20dp" android:textStyle="bold"/> </RelativeLayout> </RelativeLayout>
Code for Styles.xml file.