Skip to content
No results
  • Home
  • Blog
    • Android
    • Java
    • Tutorials
    • News
  • About
    • About me
    • Contact us
  • Privacy Policy
  • Write For Us
Captaindroid
  • Home
  • Blog
    • Android
    • Java
    • Tutorials
    • News
  • About
    • About me
    • Contact us
  • Privacy Policy
  • Write For Us
Captaindroid

Nice login UI design in android

  • TusharTushar
  • March 9, 2019
  • Android, Tutorials, Uncategorized
  • 29 Comments
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
  • Creating the layout
  • Round corners shapes
  • Remove the ActionBar

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.

IconLinkstypes
Ovaldownload.xml
Facebookdownload.xml
Googledownload.xml
Twitterdownload.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

# android# android studio# best practice# design# drawable# layout design# login# login UI# UI# vector
Tushar
Tushar
Articles: 69
Previous Post Basic interview questions for android job
Next Post What is Java?
  • Ultimate Java 8 stream in details
  • Android operation system in details
  • Remarkable compare: Laptop processor vs desktop processor
  • Monitor Your Website’s Performance for These Surprising Benefits
  • Non killable background service in android

Related Posts

How Do I Find Good Android App Developers

Android operation system in details

  • January 3, 2023

Remarkable compare: Laptop processor vs desktop processor

  • January 1, 2023
performance-monitor

Monitor Your Website’s Performance for These Surprising Benefits

  • August 16, 2022
Copyright © 2023 - WordPress Theme by CreativeThemes