Minimal Login / Registration design with XML Code

Published by Kapil Mohan on March 18, 2019March 18, 2019

minmal login / registration page with full source code for free.

Preview
Gradle
Manifest
Layouts
Values
Drawables

Requires no additional libraries.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    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:27.1.1'
}

Uses login theme for setting full screen with white status bar color

  <activity android:name=".LoginActivity"
            android:theme="@style/LoginTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

Includes 3 layouts

activity_login.xml
layout_login.xml
layout_register.xml

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    tools:context="com.appsnipp.minimallogin.LoginActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorLoginPrimaryDark">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

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

    </ScrollView>
</LinearLayout>

layout_register.xml

<LinearLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="30dp"
    android:paddingRight="30dp"
    android:focusableInTouchMode="true"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:cropToPadding="true"
        android:src="@drawable/login_hero_image"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"/>

    <TextView
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        style="@style/viewParent"
        android:text="Register"
        android:textSize="@dimen/headerTextSize"
        android:textColor="@color/blackTextColor"
        android:textStyle="bold" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputName"
        style="@style/parent.TextLayout"
        android:layout_marginTop="@dimen/signup_text_margin_top">
        <EditText
            android:id="@+id/editTextName"
            style="@style/modifiedEditText"
            android:inputType="text"
            android:maxLines="1"
            android:hint="name"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputMobile"
        style="@style/parent.TextLayout"
        android:layout_marginTop="@dimen/signup_text_margin_top">
        <EditText
            android:id="@+id/editTextMobile"
            style="@style/modifiedEditText"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:hint="email"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputEmail"
        style="@style/parent.TextLayout"
        android:layout_marginTop="@dimen/signup_text_margin_top">
        <EditText
            android:id="@+id/editTextEmail"
            style="@style/modifiedEditText"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:hint="username"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputPassword"
        style="@style/parent.TextLayout"
        android:layout_marginTop="@dimen/signup_text_margin_top">
        <EditText
            android:id="@+id/editTextPassword"
            style="@style/modifiedEditText"
            android:hint="password"
            android:maxLines="1"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_login_button"
        android:layout_gravity="right"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:textStyle="bold"
        android:textColor="@color/blackTextColor"
        android:textSize="12sp"
        android:text="Already Have an Account?\nLogin Now."/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            android:cropToPadding="true"
            android:src="@drawable/facebook_button" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            android:cropToPadding="true"
            android:src="@drawable/google_button" />
    </LinearLayout>



</LinearLayout>

layout_login.xml

<LinearLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="30dp"
    android:paddingRight="30dp"
    android:focusableInTouchMode="true"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:cropToPadding="true"
        android:src="@drawable/login_hero_image"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"/>

    <TextView
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        style="@style/viewParent"
        android:text="Login"
        android:textSize="@dimen/headerTextSize"
        android:textColor="@color/blackTextColor"
        android:textStyle="bold" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputEmail"
        style="@style/parent.TextLayout"
        android:layout_marginTop="@dimen/signup_text_margin_top">
        <EditText
            android:id="@+id/editTextEmail"
            style="@style/modifiedEditText"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:hint="username"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputPassword"
        style="@style/parent.TextLayout"
        android:layout_marginTop="@dimen/signup_text_margin_top">
        <EditText
            android:id="@+id/editTextPassword"
            style="@style/modifiedEditText"
            android:hint="password"
            android:maxLines="1"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_login_button"
        android:layout_gravity="right"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:textStyle="bold"
        android:textColor="@color/blackTextColor"
        android:textSize="12sp"
        android:text="Already Have an Account?\nLogin Now."/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            android:cropToPadding="true"
            android:src="@drawable/facebook_button" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            android:cropToPadding="true"
            android:src="@drawable/google_button" />
    </LinearLayout>



</LinearLayout>

colors.xml

<color name="blackTextColor">#000</color>
<color name="colorLoginPrimaryDark">#FDFFFF</color>

dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="headerTextSize">22sp</dimen>
    <dimen name="newsMoreTextSize">16sp</dimen>
    <dimen name="signup_text_margin_top">5dp</dimen>
</resources>

styles.xml

    <!-- Base application theme. -->
    <style name="LoginTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorLoginPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

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


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

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

    <style name="parent.TextLayout">
        <item name="android:layout_marginLeft">15dp</item>
    </style>

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

download drawable Download

download drawables zip and copy the contents to drawables folder in android.

Includes:

facebook_button.png
google_button.png
ic_login_button.xml
login_hero_image.png

if the folder contains any other files, ignore it!

Download Source Code

Project Details:

MinSDK: 16
TargetSDK: 27

Credits:

Hero image from freepik.com

Keywords:

Free android login, android login xml designs, free android minimal login designs, free android register designs, free signup designs, free xml designs, login appsnipp, register appsnipp, signup appsnipp, xml signup designs.