Android Login Design
Simple Login designs
Activity uses NoActionBar Theme.
<activity android:name=".LoginActivity"
android:screenOrientation="portrait"
android:theme="@style/AppTheme.NoActionBar"/><?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.appsnipp.app.LoginActivity"
android:id="@+id/mainLayout"
android:focusableInTouchMode="true">
<LinearLayout
style="@style/df_row_vertical"
android:layout_height="match_parent"
android:weightSum="12">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/df_danger"
android:layout_weight="6"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="@+id/imageViewLogo"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:srcCompat="@drawable/logo"
android:layout_gravity="center" />
<TextView
style="@style/df_h3"
android:layout_width="wrap_content"
android:text="Canada Lo."
android:textColor="@color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="6"
android:gravity="center"
android:background="@color/formBg"
android:padding="20dp">
<LinearLayout
android:id="@+id/sendOtpLayout"
style="@style/df_row_vertical"
android:layout_height="match_parent"
android:gravity="center"
android:visibility="visible">
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputLayoutUname"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/editTextUname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:inputType="number"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputLayoutPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/editTextPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="number"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/buttonSendOtp"
android:layout_marginTop="40dp"
android:layout_width="match_parent"
style="@style/df4_btn_danger"
android:layout_gravity="center_vertical"
android:text="Send OTP"/>
<ProgressBar
android:id="@+id/progressSendingOtp"
style="?android:attr/progressBarStyleLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="gone"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:textSize="12sp"
android:layout_marginTop="24dp"
style="@style/df_h6"
android:text="Register Now!"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Include code to your required layout. change context to your packagename.activityName
Add below codes to styles.xml, remove AppTheme.NoActionBar if already present.
<!--include noactionbar styles, if not already included-->
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<!--styles for login design-->
<style name="df_headdings" parent="df_global">
<item name="android:textStyle">normal</item>
<item name="android:textColor">@color/black_alpha_75</item>
</style>
<style name="df_h3" parent="df_headdings">
<item name="android:textSize">28sp</item>
</style>
<style name="df_global">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="df_row_vertical" parent="df_global">
<item name="android:orientation">vertical</item>
</style>
<style name="df4_btn">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">38dp</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">#fff</item>
</style>
<style name="df4_btn_danger" parent="df4_btn">
<item name="android:background">@color/df_red</item>
</style>
<style name="df_h6" parent="df_headdings">
<item name="android:textSize">16sp</item>
</style>
<!--styles for login ends here--> <color name="df_red">#dc3545</color>
<color name="df_danger">#dc3545</color>
<color name="formBg">#f0f0f0</color>
<color name="black_alpha_75">#bf000000</color>
<color name="white">#ffffffff</color>Our primary colors, use if required.
<color name="colorPrimary">#b71c1c</color>
<color name="colorPrimaryDark">#7f0000</color>
<color name="colorAccent">#FF4081</color>Add a logo to your drawable folder.
NB:- right click and save dummy logo image, and place it in drawables folder.
Project Information:
- uses android support library
- MinSdk : -16
- TargetSdk :- 26
