Android Login / Registration Design

Published by Kapil Mohan on

Free Login and Registration design for Android. Suitable for Material design and clean UI Apps. Full Source code included




Projects requires no additional dependencies other than , app compact, constraint layout, cardview and design.

If you already have these, ignore copying grade

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.appsnipp.loginsamples"
        minSdkVersion 17
        targetSdkVersion 26
        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:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:0.5'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:2.2.2'
    implementation 'com.android.support:cardview-v7:26.1.0'
    implementation 'com.android.support:design:26.1.0'
}

Contains 3 layout files.

  • activity_login.xml
  • layout_login.xml
  • layout_register.xm

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:orientation="vertical"
style="@style/loginParent"
tools:context="com.appsnipp.loginsamples.LoginActivity">
<ScrollView
    style="@style/parent">

    <RelativeLayout
        style="@style/parent">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:weightSum="12">

            <LinearLayout
                style="@style/parent"
                android:background="@drawable/login_shape_bk"
                android:orientation="vertical"
                android:layout_weight="3">

                <ImageView
                    style="@style/parent"
                    android:background="@drawable/ic_login_bk"
                    android:contentDescription="login background" />

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:orientation="vertical"
            android:layout_marginTop="40dp"
            android:layout_marginRight="30dp"
            android:layout_marginLeft="30dp">


            <TextView
                style="@style/headerText"
                android:layout_gravity="center"
                android:text="App Snipp"
                android:layout_marginTop="40dp"/>
            <include
                layout="@layout/layout_register"/>

        </LinearLayout>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="10dp"
            android:src="@android:drawable/ic_menu_close_clear_cancel" />
    </RelativeLayout>

</ScrollView>

</RelativeLayout>

layout_login.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/loginCard"
    app:cardCornerRadius="@dimen/loginCardRadius"
    android:elevation="5dp"
    android:layout_gravity="center"
    android:layout_marginTop="@dimen/loginViewsMargin"
    android:layout_marginBottom="@dimen/loginViewsMargin"
    android:background="@color/whiteCardColor">



    <LinearLayout
        style="@style/linearParent"
        android:layout_gravity="center"
        android:padding="@dimen/loginViewsMargin">

        <TextView
            style="@style/headerTextPrimary"
            android:text="Login"
            android:layout_marginTop="@dimen/loginViewsMargin"/>

        <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:onClick="viewForgotPAssword"
            android:layout_marginTop="10dp"/>

        <Button
            android:id="@+id/cirLoginButton"
            style="@style/loginButton"
            android:text="Login"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/loginViewsMargin"/>

        <TextView
            style="@style/parent"
            android:textAlignment="center"
            android:textStyle="bold"
            android:textColor="@color/primaryTextColor"
            android:text="@string/login_signup_hint"
            android:onClick="viewRegisterClicked"
            android:layout_marginTop="@dimen/loginViewsMargin"/>


    </LinearLayout>
</android.support.v7.widget.CardView>

layout_register.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/loginCard"
    app:cardCornerRadius="@dimen/loginCardRadius"
    android:elevation="5dp"
    android:layout_gravity="center"
    android:layout_marginTop="@dimen/loginViewsMargin"
    android:layout_marginBottom="@dimen/loginViewsMargin"
    android:background="@color/whiteCardColor">

    <LinearLayout
        style="@style/linearParent"
        android:layout_gravity="center"
        android:padding="@dimen/loginViewsMargin">

        <TextView
            style="@style/headerTextPrimary"
            android:text="@string/register"
            android:layout_marginTop="@dimen/loginViewsMargin"/>

        <android.support.design.widget.TextInputLayout
            style="@style/parent"
            android:layout_marginTop="@dimen/signup_text_margin_top">
            <EditText
                style="@style/modifiedEditText"
                android:inputType="text"
                android:maxLines="1"
                android:hint="Name"/>
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            style="@style/parent"
            android:layout_marginTop="@dimen/signup_text_margin_top">
            <EditText
                style="@style/modifiedEditText"
                android:inputType="text"
                android:maxLines="1"
                android:hint="Mobile Number"/>
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            style="@style/parent"
            android:layout_marginTop="@dimen/signup_text_margin_top">
            <EditText
                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
            style="@style/parent"
            android:layout_marginTop="@dimen/signup_text_margin_top">
            <EditText
                style="@style/modifiedEditText"
                android:hint="@string/login_password_hint"
                android:maxLines="1"
                android:inputType="textPassword"/>
        </android.support.design.widget.TextInputLayout>

        <Button
            style="@style/loginButton"
            android:layout_gravity="center"
            android:text="Register" />

        <TextView
            style="@style/parent"
            android:textAlignment="center"
            android:textStyle="bold"
            android:textColor="@color/primaryTextColor"
            android:text="@string/signup_login_hint"
            android:layout_marginTop="@dimen/loginViewsMargin"/>

    </LinearLayout>
