
Hello Friends today we are going to design login screen by using LinearLayout. Login screen should be attractive it is first view which user interact with that’s why is should be user friendly as well. We will begin our designing by simply creating a new project.Login Screen Design In Android Studio.
Creating New Android Project (Login Screen Design In Android Studio)
- Create a new project in Android Studio File–>New–>New Project.
- Enter Application Name, Package Name, Select Empty Activity and click on finish.
Add Colors
- Open App–>values–>colors.xml
- Specify colors which we are going to use in app.
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="white">#FFFFFF</color> <color name="signupColor">#066e8a</color> </resources> |
Add Background Image And Logo
- Add background image and logo of your app.
- I will attack the sample background image and logo at the end of this blog.
- Paste file to mipmap folder.
Add Vector Drawable
- Add vector drawable which we are going to use in our project.
- Right click on Drawable folder then New–>Vector Asset.
- click on Icon then Select Icon and add it to on drawable folder.
- Add three vectors Person,Lock,Lock Open from Vector Asset.
- You can change color of vector drawable. To change color open that drawable and change FillColor value.
Make Rounded Corner EditBox and Button
- Right click on drawable folder–>New–>Drawable resource file.
- Write File Name and click Ok.
- We will create 3 create Drawable resource file one to make rounded corner of email and password edittext box and one for Login button and last for Signup button.
- We have to add this file to Background property of edittext box and button.
shapeemail.xml for email and password editbox
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@android:color/transparent"> </solid> <corners android:radius="25dp"> </corners> <stroke android:width="1dp" android:color="#FFF"> </stroke> <padding android:top="0dp" android:right="10dp" android:left="10dp" android:bottom="0dp"> </padding> </shape> |
shapelogin.xml for Login Button
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@android:color/white"> </solid> <corners android:radius="25dp"> </corners> <stroke android:width="1dp" android:color="#FFF"> </stroke> <padding android:top="0dp" android:right="10dp" android:left="10dp" android:bottom="0dp"> </padding> </shape> |
shapesignup.xml for signup button
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/signupColor"> </solid> <corners android:radius="25dp"> </corners> <stroke android:width="1dp" android:color="#FFF"> </stroke> <padding android:top="0dp" android:right="10dp" android:left="10dp" android:bottom="0dp"> </padding> </shape> |
Lets Design Login Screen
- Open activity.xml file and put add following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<?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" android:background="@mipmap/back" android:orientation="vertical" android:gravity="center" android:padding="20dp"> <ImageView android:layout_width="90dp" android:layout_height="wrap_content" android:src="@mipmap/login"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:padding="15dp" android:background="@drawable/shapeemail" android:drawableLeft="@drawable/ic_person_black_24dp" android:drawablePadding="10dp" android:hint="Email" android:textColor="@color/white" android:textColorHint="@color/white" android:textColorHighlight="@color/white"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:padding="15dp" android:background="@drawable/shapeemail" android:drawableLeft="@drawable/ic_lock_black_24dp" android:drawablePadding="10dp" android:hint="Password" android:textColor="@color/white" android:textColorHint="@color/white" android:textColorHighlight="@color/white"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Remember Me" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:layout_marginTop="0dp" android:textColor="@color/white" android:buttonTint="@color/white" android:checked="true"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Forget Password" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:layout_marginTop="0dp" android:textColor="@color/white" android:drawableLeft="@drawable/ic_lock_open_black_24dp" android:drawablePadding="6dp" android:padding="4dp"/> </LinearLayout> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Log In" android:shadowColor="@android:color/transparent" android:padding="15dp" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:layout_marginTop="0dp" android:background="@drawable/shapelogin"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Sign Up" android:shadowColor="@android:color/transparent" android:padding="15dp" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:layout_marginTop="0dp" android:background="@drawable/shapesignup" android:textColor="@color/white"/> </LinearLayout> |
Download Complete Project
Login Screen Design Complete Project
Subscribe To Our YouTube Channel
Like Us On Facebook
thank you so mush
attack the sample background image and logo at the end of this blog./////
/////where is that file
https://drive.google.com/file/d/1F3-b46zOKdx0etsWYggoySWBmlBrEluk/view?usp=sharing
hi, thank you for posting
is there any library like bootstrap for android?
There are many library available in github. Search what type you want.