Android Material Login And Registration Screen Design
If you are creating application then in most cases you need to create 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 final output of this post is as shown in video below
1. The first step is to prepare assets needed for our project create new file in drawable=>logo.xml and paste code in it
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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.
|
1 2 3 4 5 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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
|
1 2 3 4 5 6 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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
|
1 2 3 4 5 6 7 |
<?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
|
1 2 3 4 5 6 7 8 9 10 |
<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.
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.