Free android clean ui login / registration design with source code

Published by Kapil Mohan on

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







free login/ registration for android – preview

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.





Kapil Mohan

Like to add color to developers life and apps. Can create smile using Android, iOS, PHP, codeignitor, web technologies, etc... Feel free to contact me at [email protected] .