Free android clean ui login / registration design with source code
Latest login and registration inspiration for your next project, we’ve already uploaded some of the best login/registration designs but still we are trying to make it even better. Can view other login designs from here
The project includes all base design and resources. For better results, use icons from flaticon.com . For Isometric illustration visit freepik.com
Manifest.xml
Start by adding an empty activity from new>activity > empty activity.
and set its theme to NoActionbar
If the NoActionbar theme is not available in your project, its provided in styles section of this tutorial
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.appsnipp.modernlogin">
<!-- permission -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme"
android:usesCleartextTraffic="true">
<!-- activitys -->
<activity
android:name="com.appsnipp.modernlogin.LoginActivity"
android:theme="@style/AppTheme.NoActionBar" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="com.appsnipp.modernlogin.RegisterActivity"
android:theme="@style/AppTheme.NoActionBar" />
<!-- android:windowSoftInputMode="adjustPan" -->
</application>
</manifest>gradle (Module:app)
Uses minsdk 17 and target sdk 28 (required for always displaying label in bottomnavigationbar).
included ‘br.com.simplepass:loading-button-android:1.14.0’ library for login progress button, if you are not familiar with this library can refer it here:
https://appsnipp.com/circular-loading-button-library/
apply plugin: 'com.android.application'
android {
compileSdkVersion 28
defaultConfig {
applicationId "com.appsnipp.modernlogin"
minSdkVersion 19
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
implementation 'com.android.support:design:28.0.0'
//animated button for login
implementation 'br.com.simplepass:loading-button-android:1.14.0'
}
Java
Project includes LoginActivity and RegistrationActivity, which are basically emptyActivitys with codes for only switching.
LoginActivity.java
Includes code for changing the status bar to a light background.
//for changing status bar icon colors
if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.M){
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
}Overrides default activity transition for creating a moving effect.
startActivity(new Intent(this,RegisterActivity.class));
overridePendingTransition(R.anim.slide_in_right,R.anim.stay);full code for LoginActivity.java
package com.appsnipp.modernlogin;
import android.content.Intent;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
public class LoginActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//for changing status bar icon colors
if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.M){
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
}
setContentView(R.layout.activity_login);
}
public void onLoginClick(View View){
startActivity(new Intent(this,RegisterActivity.class));
overridePendingTransition(R.anim.slide_in_right,R.anim.stay);
}
}
RegisterActivity.java
Includes code for changing status bar color (this can be done through activity theme also)
private void changeStatusBarColor() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
// window.setStatusBarColor(Color.TRANSPARENT);
window.setStatusBarColor(getResources().getColor(R.color.register_bk_color));
}
}also includes code for transition effect
public void onLoginClick(View view){
startActivity(new Intent(this,LoginActivity.class));
overridePendingTransition(R.anim.slide_in_left,android.R.anim.slide_out_right);
}Complete Code for RegisterActivity.java
package com.appsnipp.modernlogin;
import android.content.Intent;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
public class RegisterActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
changeStatusBarColor();
}
private void changeStatusBarColor() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
// window.setStatusBarColor(Color.TRANSPARENT);
window.setStatusBarColor(getResources().getColor(R.color.register_bk_color));
}
}
public void onLoginClick(View view){
startActivity(new Intent(this,LoginActivity.class));
overridePendingTransition(R.anim.slide_in_left,android.R.anim.slide_out_right);
}
}
res files
drawables
contains drawables and drawables-night . Copy the contents to their res folder.
Update:- move ic_register_hero drawables-night to drawables folder.
Layout
activity_login.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.appsnipp.modernlogin.LoginActivity"
android:background="@color/login_bk_color"
android:focusableInTouchMode="true"
android:gravity="center"
android:layout_gravity="center">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:paddingTop="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
style="@style/viewParent.headerText.NoMode"
android:text="Already \nhave an \nAccount?"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_register_hero"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputEmail"
style="@style/parent"
android:layout_marginTop="@dimen/loginViewsMargin">
<EditText
android:id="@+id/editTextEmail"
style="@style/modifiedEditText"
android:inputType="textEmailAddress"
android:maxLines="1"
android:hint="@string/login_email_hint"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputPassword"
style="@style/parent"
android:layout_marginTop="@dimen/loginViewsMargin">
<EditText
android:id="@+id/editTextPassword"
style="@style/modifiedEditText"
android:hint="@string/login_password_hint"
android:maxLines="1"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
<TextView
style="@style/viewParent"
android:text="Forgot Password?"
android:textColor="@color/primaryTextColor"
android:textSize="@dimen/newsMoreTextSize"
android:layout_gravity="end"
android:layout_marginTop="10dp"/>x
<br.com.simplepass.loading_button_lib.customViews.CircularProgressButton
android:id="@+id/cirLoginButton"
style="@style/loginButton"
app:spinning_bar_width="4dp"
app:spinning_bar_color="#FFF"
android:text="Login"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/loginViewsMargin"
app:spinning_bar_padding="6dp"
app:initialCornerAngle="27dp"/>
<TextView
style="@style/parent"
android:textAlignment="center"
android:textStyle="bold"
android:textColor="@color/themeColor"
android:textSize="17sp"
android:text="New user? Register Now"
android:layout_marginTop="@dimen/loginViewsMargin"
android:onClick="onLoginClick"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="12"
android:gravity="center"
android:layout_marginTop="30dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:background="@color/colorPrimaryDark"
android:layout_weight="3"/>
<TextView
style="@style/viewParent.headerText.NoMode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Use other Methods"
android:layout_weight="6"
android:textSize="12sp"
android:textAlignment="center"/>
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:background="@color/colorPrimaryDark"
android:layout_weight="3"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="20dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_facebook"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_google_plus"
android:layout_marginLeft="10dp"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<View
android:layout_marginTop="20dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_width="11dp"
android:layout_height="match_parent"
android:background="@drawable/ic_side_bg"/>
<ImageView
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_add_img"
android:layout_marginRight="11dp"
android:layout_marginBottom="30dp"
android:onClick="onLoginClick"/>
</RelativeLayout>activity_register.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.appsnipp.modernlogin.RegisterActivity"
android:background="@color/register_bk_color"
android:focusableInTouchMode="true"
android:gravity="center"
android:layout_gravity="center">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp"
android:layout_marginTop="30dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
style="@style/viewParent.headerText.NoMode"
android:textColor="@color/whiteTextColor"
android:text="Here’s\nyour first\nstep with \nus! "/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_login_hero"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:cardBackgroundColor="@color/whiteTextColor"
app:cardCornerRadius="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputName"
style="@style/parent"
android:layout_marginTop="@dimen/loginViewsMargin">
<EditText
android:id="@+id/editTextName"
style="@style/modifiedEditText"
android:inputType="textPersonName"
android:maxLines="1"
android:hint="Name"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputEmail"
style="@style/parent"
android:layout_marginTop="@dimen/loginViewsMargin">
<EditText
android:id="@+id/editTextEmail"
style="@style/modifiedEditText"
android:inputType="textEmailAddress"
android:maxLines="1"
android:hint="@string/login_email_hint"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputMobile"
style="@style/parent"
android:layout_marginTop="@dimen/loginViewsMargin">
<EditText
android:id="@+id/editTextMobile"
style="@style/modifiedEditText"
android:inputType="phone"
android:maxLines="1"
android:hint="Mobile Number"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputPassword"
style="@style/parent"
android:layout_marginTop="@dimen/loginViewsMargin">
<EditText
android:id="@+id/editTextPassword"
style="@style/modifiedEditText"
android:hint="@string/login_password_hint"
android:maxLines="1"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
<br.com.simplepass.loading_button_lib.customViews.CircularProgressButton
android:id="@+id/cirRegisterButton"
style="@style/loginButton"
app:spinning_bar_width="4dp"
app:spinning_bar_color="#FFF"
android:text="Register"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/loginViewsMargin"
app:initialCornerAngle="27dp"
app:spinning_bar_padding="6dp"/>
<TextView
style="@style/parent"
android:textAlignment="center"
android:textStyle="bold"
android:textColor="@color/themeColor"
android:textSize="17sp"
android:text="Already have an account?"
android:layout_marginTop="@dimen/loginViewsMargin"
android:onClick="onLoginClick"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="12"
android:gravity="center"
android:layout_marginTop="30dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:background="@color/whiteTextColor"
android:layout_weight="3"/>
<TextView
style="@style/viewParent.headerText.NoMode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/whiteTextColor"
android:text="Use other Methods"
android:layout_weight="6"
android:textSize="12sp"
android:textAlignment="center"/>
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:background="@color/whiteTextColor"
android:layout_weight="3"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="20dp"
android:layout_marginBottom="30dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_facebook"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_google_plus"
android:layout_marginLeft="10dp"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<View
android:layout_marginTop="20dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_width="11dp"
android:layout_height="match_parent"
android:background="@drawable/ic_side_bg"/>
<ImageView
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_back_img"
android:layout_marginRight="11dp"
android:layout_marginBottom="30dp"
android:onClick="onLoginClick"
android:adjustViewBounds="false"/>
</RelativeLayout>Values
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#FFFFFF</color>
<color name="colorPrimaryDark">#000</color>
<color name="colorAccent">#11CFC5</color>
<color name="themeColor">#11CFC5</color>
<!--normal colors-->
<color name="darkTextColor">#020000</color>
<!--colors for light mode-->
<color name="contentTextColor">#020000</color>
<color name="register_bk_color">#11CFC5</color>
<color name="login_bk_color">#fff</color>
<color name="whiteTextColor">#fff</color>
<color name="primaryTextColor">#11CFC5</color>
</resources>
dimens
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="headerTextSize">25sp</dimen>
<dimen name="newsMoreTextSize">12sp</dimen>
<dimen name="loginViewsMargin">20dp</dimen>
</resources>strings.xml
we’ve not extracted string resources.
<resources>
<string name="app_name">ModernLogin</string>
<string name="login_email_hint">Email</string>
<string name="login_password_hint">Password</string>
</resources>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<!-- The launcher theme. It sets the main window background to the launch_screen drawable -->
<!--styles for app-->
<!--df dialog-->
<style name="viewParent">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="viewParent.headerText">
<item name="android:textColor">@color/contentTextColor</item>
<item name="android:textSize">@dimen/headerTextSize</item>
<item name="android:textStyle">bold</item>
</style>
<style name="viewParent.headerText.NoMode">
<item name="android:textColor">@color/darkTextColor</item>
</style>
<style name="parent">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="modifiedEditText" parent="parent">
<item name="android:textSize">@dimen/newsMoreTextSize</item>
<item name="android:backgroundTint">@color/primaryTextColor</item>
</style>
<style name="loginButton" parent="viewParent">
<item name="android:background">@drawable/button_background_blue</item>
<item name="android:textColor">@color/whiteTextColor</item>
<item name="android:textStyle">bold</item>
</style>
<style name="spinnerHintText" parent="parent">
<item name="android:textSize">@dimen/newsMoreTextSize</item>
<item name="android:textColor">@color/colorAccent</item>
<item name="android:paddingLeft">5dp</item>
</style>
</resources>If you like this post, please leave your suggestions and comments below
Did you know?
your comments can motivate us to create wonders.
NOTE:- source code includes XD Resources also!
We are planning to start complete tutorial on designing, if you are interested please leave a comment. If we receive enough comments, we will start rolling out designing tutorials.
