Hello, guys, I am back with new tutorials and from now I will make many videos and posts. So in this post, we will see how we make a Sign-in Signup UI with 2019 design pattern.
So, first of all, create a new project in the android studio here in this project I am using Androidx components.
so, first of all, add this dependency in your app level build file and sync this project.
dependencies {
implementation 'androidx.appcompat:appcompat:1.0.2'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3
repositories {
maven { url "https://oss.sonatype.org/content/repositories/snapshots" }
maven { url "https://oss.sonatype.org/content/repositories/releases" }
}
dependencies {
implementation 'com.github.captain-miao:optroundcardview:1.0.0'
}
implementation 'de.hdodenhof:circleimageview:3.0.0'
}Here in this project implementation ‘com.google.android.material:material:1.1.0-alpha07‘ is used to get the design library. Now copy drawable files from this link and past it in your project drawable file. Download Now open your activity_main.xml file and paste this code to get the sign-in page design.
<?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"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/signin_page_background" />
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="45dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:padding="15dp">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:tint="#191919"
android:src="@drawable/baseline_arrow_back_ios_24" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:textColor="#191919"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<com.github.captain_miao.optroundcardview.OptRoundCardView
android:id="@+id/optRoundCardView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout"
app:optRoundCardBackgroundColor="#353758"
app:optRoundCardCornerRadius="50dp"
app:optRoundCardElevation="0dp"
app:optRoundCardLeftBottomCorner="false"
app:optRoundCardLeftTopCorner="true"
app:optRoundCardRightBottomCorner="false"
app:optRoundCardRightTopCorner="true">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="80dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Welcome Back"
android:textAlignment="center"
android:textColor="#9394B8"
android:textSize="17sp"
android:textStyle="bold" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:background="@android:color/transparent"
android:hint="Username"
android:padding="15dp"
android:textColor="@android:color/white"
android:textColorHint="@android:color/white"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
android:background="#5A5A5A" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:background="@android:color/transparent"
android:hint="Password"
android:padding="15dp"
android:textColor="@android:color/white"
android:textColorHint="@android:color/white"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
android:background="#5A5A5A" />
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="30dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="30dp"
android:background="@drawable/button_login_background"
android:text="Log in"
android:textAllCaps="false"
android:textColor="@android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="30dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="30dp"
android:background="@drawable/button_another_account_background"
android:elevation="0dp"
android:text="Another Account"
android:textAllCaps="false"
android:textColor="@android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<com.github.captain_miao.optroundcardview.OptRoundCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="60dp"
app:optRoundCardCornerRadius="30dp"
app:optRoundCardLeftBottomCorner="false"
app:optRoundCardLeftTopCorner="true"
app:optRoundCardRightBottomCorner="false"
app:optRoundCardRightTopCorner="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:padding="15dp"
android:text="Sign up"
android:onClick="OpenSignupPage"
android:textColor="#191919"
android:textSize="25sp"
android:textStyle="bold" />
</LinearLayout>
</com.github.captain_miao.optroundcardview.OptRoundCardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</com.github.captain_miao.optroundcardview.OptRoundCardView>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:elevation="0dp"
android:src="@drawable/user_image"
app:layout_constraintBottom_toTopOf="@+id/optRoundCardView"
app:layout_constraintEnd_toEndOf="@+id/imageView"
app:layout_constraintStart_toStartOf="@+id/imageView"
app:layout_constraintTop_toTopOf="@+id/optRoundCardView" />
</androidx.constraintlayout.widget.ConstraintLayout>Now open MainActivity.java file and add this code it will allow you to open the signup page
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
getWindow().setStatusBarColor(Color.TRANSPARENT);
setContentView(R.layout.activity_main);
}
public void OpenSignupPage(View view) {
startActivity(new Intent(MainActivity.this,SignupActivity.class));
}
}Now create a new blank activity with name SIgnupActivity and then open activity_signup.xml file and paste this code.
<?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"
tools:context=".SignupActivity">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/signin_page_background" />
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="45dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:padding="15dp">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/baseline_arrow_back_ios_24"
android:tint="#191919" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:textColor="#191919"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<com.github.captain_miao.optroundcardview.OptRoundCardView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:optRoundCardCornerRadius="50dp"
app:optRoundCardElevation="0dp"
app:optRoundCardLeftBottomCorner="false"
app:optRoundCardLeftTopCorner="true"
app:optRoundCardRightBottomCorner="false"
app:optRoundCardRightTopCorner="true"
app:layout_constraintTop_toBottomOf="@+id/linearLayout">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="80dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Createnaccount"
android:textStyle="bold"
android:textSize="25dp"
android:textColor="#191919"
android:layout_marginStart="30dp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:background="@android:color/transparent"
android:hint="Name"
android:drawableEnd="@drawable/user_icon"
android:drawableTint="#696969"
android:padding="15dp"
android:textColor="#191919"
android:textColorHint="#696969"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
android:background="#696969" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:background="@android:color/transparent"
android:hint="E-mail"
android:drawableEnd="@drawable/email_icon"
android:drawableTint="#696969"
android:padding="15dp"
android:textColor="#191919"
android:textColorHint="#696969"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
android:background="#696969" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:background="@android:color/transparent"
android:hint="Password"
android:drawableEnd="@drawable/pasword_icon"
android:drawableTint="#696969"
android:padding="15dp"
android:textColor="#191919"
android:textColorHint="#696969"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
android:background="#696969" />
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="50dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="50dp"
android:layout_marginBottom="80dp"
android:background="@drawable/button_signin_background"
android:text="Sign in"
android:textAllCaps="false"
android:textColor="@android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</com.github.captain_miao.optroundcardview.OptRoundCardView>
</androidx.constraintlayout.widget.ConstraintLayout>Now open SIgnupActivity.java file and paste this code.
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.WindowManager;
public class SignupActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
getWindow().setStatusBarColor(Color.TRANSPARENT);
setContentView(R.layout.activity_signup);
}
}Now run this application and see how it look like
Download source code from here-> https://github.com/MonsterTechnoGit/-2-Sign-in—Sign-up-UI-design-2019
It's very nice
UI Course Online
Hey there! Would you mind if I share your blog with my twitter group? There’s a lot of folks that I think would really enjoy your content. Please let me know. Thank you