Create a Stylish Android Login Screen

How to create a stylish Android Login Screen

Hi guys!!! Today let's create an Android login screen that looks stylish.

This is the design we are going to create for the login screen.

                                                         image source: Unsplash

Ignore the facebook log in button. I will share a separate post on how to add login with facebook in another tutorial.

Ok let's dive into the coding part:


Firstly, let's see the code to get that rectangle box. Here is the code:
put this code in res/drawable folder

Take shape as a rectangle and add a stroke of 2 dp, corner radius as 10 dp, padding-bottom, left, right, top as 4dp,6dp,6dp,4dp respectively.

Android Login Screen Code in XML:

Linear Layout is the parent layout with the orientation vertical and inside there are children like card views, relative layouts, etc. Here is the code for the textviews that are on the top of the screen.

Down to that, I have one relative layout and a card view in it. Use the drawable file that we created above as background for the relative layout. Inside the card view again I have a relative layout which consists of an Edit Text, image, and view to show the white line that separates the image from edit Text.


This is for button down to the Edit Texts. Instead of a button, I used TextView. If you want to use Button instead you can even use that.

For remaining textviews:


Here is the entire android login screen design source code:


Note: Do not forget the image that is showing in the background, I added it as the background for the parent/root layout i.e Linear layout.

Happy coding!!!

Read my another blog post about Android game here
Follow @justdurgahere