Android Login / Registration Design
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>
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.