Beautiful design is another important thing in app development. No matter how fantastic idea or your app is, there’S always a possibilities to lose your users if your app looks boring. So designing a good UI it’s a crucial part. There are some methods and good practices you can follow to boost up the development speed and make you app responsive in all screen. Here we will make an login UI according to the picture bellow.
Its pretty nice right? This UI is taken from UPLABS and it’s designed by Scouser. So to make this kind of UI we need to follow the layer strategy. One layout on top of other layout. And beside this we always need to use vector graphics. Remember, always avoid use of png or jpg picture as graphics as much as possible. So lets get started.
Table of Contents
Generating the assets
In the picture above we can see that there is no action bar available. There are some edittexts, buttons and some textviews. And the primary thing is the blueish colored oval shape. We have to make a vector image of this oval. Gravit is an awesome tool to design these kind of images and icon and so many more. You can use it online. No need to download. Here is the link. I have already created the vector oval shape image from there. And also there are some other icons for gmail, facebook and twitter. You can download the files from bellow. and add these in your drawable folder. To get other vector icons for free you can visit materialdesignicons. There are lots of icons available. All of them are very much compatible and free to use.
| Icon | Links | types |
|---|---|---|
| Oval | download | .xml |
| download | .xml | |
| download | .xml | |
| download | .xml |
Creating the layout
Notice that the oval shape is covering almost 2 3rd of the screen. We can use RelativeLayout as root and inside that place a Linearlayout containing the match_parent height and width. In the Linearlayout we can use layout_weight to define the portion. After this LinearLayout we can add other views to make the UI look like the same. Below the whole code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_weight="4"
android:src="@drawable/ic_login"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="0dp" />
<View
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
</LinearLayout>
<LinearLayout
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_margin="?actionBarSize"
android:textStyle="bold"
android:textSize="40sp"
android:textColor="#fff"
android:text="Sign in"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:textColor="#fff"
android:textColorHint="#eee"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:hint="Email"
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@drawable/rounded_corner"
android:textSize="17sp" />
<EditText
android:textColor="#fff"
android:textColorHint="#eee"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:hint="Password"
android:inputType="textPassword"
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@drawable/rounded_corner"
android:textSize="17sp" />
<Button
android:paddingRight="20dp"
android:paddingLeft="20dp"
android:background="@drawable/round_corner_buttom"
android:text="sign in"
android:textColor="#777"
android:layout_width="wrap_content"
android:layout_height="35dp" />
<TextView
android:layout_marginTop="20dp"
android:textColor="#fff"
android:text="Forgot Password?"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_marginBottom="30dp"
android:gravity="center"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_marginBottom="10dp"
android:text="Or Signup with"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:layout_marginRight="15dp"
android:background="@drawable/google"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageButton
android:layout_marginRight="15dp"
android:background="@drawable/facebook_box"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageButton
android:background="@drawable/twitter"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Round corners shapes
We can see that custom edit text in picture has slightly rounded corner. Its very easy to make. We are gonna need to create drawable xml files for edittext and buttons as well. So here is the code for each files:
rounded_corner.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ddBD96FF"/>
<corners
android:bottomRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:topLeftRadius="5dip"
android:topRightRadius="5dip"/>
</shape>
rounded_corner_button.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ddd"/>
<corners
android:bottomRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:topLeftRadius="5dip"
android:topRightRadius="5dip"/>
</shape>
Remove the ActionBar
ActionBar is not necessary in this UI. And also we need to change the statusbar and statusbar icon color. We can do it programmatically. Just add the below code in MainActivity.java just before the setContentView() line to modify the statusbar:
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
Window w = getWindow();
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
Then just hide the actionbar like this: getSupportActionBar().hide();. That’s it we are done. The whole thing should be look like this:
The Concept UI
UI in real life phone with notch