</android.support.v7.widget.CardView>
drawablesDownload

download drawables and include it.

files:

  • ic_login_bk.xml
  • login_shape_bk.xml

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#1F5BF3</color>
    <color name="colorPrimaryDark">#0947E8</color>
    <color name="colorAccent">#00A5FF</color>

    <!--colors for modern ui-->
    <color name="whiteTextColor">#fff</color>
    <color name="primaryTextColor">#00a5ff</color>
    <color name="loginBkColor">#f0f0f0</color>

    <!--colros for card-->
    <color name="whiteCardColor">#fff</color>

</resources>

dimens.xml

<resources>
    <!--dimes for design 3-->
    <dimen name="headerTextSize">22sp</dimen>
    <dimen name="newsMoreTextSize">12sp</dimen>
    <dimen name="loginCardRadius">20dp</dimen>
    <dimen name="loginViewsMargin">20dp</dimen>

    <dimen name="signup_text_margin_top">10dp</dimen>

</resources>

strings.xml

    <string name="register">REGISTER</string>
    <string name="login_email_hint">Email</string>
    <string name="login_password_hint">Password</string>
    <string name="signup_login_hint">Already have an account? Sign In</string>
    <string name="login_signup_hint">Don\'t have an account? Sign Up</string>

styles.xml


    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <!--designs for login and register-->
    <style name="parent">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

    <style name="loginParent" parent="parent">
        <item name="android:layout_height">match_parent</item>
        <item name="android:background">@color/loginBkColor</item>
        <item name="android:focusableInTouchMode">true</item>
    </style>

    <style name="headerText" parent="parent">
        <item name="android:textSize">@dimen/headerTextSize</item>
        <item name="android:textAlignment">center</item>
        <item name="android:textColor">@color/whiteTextColor</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="loginCard" parent="parent"></style>

    <style name="linearParent" parent="parent">
        <item name="android:orientation">vertical</item>
    </style>

    <style name="headerTextPrimary" parent="headerText">
        <item name="android:textColor">@color/primaryTextColor</item>
    </style>

    <style name="modifiedEditText" parent="parent">
        <item name="android:textSize">@dimen/newsMoreTextSize</item>
        <item name="android:backgroundTint">@color/primaryTextColor</item>
    </style>

    <style name="viewParent">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

    <style name="loginButton" parent="viewParent">
        <item name="android:background">@drawable/login_button_bk</item>
        <item name="android:textColor">@color/whiteTextColor</item>
        <item name="android:textStyle">bold</item>
    </style>

Project Details:

  • minSdkVersion : 17
  • targetSdkVersion : 26

for better results, use circular loading button , for login or reg button.

Circular Loading Button – Library




Download SourceCode
Categories: AndroidAndroid designsAndroid UI
Tags:

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

Related Posts

free classroom ui android studio project
Android Android designs Android UI

Free ClassroomUI android studio project by Shashank Singhal

Classroom UI android studio project Ideal template for edutech, e-commerce, listing, social media applications. Includes complete source code for free

android studio payment app ui
Android Android Animations Android designs Android UI Kotlin

Android studio payment app UI design by Shashank Singhal

Android studio Xml, Kotlin payment app ui with complete source code for free by Shashank Singhal. Ideal for payment app, homepage design templates etc.

free android pinterest ui design xml
Android Android designs Android UI

Free android studio Pinterest UI Xml by Shashank Singhal

Free android xml UI design of pinterest with complete source code by Shashank singhal. For more free designs visit appsnipp.com