Minimal Login / Registration design with XML Code

Published by Kapil Mohan on

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

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 drawableDownload

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.

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