Skip to content

Captaindroid

Android Tutorial

  • Home
  • Blog
    • Android
    • Java
    • Tutorials
    • News
  • About
    • About me
    • Contact us
  • Privacy Policy
  • Write For Us

Nice login UI design in android

March 9, 2019April 11, 2020 TusharAndroid, Tutorials, Uncategorized

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

5+
androidandroid studiobest practicedesigndrawablelayout designloginlogin UIUIvector

Post navigation

Basic interview questions for android job
What is Java?

Recommended For You

Categories

  • Android
  • Java
  • News
  • Tutorials
  • Uncategorized

Archives

  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • March 2019
  • February 2019
  • January 2019

Pages

  • About
  • Blog
  • Captain Torrent Downloader Privacy Policy
  • Contact us
  • Free Movies Online
  • Home
  • Homepage
  • My Contacts Privacy Policy
  • My Contacts Pro Privacy Policy
  • Privacy Policy
  • Write For Us

Categories

  • Android
  • Java
  • News
  • Tutorials
  • Uncategorized

Top Posts

  • Nice login UI design in android 6.4k views | 2 comments | by Tushar | posted on March 9, 2019 | under Android, Tutorials, Uncategorized
  • Can not resolve R in android studio 2.6k views | 0 comments | by Tushar | posted on February 27, 2019 | under Android, Tutorials, Uncategorized
  • Earning money with startapp 1.1k views | 1 comment | by Tushar | posted on February 23, 2019 | under Android, News, Tutorials, Uncategorized
  • Best practice Handling sharedpreferences in android 1.1k views | 0 comments | by Tushar | posted on March 3, 2019 | under Android, Tutorials, Uncategorized
  • What will Android look like in the next ten years? 886 views | 0 comments | by Tushar | posted on July 5, 2019 | under Android, News, Uncategorized
  • How to secure API key in android 540 views | 0 comments | by Tushar | posted on February 9, 2019 | under Android, Tutorials, Uncategorized
  • 5 Fundamentals to start Android app developing 500 views | 0 comments | by Tushar | posted on July 3, 2019 | under Android, Tutorials, Uncategorized
  • Important android libraries you must have to use 256 views | 0 comments | by Tushar | posted on March 2, 2019 | under Android, News, Tutorials, Uncategorized
  • OnePlus 7T might be first smartphone with Android 10 gonna be launched in this year. 246 views | 0 comments | by Tushar | posted on September 20, 2019 | under News
  • Huawei CEO says its Android alternative is ‘likely’ faster 244 views | 0 comments | by Tushar | posted on July 8, 2019 | under Android, News, Uncategorized

Captaindroid

Dhaka, bangladesh
wtushar09@gmail.com
+8801722043601
  • About
  • Blog
  • Captain Torrent Downloader Privacy Policy
  • Contact us
  • Free Movies Online
  • Home
  • Homepage
  • My Contacts Privacy Policy
  • My Contacts Pro Privacy Policy
  • Privacy Policy
  • Write For Us
Powered by WordPress | Theme: Astrid by aThemes.