nice login UI design in android

Post Views: 1,999

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
Facebook	download	.xml
Google	download	.xml
Twitter	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: