Login SignUp screen UI UX design Android Studio | Download Best login SIgn Up design xml
.png)
.png)
Hello Developers, In this blog I will share with you an Amazing login signup screen design for Android. If you are an Android App Developer then you are in the right place. We provide unlimited Android Solution and design for Android Studio users, So do not forget to follow us.
activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".LoginActivity">
<ScrollView
android:layout_width="match_parent"
android:fillViewport="true"
android:scrollbars="none"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/topView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@color/purple_500"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/topText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="48dp"
android:layout_weight="1"
android:text="CODE EDITOR"
android:textColor="@android:color/white"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/imageView5"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/topView"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText,InefficientWeight" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_baseline_account_circle_24"
tools:ignore="ContentDescription" />
</LinearLayout>
</RelativeLayout>
<View
android:id="@+id/view5"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@drawable/design_ui"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/topView" />
<LinearLayout
android:id="@+id/linear1"
android:layout_width="match_parent"
android:layout_margin="8dp"
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:gravity="center"
android:orientation="vertical"
android:layout_weight="1"
android:layout_marginBottom="50dp"
android:layout_height="match_parent">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/nameLayout"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp"
android:hint=" Name"
android:visibility="gone"
tools:ignore="HardcodedText,RtlHardcoded">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/nameEdittext"
android:layout_width="match_parent"
android:textColor="@color/black"
android:alpha="0.7"
android:inputType="text"
android:maxLines="1"
android:drawableLeft="@drawable/name_icon"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="6dp"
android:hint=" Email"
tools:ignore="HardcodedText,RtlHardcoded">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/emailEdittext"
android:layout_width="match_parent"
android:textColor="@color/black"
android:alpha="0.7"
android:inputType="textEmailAddress"
android:maxLines="1"
android:drawableLeft="@drawable/email_icon"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="6dp"
android:hint=" Password"
tools:ignore="HardcodedText,RtlHardcoded">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/passwordEdittext"
android:layout_width="match_parent"
android:textColor="@color/black"
android:alpha="0.7"
android:inputType="textPassword"
android:drawableLeft="@drawable/password_icon"
android:maxLines="1"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<androidx.cardview.widget.CardView
android:id="@+id/signupLayout"
android:layout_width="match_parent"
android:layout_marginStart="32dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="32dp"
app:cardCornerRadius="7dp"
android:visibility="gone"
app:cardBackgroundColor="@color/purple_500"
android:layout_height="wrap_content">
<ProgressBar
android:id="@+id/signupProgress"
android:layout_width="match_parent"
android:layout_gravity="center"
android:visibility="gone"
android:layout_height="30dp"/>
<Button
android:id="@+id/btnSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/ripple"
android:text="SIGNUP"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
tools:ignore="HardcodedText" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/loginLayout"
android:layout_width="match_parent"
android:layout_marginStart="32dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="32dp"
app:cardCornerRadius="7dp"
app:cardBackgroundColor="@color/purple_500"
android:layout_height="wrap_content">
<ProgressBar
android:id="@+id/loginProgress"
android:layout_width="match_parent"
android:layout_gravity="center"
android:visibility="gone"
android:layout_height="30dp"/>
<Button
android:id="@+id/btnLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/ripple"
android:text="LOGIN"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
tools:ignore="HardcodedText" />
</androidx.cardview.widget.CardView>
<TextView
android:id="@+id/forgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="50dp"
android:padding="4dp"
android:gravity="center"
android:text="Forget Password"
android:textColor="@color/purple_500"
android:textSize="15sp"
android:textStyle="bold"
android:background="@drawable/ripple"
app:layout_constraintTop_toBottomOf="@+id/btnLogin"
tools:ignore="HardcodedText" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:layout_height="wrap_content">
<TextView
android:id="@+id/gotoRegister"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="New User? Register Now"
android:textColor="#3B799F"
android:textSize="13sp"
android:textStyle="bold"
android:padding="8dp"
android:background="@drawable/ripple"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout2"
tools:ignore="HardcodedText" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
LoginActivity.java
package com.sort.login_design;
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.TextView;
import com.google.android.material.textfield.TextInputEditText;
import com.google.android.material.textfield.TextInputLayout;
import java.util.Timer;
import java.util.TimerTask;
public class LoginActivity extends AppCompatActivity {
CardView loginLayout, signupLayout;
ProgressBar loginProgress, signupProgress;
private Button btnLogin, btnSignup;
TextInputEditText emailEdittext, passwordEdittext, nameEdittext;
TextView gotoRegister, forgotPassword;
TextInputLayout nameLayout;
LinearLayout linear1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
btnLogin = findViewById(R.id.btnLogin);
btnSignup = findViewById(R.id.btnSignUp);
passwordEdittext = findViewById(R.id.passwordEdittext);
emailEdittext = findViewById(R.id.emailEdittext);
nameEdittext = findViewById(R.id.nameEdittext);
gotoRegister = findViewById(R.id.gotoRegister);
nameLayout = findViewById(R.id.nameLayout);
forgotPassword = findViewById(R.id.forgotPassword);
linear1 = findViewById(R.id.linear1);
loginLayout = findViewById(R.id.loginLayout);
signupLayout = findViewById(R.id.signupLayout);
loginProgress = findViewById(R.id.loginProgress);
signupProgress = findViewById(R.id.signupProgress);
//if is true then login layout will visible and signup layout will gone
showLoginSignUp(true);
}
private void loginProgress(boolean isProgress) {
if(isProgress) {
btnLogin.setVisibility(View.INVISIBLE);
loginProgress.setVisibility(View.VISIBLE);
} else {
loginProgress.setVisibility(View.INVISIBLE);
btnLogin.setVisibility(View.VISIBLE);
}
}
private void signupProgress(boolean isProgress) {
if(isProgress) {
btnSignup.setVisibility(View.INVISIBLE);
signupProgress.setVisibility(View.VISIBLE);
} else {
signupProgress.setVisibility(View.INVISIBLE);
btnSignup.setVisibility(View.VISIBLE);
}
}
@SuppressLint("SetTextI18n")
private void showLoginSignUp(boolean isLogin) {
//if is true then login layout will visible and signup layout will gone
linear1.setAlpha(0f);
Timer timer = new Timer();
TimerTask t = new TimerTask() {
@Override
public void run() {
runOnUiThread(new Runnable() {
@Override
public void run() {
linear1.setAlpha((float) (0.1) + linear1.getAlpha());
if(linear1.getAlpha() == 1) {
timer.cancel();
}
}
});
}
};
timer.schedule(t, (60) , (60));
if(isLogin) {
nameLayout.setVisibility(View.GONE);
signupLayout.setVisibility(View.GONE);
loginLayout.setVisibility(View.VISIBLE);
forgotPassword.setVisibility(View.VISIBLE);
gotoRegister.setText("New User? Register Now");
gotoRegister.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
showLoginSignUp(false);
}
});
} else {
loginLayout.setVisibility(View.GONE);
forgotPassword.setVisibility(View.GONE);
nameLayout.setVisibility(View.VISIBLE);
signupLayout.setVisibility(View.VISIBLE);
gotoRegister.setText("Already Registered ? Login");
gotoRegister.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
showLoginSignUp(true);
}
});
}
nameEdittext.setText("");
emailEdittext.setText("");
passwordEdittext.setText("");
}
}Now here I have provided some icon drawables which is needed for this Project. Create this drawables in the /res/drawable folder
design_ui.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="1440dp"
android:height="320dp"
android:viewportWidth="1440"
android:viewportHeight="320">
<path
android:pathData="M0,224L48,192C96,160 192,96 288,96C384,96 480,160 576,176C672,192 768,160 864,176C960,192 1056,256 1152,240C1248,224 1344,128 1392,80L1440,32L1440,0L1392,0C1344,0 1248,0 1152,0C1056,0 960,0 864,0C768,0 672,0 576,0C480,0 384,0 288,0C192,0 96,0 48,0L0,0Z"
android:fillColor="@color/purple_500"
android:fillAlpha="1"/>
</vector>
email_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<vector android:height="24dp"
android:viewportHeight="24.0" android:viewportWidth="24.0"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M20,4L4,4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,6c0,-1.1 -0.9,-2 -2,-2zM20,8l-8,5 -8,-5L4,6l8,5 8,-5v2z"/>
</vector>
ic_baseline_account_circle_24.xml
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10s10,-4.48 10,-10S17.52,2 12,2zM12,6c1.93,0 3.5,1.57 3.5,3.5S13.93,13 12,13s-3.5,-1.57 -3.5,-3.5S10.07,6 12,6zM12,20c-2.03,0 -4.43,-0.82 -6.14,-2.88C7.55,15.8 9.68,15 12,15s4.45,0.8 6.14,2.12C16.43,19.18 14.03,20 12,20z"/>
</vector>
name_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<vector android:height="24dp"
android:viewportHeight="24.0" android:viewportWidth="24.0"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M12,12c2.21,0 4,-1.79 4,-4s-1.79,-4 -4,-4 -4,1.79 -4,4 1.79,4 4,4zM12,14c-2.67,0 -8,1.34 -8,4v2h16v-2c0,-2.66 -5.33,-4 -8,-4z"/>
</vector>
password_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<vector android:height="24dp"
android:viewportHeight="24.0" android:viewportWidth="24.0"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM12,17c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2 2,0.9 2,2 -0.9,2 -2,2zM15.1,8L8.9,8L8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1 1.71,0 3.1,1.39 3.1,3.1v2z"/>
</vector>
ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="@android:integer/config_shortAnimTime"
android:color="#e0e0e0">
<item android:id="@android:id/mask">
<shape android:shape="rectangle" >
<solid android:color="@android:color/holo_green_light" />
</shape>
</item>
</ripple>Here are some additional changes given below, you can leave it if you dont want this. It is for changing the Button color, Status Bar color etc. Do not implement this if you have already selected or changed your theme.xml file.
themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Login_Design" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#0091EA</item>
<item name="colorPrimaryVariant">#0091EA</item>
<item name="colorOnPrimary">@color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_200</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>Hope you enjoy this blog. If you find our work helpful then please share this blog to your community. Thank You
.png)
.png)
.png)
.png)
.png&description=Login SignUp screen UI UX design Android Studio | Download Best login SIgn Up activity design xml){kind=link}
0 Comments