 |
| Material Login Screen |
Hello Friends, Today We will teach you how to create material design login and signup screen
Follow step by step:-
1. 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 "Login Screen UI", then click next.
4. Enter the Package name of your application. In this project we enter "com.akshayarora.loginscreenui".
5. Now select the project language Java because we use Java for this project.
6. Now select the minimum SDK you need or want, In this project, we are working on minimum SDK Level 21 "Android 5.0 (Lollipop)". Now click on the finish button.
After the application is successfully built, you can simply make adjustments to the following sections.
7. 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">#FF55C6F1</color>
<color name="colorAccent">#03DAC5</color>
<color name="pink">#C638A6</color>
<color name="blue">#3C4FCD</color>
<color name="background_color">#21254A</color>
<color name="white">#ffffff</color>
<color name="gray">#767C93</color>
</resources>
8. Now 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">Login Screen UI</string>
<string name="login_text">Login</string>
<string name="email_text">Email</string>
<string name="password_text">Password</string>
<string name="forgot_password_text">Forgot Password?</string>
<string name="new_here_text">New Here ?</string>
<string name="sign_up_text">Sign up</string>
<string name="name_text">Name</string>
<string name="confirm_password_text">Confirm Password</string>
<string name="privacy_text">By creating an account, you agree to the \nTerms and Use and Privacy Policy</string>
<string name="already_account_text">Already have an account ?</string>
</resources>
res/values/styles.xml :-
<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="android:windowTranslucentStatus">true</item>
<item name="android:navigationBarColor">@color/background_color</item>
</style>
</resources>
Note:- "android:windowTranslucentStatus" is used for showing the layout on the back side of the notification bar. and "android:navigationBarColor" is used for changing the navigation bar's color in the full-Screen Devices.
10. Now Create some Drawable resource files in the drawable directory, by right-clicking on the drawable directory, and select new > drawable resource file.
We create one drawable file for our Button.
res/drawable/button_style.xml :-
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/blue"
android:shape="rectangle">
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<gradient
android:angle="45"
android:centerColor="@color/pink"
android:endColor="@color/blue"
android:startColor="@color/pink" />
</shape>
</item>
</ripple>
Note:- We will use the ripper effect on button click that's why we will use ripper on this drawable file.
11. Now we need Toolbar Image
12. Adjustment to several layouts:-
Changes the activity_login.xml,signup_main.xml layout so that it will be as below:-
activity_login.xml ;-
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:background="@color/background_color"
tools:context=".LoginActivity"<
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/toolbar"
android:elevation="4dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/login_text"
android:textColor="@color/white"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.154"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar" />
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="@+id/linearLayout3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="@color/gray"
android:hint="@string/email_text"
android:inputType="textEmailAddress"
android:textColor="@color/gray"
android:textColorHint="@color/gray" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:backgroundTint="@color/gray"
android:hint="@string/password_text"
android:inputType="numberPassword"
android:textColor="@color/gray"
android:textColorHint="@color/gray" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:text="@string/forgot_password_text"
android:textColor="@color/gray"
android:textSize="16sp" />
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:background="@drawable/button_style"
android:padding="10dp"
android:text="@string/login_text"
android:textAllCaps="true"
android:textColor="@color/white"
android:textSize="22sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/new_here_text"
android:textColor="@color/gray"
android:textSize="16sp" />
<TextView
android:id="@+id/textSignUP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="@string/sign_up_text"
android:textColor="@color/gray"
android:textSize="18sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Now Open the signup_main.xml file
signup_main.xml :-
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:background="@color/background_color"
tools:context=".SignupActivity">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/toolbar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sign_up_text"
android:textColor="@color/white"
android:textSize="32sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.063"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar2"
app:layout_constraintVertical_bias="0.0" />
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar2"
app:layout_constraintVertical_bias="0.457">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="@color/gray"
android:hint="@string/name_text"
android:inputType="text"
android:textColor="@color/gray"
android:textColorHint="@color/gray" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:backgroundTint="@color/gray"
android:hint="@string/email_text"
android:inputType="textEmailAddress"
android:textColor="@color/gray"
android:textColorHint="@color/gray" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:backgroundTint="@color/gray"
android:hint="@string/password_text"
android:inputType="textPassword"
android:textColor="@color/gray"
android:textColorHint="@color/gray" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:backgroundTint="@color/gray"
android:hint="@string/confirm_password_text"
android:inputType="textPassword"
android:textColor="@color/gray"
android:textColorHint="@color/gray" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:text="@string/privacy_text"
android:textAlignment="center"
android:textColor="@color/gray"
android:textSize="16sp" />
<Button
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:background="@drawable/button_style"
android:padding="10dp"
android:text="@string/sign_up_text"
android:textAllCaps="false"
android:textColor="@color/white"
android:textSize="22sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout"
app:layout_constraintVertical_bias="0.868">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/already_account_text"
android:textColor="@color/gray"
android:textSize="16sp" />
<TextView
android:id="@+id/textLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="@string/login_text"
android:textColor="@color/gray"
android:textSize="18sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
12. Now we need to open Activities on click on TextView and making some changes in Java Files.
LoginActivity.java :-
package com.akshayarora.loginscreenui;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class LoginActivity extends AppCompatActivity {
private TextView tvSignUp;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
tvSignUp = findViewById(R.id.textSignUP);
tvSignUp.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(LoginActivity.this, SignupActivity.class);
startActivity(intent);
finish();
}
});
}
}
SignupActivity.java:-
package com.akshayarora.loginscreenui;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class SignupActivity extends AppCompatActivity {
private TextView tvLogin;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_signup);
tvLogin = findViewById(R.id.textLogin);
tvLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(SignupActivity.this, LoginActivity.class);
startActivity(intent);
finish();
}
});
}
}
After all, the steps are complete please try running it on your device. I hope this article helps you.
 |
| Material Login |
 |
| Material Design Signup Screen |
Enjoy!
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.