Day 2: Login and Signup Screen UI in Android(Shouse)

In this section, I'm going to cover UI design work for login and signup activity. Before developing any android app always remember that user interface performs the most important part to success your android application. 

For SHouse, We are going to use OTP authentication for login and if user not registered previously then he/she will redirect to personal details activity. I'm not covering backend part in this blog I'll do this part in next part. So let's start our UI design process step by step.

Step 1: As we are using MVVM design pattern so keep your everything structured. So, create a new package in the UI directory with name "Auth". After that create LoginActivity and SignupActivity in the Auth package. Your directory structure looks like as follow:

Step 2: For this application, I'm going to use two custom fonts one is Quntify and another is Raleway. So to implement these fonts in our application firstly I need to set up fonts in my resource directory. For this, I'm going to create a resource directory with name 'font' in res folder and past my font files in this folder. Click Here To Download Fonts

Step 3: Add all required drawable icon in the drawable resource directory. Click Here to Download All Used Drawable icon.  

Step 4: Add Colors in colors.xml. Your file looks like below:

	<?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="shadow_color">#C7D0F8</color>
	<!-- Button Color Shade-->
	<color name="colorBlue">#4A69FF</color>
	<color name="colorGreen">#4AD384</color>
	</resources>

view raw colors.xml hosted with ❤ by GitHub

Step 5: In the UI design we need to create Edit Text with round corners and shadow effects so perform this I'm going to create round_corner.xml drawable resource with the following code:

 

	<?xml version="1.0" encoding="utf-8"?>
	<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle" >
	<item>
	<shape>
	<stroke android:width="2.5dp"
	android:color="@color/shadow_color"/>
	<padding
	android:bottom="2dp"
	android:left="0.5dp"
	android:right="2dp"
	android:top="0.5dp"/>
	<corners android:radius="50dp"/>
	</shape>
	</item>
	<item>
	<shape>
	<solid android:color="#FFFFFF"/>
	<corners android:radius="50dp"/>
	</shape>
	</item>
	</layer-list>

view raw round_corner.xml hosted with ❤ by GitHub

In the above code first item create the shadow effect for our edit text. 

Step 6:  Similarly we need to create a rounded button with a gradient colour effect. So, I created round_button.xml drawable resource for this effect. 

	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<gradient
	android:startColor="@color/colorBlue"
	android:endColor="@color/colorGreen"
	android:angle="0"/>
	<corners android:radius="50dp"/>
	</shape>

view raw round_button.xml hosted with ❤ by GitHub

Step 7: This is the last setup for our design process is to add all strings related to login and signup activity in our strings.xml file. Its good practice to put all string in this resource file it will mostly help if your app required the same text repeatedly or if you want to develop your app in different languages. The strings.xml file looks like below: 

	<resources>
	<string name="app_name">SHouse</string>
	<!-- Login and Sign Up Activity-->
	<string name="welcome">Welcome</string>
	<string name="enterMobile">Enter Your Mobile Number</string>
	<string name="mobile">Mobile Number</string>
	<string name="getOtp">Get OTP</string>
	<string name="otp">OTP</string>
	<string name="personalDetails">Personal Details</string>
	<string name="fullName">Full Name</string>
	<string name="email">Email ID</string>
	<string name="address">Address</string>
	<string name="city">City</string>
	<string name="pin">Pin Code</string>
	<string name="next">Next</string>
	</resources>

view raw strings.xml hosted with ❤ by GitHub

Step 8: That's it. We completed the entire setup process now open activity_login.xml layout file and paste the following code for login UI.

	<?xml version="1.0" encoding="utf-8"?>
	<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".UI.Auth.LoginActivity">
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center"
	android:orientation="vertical"
	>
	<ImageView
	android:id="@+id/logo"
	android:layout_width="150dp"
	android:layout_height="100dp"
	android:layout_gravity="center_horizontal"
	android:src="@drawable/logo"
	android:contentDescription="@string/app_name"/>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/welcome"
	android:layout_gravity="center_horizontal"
	android:fontFamily="@font/quantify"
	android:textSize="42sp"
	android:textColor="@android:color/black"
	/>
	<TextView
	android:id="@+id/titleTextView"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:text="@string/enterMobile"
	android:fontFamily="@font/raleway"
	android:textSize="20sp"
	android:layout_marginTop="12dp"
	android:textColor="@android:color/black"
	/>
	<EditText
	android:id="@+id/mobileEditText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:layout_marginLeft="24dp"
	android:layout_marginRight="24dp"
	android:padding="12dp"
	android:inputType="number"
	android:layout_marginTop="12dp"
	android:drawableEnd="@drawable/ic_phone"
	android:background="@drawable/round_corner"
	android:hint="@string/mobile"
	android:autofillHints="@string/enterMobile"
	android:textSize="20sp"
	/>
	<EditText
	android:id="@+id/otpEditText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:layout_marginLeft="24dp"
	android:layout_marginRight="24dp"
	android:padding="12dp"
	android:inputType="number"
	android:layout_marginTop="12dp"
	android:visibility="gone"
	android:drawableEnd="@drawable/ic_lock"
	android:background="@drawable/round_corner"
	android:hint="@string/otp"
	android:autofillHints="@string/otp"
	android:textSize="20sp"
	/>
	<TextView
	android:id="@+id/actionBtnEditText"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:text="@string/getOtp"
	android:textAllCaps="false"
	android:textColor="@android:color/white"
	android:drawableEnd="@drawable/ic_next"
	android:background="@drawable/round_button"
	android:layout_marginTop="12dp"
	android:padding="8dp"
	android:textSize="16sp"
	android:textAlignment="center"
	/>
	</LinearLayout>
	</androidx.coordinatorlayout.widget.CoordinatorLayout>

