Login Screen Design in Android
 |
| Login Screen |
Follow step by step:
1. First, open Android Studio and Create a new project.
2. We create a new project by clicking "Start a new Android Studio Project". Select "Empty Activity" and click next.
3. Fill in the application name column with "My Login", then click Next.
4. Enter the Package name of your application. In this project, we enter "com.akshayarora.mylogin".
5. Now select Language Java because we use Java for this project.
6. Now Select the minimum SDK you need or to want, In this project, we are working on Minimum SDK Level 21 "Android 5.0 (Lollipop)". Now click on finish.
After the application is successfully built, you can simply make adjustments to the following sections.
First, we need to Download the user profile image:-
Open the strings.xml file in the res/values/strings.xml directory and change it to something like the following:-
res/values/strings.xml:-
<resources>
<string name="app_name">My Login</string>
<string name="name">Name</string>
<string name="enter_name">Enter Your Name</string>
<string name="email">Email</string>
<string name="enter_email">Enter Your Email</string>
<string name="password">Password</string>
<string name="enter_password">Enter Password</string>
<string name="re_password">Confirm Password</string>
<string name="enter_password_again">Confirm Password</string>
<string name="sign_up">Sign up</string>
<string name="already_account">Already have an account ?</string>
<string name="login">Login</string>
<string name="sign_in">Sign in</string>
<string name="forgot_text">Forgot Password?</string>
<string name="sign_in_google">Sign in with google</string>
<string name="no_account">"Don't have an account ?</string>
</resources>
Open the colors.xml file in app/res/values/colors.xml, and change it like this:
res/values/colors.xml:-
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#6200EE</color> <color name="colorPrimaryDark">#3700B3</color> <color name="colorAccent">#03DAC5</color> <color name="colorRipper">#D500F9</color> </resources>
Create some Drawable Resource Files in the drawable directory, by right-clicking on the drawable directory, select new/Drawable Resource files.
res/drawable/shape_user.xml:-
res/drawable/shape_sign_in_button.xml:-
res/drawable/shape_user.xml:-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="250dp" />
<padding
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
android:top="20dp" />
</shape>
res/drawable/shape_sign_in_button.xml:-
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorRipper">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimaryDark" />
<corners android:radius="50dp" />
</shape>
</item>
</ripple>
Note:- We will use the Ripple effect on button click that's why we create a ripper drawable file.
res/drawable/shape_google_button.xml:-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white"/>
<stroke android:color="@color/colorPrimaryDark" android:width="2dp"/>
<corners android:radius="50dp"/>
</shape>
For creating a custom Google Sign-in button we need it.
Adjustments of several layouts:-
Change the activity_main.xml layout, and activity_signup.xml layout so that they will be as below:-
activity_main.xml:-
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/colorPrimaryDark">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:contentDescription="@string/app_name"
android:background="@drawable/shape_user"
android:src="@drawable/user"
android:layout_centerInParent="true" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/email"
android:textSize="20sp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:textColor="@color/colorPrimaryDark"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/enter_email"
android:inputType="textEmailAddress"
android:layout_margin="20dp"
android:backgroundTint="@color/colorPrimaryDark"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/password"
android:textSize="20sp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:textColor="@color/colorPrimaryDark"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/enter_password"
android:inputType="textPassword"
android:layout_margin="20dp"
android:backgroundTint="@color/colorPrimaryDark"/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/sign_in"
android:textColor="@android:color/white"
android:layout_margin="20dp"
android:background="@drawable/shape_sign_in_button"
android:textSize="20sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/forgot_text"
android:textColor="@android:color/black"
android:gravity="center"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/sign_in_google"
android:layout_margin="20dp"
android:background="@drawable/shape_google_button"
android:textColor="@color/colorPrimaryDark"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:onClick="signUp"
android:layout_marginBottom="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/no_account"
android:textColor="@android:color/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="@string/sign_up"/>
</LinearLayout>=>
</LinearLayout>
</ScrollView>
Note:- We use signUp method for open SignupActivity on layout click "android:onClick="signUp"".
activity_signup.xml layout:-
Note:- We use ScrollView for small screens phones to view full layout.
MainActivity.java:-
Note:- We create the signUp(View view) method and use Intent to open the Sign-up activity on Linearlayout click.
SignupActivity.java:-
Next, add entries for MainActivity and SignupActivity in the AndroidManifest.xml file. The Complete Manifest file for the Login and Registration Form in Android should be as follows.
AndroidManifest.xml:-
After the steps are complete please try running it on your device. I hope this article helps you.
If this article helps you, please follow me to see other articles.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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=".SignupActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/colorPrimaryDark">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/user"
android:contentDescription="@string/app_name"
android:background="@drawable/shape_user"
android:layout_centerInParent="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/name"
android:textSize="20sp"
android:textColor="@color/colorPrimaryDark"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/enter_name"
android:inputType="text"
android:backgroundTint="@color/colorPrimaryDark"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/email"
android:textSize="20sp"
android:textColor="@color/colorPrimaryDark"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/enter_email"
android:inputType="textEmailAddress"
android:backgroundTint="@color/colorPrimaryDark"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/password"
android:textSize="20sp"
android:textColor="@color/colorPrimaryDark"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/enter_password"
android:inputType="textPassword"
android:backgroundTint="@color/colorPrimaryDark"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/re_password"
android:textSize="20sp"
android:textColor="@color/colorPrimaryDark"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="@string/enter_password_again"
android:backgroundTint="@color/colorPrimaryDark"/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/sign_up"
android:textSize="20sp"
android:textColor="@android:color/white"
android:layout_margin="20dp"
android:background="@drawable/shape_sign_in_button"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/already_account"
android:textColor="@android:color/black"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/login"
android:layout_marginStart="20dp"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
Note:- We use ScrollView for small screens phones to view full layout.
MainActivity.java:-
package com.akshayarora.mylogin;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void signUp(View view) {
startActivity(new Intent(MainActivity.this,SignupActivity.class));
}
}
Note:- We create the signUp(View view) method and use Intent to open the Sign-up activity on Linearlayout click.
SignupActivity.java:-
package com.akshayarora.mylogin;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class SignupActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_signup);
}
}
Next, add entries for MainActivity and SignupActivity in the AndroidManifest.xml file. The Complete Manifest file for the Login and Registration Form in Android should be as follows.
AndroidManifest.xml:-
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.akshayarora.mylogin">
<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=".SignupActivity"/>
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
After the steps are complete please try running it on your device. I hope this article helps you.
 |
| Login Screen |
 |
| Sign-up Screen |
If this article helps you, please follow me to see other articles.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.