Creative Android login / Registration design

Published by Kapil Mohan on

Free Login and registration design for android. XML Code




Requires normal dependencies only, need to copy only in case of new projects.

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'
}

Set Activity theme to AppTheme.NoActionbar

<activity android:name=".LoginActivity"
            android:theme="@style/AppTheme.NoActionBar"/>

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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.creativelogindesigns.LoginActivity"
    android:background="@drawable/login_bk"
    android:focusableInTouchMode="true">

    <include layout="@layout/layout_register"/>

</android.support.constraint.ConstraintLayout>

layout_login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="24dp"
    android:layout_marginStart="24dp"
    android:layout_marginTop="8dp"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/loginHeader"
        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:hint="@string/login_email_hint"
            android:inputType="textEmailAddress"
            android:maxLines="1" />
    </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:inputType="textPassword"
            android:maxLines="1" />
    </android.support.design.widget.TextInputLayout>

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

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

</LinearLayout>

layout_register.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="24dp"
    android:layout_marginStart="24dp"
    android:layout_marginTop="8dp"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/loginHeader"
        android:text="Register"
        android:layout_marginTop="@dimen/loginViewsMargin"/>

    <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:hint="@string/login_name_hint"
            android:inputType="textPersonName"
            android:maxLines="1" />
    </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:hint="@string/login_mobile_number_hint"
            android:inputType="phone"
            android:maxLines="1" />
    </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:hint="@string/login_email_hint"
            android:inputType="textEmailAddress"
            android:maxLines="1" />
    </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:inputType="textPassword"
            android:maxLines="1" />
    </android.support.design.widget.TextInputLayout>

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

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

</LinearLayout>

colors.xml

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

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

dimens.xml

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

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

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>
    <string name="login_name_hint">Name</string>
    <string name="login_mobile_number_hint">Mobile Number</string>

styles.xml

    <!--designs login_bkogin 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="loginHeader">
        <item name="android:textColor">@color/primaryTextColor</item>
        <item name="android:textSize">@dimen/headerTextSize</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="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>

Includes :

login_bk.png and login_button_bk.xml

Project Details:

  • MinSdkVersion 16
  • TargetSdkVersion 28





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