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:

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:

 

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. 

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: 

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.

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

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