If you are creating an application then in most cases you need to create a login and register screen. So in this post, I will demonstrate how to create a material login and register screen. Android has a very big set of customization which helps make complex designs come true with few lines of adjustments.
You can download source code or application from links below
Below is the final output of this post is as shown in the video below
Android Material Login And Registration Screen Design | loopwiki.com
1. The first step is to prepare assets needed for our project to create a new file in drawable=>logo.xml and paste code in it
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="57dp"
android:viewportHeight="226.0"
android:viewportWidth="790.0">
<path
android:fillColor="#ff0000"
android:pathData="M393,226H27c-14.9,0 -27,-12.1 -27,-27V27C0,12.1 12.1,0 27,0h366c14.9,0 27,12.1 27,27v172C420,213.9 407.9,226 393,226z" />
<path
android:fillColor="#ffffff"
android:pathData="M25.3,21h18.4v148.4H25.3V21z" />
<path
android:fillColor="#ffffff"
android:pathData="M166.1,118c0,37.4 -25.9,53.7 -50.4,53.7c-27.4,0 -48.5,-20.1 -48.5,-52c0,-33.9 22.2,-53.7 50.2,-53.7C146.5,65.9 166.1,87 166.1,118zM85.9,119c0,22.2 12.7,38.9 30.7,38.9c17.6,0 30.7,-16.5 30.7,-39.3c0,-17.1 -8.6,-38.9 -30.3,-38.9C95.3,79.7 85.9,99.8 85.9,119z" />
<path
android:fillColor="#ffffff"
android:pathData="M280.9,118c0,37.4 -25.9,53.7 -50.4,53.7c-27.4,0 -48.5,-20.1 -48.5,-52c0,-33.9 22.2,-53.7 50.2,-53.7C261.2,65.9 280.9,87 280.9,118zM200.6,119c0,22.2 12.7,38.9 30.7,38.9c17.6,0 30.7,-16.5 30.7,-39.3c0,-17.1 -8.6,-38.9 -30.3,-38.9C210,79.7 200.6,99.8 200.6,119z" />
<path
android:fillColor="#ffffff"
android:pathData="M304.1,101.3c0,-13 -0.4,-23.4 -0.8,-33h16.5l0.8,17.3h0.4c7.5,-12.3 19.4,-19.6 35.9,-19.6c24.5,0 42.8,20.7 42.8,51.4c0,36.4 -22.2,54.3 -46,54.3c-13.4,0 -25.1,-5.9 -31.1,-15.9h-0.4v55h-18.2V101.3zM322.2,128.2c0,2.7 0.4,5.2 0.8,7.5c3.3,12.7 14.4,21.5 27.6,21.5c19.4,0 30.7,-15.9 30.7,-39.1c0,-20.3 -10.7,-37.6 -30.1,-37.6c-12.5,0 -24.2,9 -27.8,22.8c-0.6,2.3 -1.3,5 -1.3,7.5V128.2z" />
<path
android:fillColor="#ff0000"
android:pathData="M450,68.2l13.4,51.4c2.9,11.3 5.6,21.7 7.5,32.2h0.6c2.3,-10.2 5.6,-21.1 9,-32L497,68.2h15.5l15.7,50.6c3.8,12.1 6.7,22.8 9,33h0.6c1.7,-10.2 4.4,-20.9 7.7,-32.8l14.4,-50.8h18.2l-32.6,101.2h-16.7l-15.5,-48.3c-3.6,-11.3 -6.5,-21.3 -9,-33.2h-0.4c-2.5,12.1 -5.6,22.6 -9.2,33.4l-16.3,48.1h-16.7L431.2,68.2H450z" />
<path
android:fillColor="#ff0000"
android:pathData="M617,39.8c0.2,6.3 -4.4,11.3 -11.7,11.3c-6.5,0 -11.1,-5 -11.1,-11.3c0,-6.5 4.8,-11.5 11.5,-11.5C612.6,28.3 617,33.3 617,39.8zM596.5,169.4V68.2h18.4v101.2H596.5z" />
<path
android:fillColor="#ff0000"
android:pathData="M663.6,114.6h0.4c2.5,-3.6 6.1,-7.9 9,-11.5l29.7,-34.9h22.2l-39.1,41.6l44.5,59.6h-22.4L673,120.9l-9.4,10.4v38h-18.2V21h18.2V114.6z" />
<path
android:fillColor="#ff0000"
android:pathData="M767.5,39.8c0.2,6.3 -4.4,11.3 -11.7,11.3c-6.5,0 -11.1,-5 -11.1,-11.3c0,-6.5 4.8,-11.5 11.5,-11.5C763.1,28.3 767.5,33.3 767.5,39.8zM747,169.4V68.2h18.4v101.2H747z" />
</vector>
Download this sample image and paste it inside drawable=>sample.jpg we will be using this image for our screen background. Now create new drawable file drawable=>bg.xml this will be the actual background of our screens. Paste code in it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/item_img">
<bitmap android:src="@drawable/sample" />
</item>
<item android:id="@+id/background">
<shape android:shape="rectangle">
<solid android:color="#c8795548" />
</shape>
</item>
</layer-list>
Now create new drawable file drawable=>button_bg.xml this file will be the custom background for our login and register buttons. Paste code in it.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorAccent" />
<corners android:radius="20dp" />
</shape>
2. Assets are ready Now we will create first activity LoginActivity. Create new class Package Name=>LoginActivity.java. Paste below code in it
package com.loopwiki.loginregisterscreendesign;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.text.Spanned;
import android.view.View;
import android.widget.TextView;
/**
* Created by amardeep on 10/24/2017.
*/
public class LoginActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
TextView textViewCreateAccount = (TextView) findViewById(R.id.textViewCreateAccount);
textViewCreateAccount.setText(fromHtml("<font color='#ffffff'>I don't have account yet. </font><font color='#00b8d4'>create one</font>"));
textViewCreateAccount.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(LoginActivity.this, RegisterActivity.class);
startActivity(intent);
}
});
}
@SuppressWarnings("deprecation")
public static Spanned fromHtml(String html) {
Spanned result;
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
result = Html.fromHtml(html, Html.FROM_HTML_MODE_LEGACY);
} else {
result = Html.fromHtml(html);
}
return result;
}
}
create new layout file layout=>activity_login.xml. Paste below code in it
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@drawable/bg"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="16dp"
android:src="@drawable/logo" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp">
<android.support.design.widget.TextInputEditText
android:id="@+id/editTextEmail"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/email" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:passwordToggleTint="@color/colorAccent"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="@+id/editTextPassword"
android:layout_width="match_parent"
android:inputType="textPassword"
android:layout_height="wrap_content"
android:hint="@string/password" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/buttonLogin"
style="@style/DefaultButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:text="@string/login" />
<TextView
android:id="@+id/textViewCreateAccount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:gravity="center_horizontal" />
</LinearLayout>
</ScrollView>
3.Now we will RegisterActivity. Create new class Package Name=>RegisterActivity.java. Paste below code in it
package com.loopwiki.loginregisterscreendesign;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
/**
* Created by amardeep on 10/24/2017.
*/
public class RegisterActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
TextView textViewLogin = (TextView) findViewById(R.id.textViewLogin);
textViewLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
finish();
}
});
Button buttonRegister = (Button) findViewById(R.id.buttonRegister);
buttonRegister.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
finish();
}
});
}
}
create new layout file layout=>activity_register.xml. Paste below code in it
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@drawable/bg"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="16dp"
android:src="@drawable/logo" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp">
<android.support.design.widget.TextInputEditText
android:id="@+id/editTextUserName"
android:inputType="textPersonName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/username" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp">
<android.support.design.widget.TextInputEditText
android:id="@+id/editTextEmail"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/email" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorAccent"
android:layout_marginTop="8dp">
<android.support.design.widget.TextInputEditText
android:id="@+id/editTextPassword"
android:layout_width="match_parent"
android:inputType="textPassword"
android:layout_height="wrap_content"
android:hint="@string/password" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/buttonRegister"
style="@style/DefaultButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:text="@string/register" />
<TextView
android:id="@+id/textViewLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:text="@string/back_to_login"
android:textColor="@android:color/white" />
</LinearLayout>
</ScrollView>
4.Inside manifest.xml paste below lines
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.loopwiki.loginregisterscreendesign">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".LoginActivity"
android:theme="@style/AppTheme.Transparent">
<intent-filter>
<category android:name="android.intent.category.LAUNCHER" />
<action android:name="android.intent.action.MAIN" />
</intent-filter>
</activity>
<activity
android:name=".RegisterActivity"
android:theme="@style/AppTheme.Transparent" />
</application>
</manifest>
5.Inside values=>colors.xml paste below lines
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#795548</color>
<color name="colorPrimaryDark">#5d4037</color>
<color name="colorAccent">#00b8d4</color>
</resources>
6.Inside values=>styles.xml paste below lines
<resources>
<! – Base application theme. – >
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<! – Customize your theme here. – >
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="AppTheme.Transparent" parent="AppTheme">
<item name="windowActionBarOverlay">true</item>
</style>
<style name="DefaultButton" parent="@android:style/Widget.Button">
<item name="android:minHeight">40dp</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">14sp</item>
<item name="android:background">@drawable/button_bg</item>
<item name="android:padding">5dp</item>
<item name="android:minWidth">200dp</item>
</style>
</resources>
7.Inside values=>styles.xml(v21) (Note: if you don’t know how to create version specific file refer this article ) paste below lines
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme.Transparent" parent="AppTheme">
<item name="windowActionBarOverlay">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
8.Inside values=>strings.xml
<resources>
<string name="app_name">LoginRegisterScreenDesign</string>
<string name="create_account"><font color="#00ff00">text</font></string>
<string name="email">Email</string>
<string name="password">Password</string>
<string name="login">Login</string>
<string name="username">Username</string>
<string name="register">Register</string>
<string name="back_to_login">Back to Login</string>
</resources>
Now run your application and see two two beautiful screens we just made.
3 Comments
Worked for me. Thank U so much.
At the RegisterActivity. Create new class Package Name=>RegisterActivity.java
I copy and paste the code but there is an error message on the following
R.layout.activity_register
R.id.textViewLogin
R.id.buttonRegister
cannot resolve symbol R
please advise
You should remove that import line and then you can import you resource reference by pressing alt + enter on any of your R ref.