view raw activity_login.xml hosted with ❤ by GitHub

Step 9: Similarly open activity_signup.xml layout and add the following code:

	<?xml version="1.0" encoding="utf-8"?>
	<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".UI.Auth.SignupActivity">
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center"
	android:orientation="vertical"
	>
	<ImageView
	android:id="@+id/logo"
	android:layout_width="150dp"
	android:layout_height="100dp"
	android:layout_gravity="center_horizontal"
	android:src="@drawable/logo"
	android:contentDescription="@string/app_name"/>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/welcome"
	android:layout_gravity="center_horizontal"
	android:fontFamily="@font/quantify"
	android:textSize="42sp"
	android:textColor="@android:color/black"
	/>
	<TextView
	android:id="@+id/titleTextView"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:text="@string/personalDetails"
	android:fontFamily="@font/raleway"
	android:textSize="20sp"
	android:layout_marginTop="12dp"
	android:textColor="@android:color/black"
	/>
	<EditText
	android:id="@+id/nameEditText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:layout_marginLeft="24dp"
	android:layout_marginRight="24dp"
	android:padding="12dp"
	android:inputType="text"
	android:layout_marginTop="12dp"
	android:drawableEnd="@drawable/ic_person"
	android:background="@drawable/round_corner"
	android:hint="@string/fullName"
	android:autofillHints="@string/fullName"
	android:textSize="20sp"
	/>
	<EditText
	android:id="@+id/emailEditText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:layout_marginLeft="24dp"
	android:layout_marginRight="24dp"
	android:padding="12dp"
	android:inputType="textEmailAddress"
	android:layout_marginTop="12dp"
	android:drawableEnd="@drawable/ic_mail"
	android:background="@drawable/round_corner"
	android:hint="@string/email"
	android:autofillHints="@string/email"
	android:textSize="20sp"
	/>
	<EditText
	android:id="@+id/addressEditText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:layout_marginLeft="24dp"
	android:layout_marginRight="24dp"
	android:padding="12dp"
	android:inputType="text"
	android:layout_marginTop="12dp"
	android:drawableEnd="@drawable/ic_home"
	android:background="@drawable/round_corner"
	android:hint="@string/address"
	android:autofillHints="@string/address"
	android:textSize="20sp"
	/>
	<EditText
	android:id="@+id/cityEditText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:layout_marginLeft="24dp"
	android:layout_marginRight="24dp"
	android:padding="12dp"
	android:inputType="text"
	android:layout_marginTop="12dp"
	android:drawableEnd="@drawable/ic_address"
	android:background="@drawable/round_corner"
	android:hint="@string/city"
	android:autofillHints="@string/city"
	android:textSize="20sp"
	/>
	<EditText
	android:id="@+id/pinEditText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:layout_marginLeft="24dp"
	android:layout_marginRight="24dp"
	android:padding="12dp"
	android:inputType="number"
	android:layout_marginTop="12dp"
	android:drawableEnd="@drawable/ic_location"
	android:background="@drawable/round_corner"
	android:hint="@string/pin"
	android:autofillHints="@string/pin"
	android:textSize="20sp"
	/>
	<TextView
	android:id="@+id/actionBtnEditText"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal"
	android:text="@string/next"
	android:textAllCaps="false"
	android:textColor="@android:color/white"
	android:drawableEnd="@drawable/ic_next"
	android:background="@drawable/round_button"
	android:layout_marginTop="12dp"
	android:padding="8dp"
	android:textSize="16sp"
	android:textAlignment="center"
	/>
	</LinearLayout>
	</androidx.coordinatorlayout.widget.CoordinatorLayout>

view raw activity_signup.xml hosted with ❤ by GitHub

Step 10: Almost Done! Run your project and check the output.