UI Design: Food Delivery Login Screen

Hello Again, We are going to implement the ui design of “News Feed Concept” (Link: https://material.uplabs.com/posts/news-feed-app-concept).

 

We are going to learn :

1. Draw a customize layout design
2. Using a TextInputLayout View
3. Using Fonts to apply to Text
4. Set Screen Orientation programmatically
5. Set Status Bar color as you want.

For learning fonts, screen orientation,status bar color ,please checkout my previous post: A News Feed Design

Let’s start with the Layout:

Final Layout seems like this:

Resources required:

1. Background Color: “#ff1940” Red Color Shade
2. Logo of deliva
3. icons for facebook ,google, right arrow
4. Font : lato.ttf

1. We are going to use color at more than one place, so better is to keep is globally defined in colors.xml(add below tag statement under resources tag):

<color name="deliBackgnd">#ff1940</color>

2,3. For logo,icons :You can get Resources from Photoshop Design File (.psd file : Download it and open in photoshop)

4. For Fonts you can visit your systems font folder (location: C:\Windows\Fonts)

So we are ready with our resources,

Now let’s start layout designing,

So ,we are going to use Views and ViewGroups as follows:

• Relative Layout
• ImageView
• Custom Linear Layout
• TextInputLayout with TextInputEditText
• Floating Action Button
• TextView

We will put the UI into groups:

1. First Group: Relative Layout which is going to hold all groups which contains data.
2. Second Group: ImageView for showing Deliva Logo
3. Third Group: Custom Linear Layout with vertical orientation holding TextInputLayout with TextInputEditText for input username, TextInputLayout with TextInputEditText for input password, Floating Action Button for Log-in.
4. Fourth Group: Relative Layout with ImageView  for facebook and google sign-in indicators.
5. Fifth Group: TextView For Sign-up Message.

content_delivery.xml Layout:

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="***Your Package Name***.DeliveryActivity"
    tools:showIn="@layout/activity_delivery"
    android:id="@+id/container"
    android:background="@color/deliBackgnd">

    <ImageView
        android:id="@+id/imglogo"
        android:layout_marginTop="15dp"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/deliverylogo"
        android:layout_centerHorizontal="true"/>

    <***Your Package Name***.CustomCut
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/customeLogin"
        android:layout_below="@+id/imglogo"
        android:layout_above="@+id/otheroptns"
        android:layout_marginRight="5dp"
        android:layout_marginLeft="5dp"
        android:background="@color/deliBackgnd"
        android:visibility="visible"
        android:orientation="vertical"
        >
        <TextView
            android:id="@+id/tvdelivery"
            android:text="Login"
            android:textSize="20dp"
            android:textColor="@color/deliBackgnd"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:id="@+id/tilusername">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Username"
                />

        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:id="@+id/tilpassword">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                />

        </android.support.design.widget.TextInputLayout>

        <TextView
            android:id="@+id/tvfordelipass"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Forget Password?"
            android:layout_marginRight="50dp"
            android:layout_gravity="end"/>

        <android.support.design.widget.FloatingActionButton
               android:id="@+id/fab"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_gravity="bottom|end"
            android:layout_marginTop="60dp"
            android:layout_marginRight="25dp"
            app:fabSize="auto"
            app:srcCompat="@drawable/ic_gonext_64dp" />

    </***Your Package Name****.CustomCut>
    <RelativeLayout
        android:id="@+id/otheroptns"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tvsignupin"
        android:layout_centerHorizontal="true"
        android:layout_margin="5dp">
        <ImageView
            android:id="@+id/fbhandle"
            android:src="@drawable/ic_facebook_92dp"
            android:layout_width="45dp"
            android:layout_marginRight="5dp"
            android:layout_height="45dp" />
        <ImageView
            android:id="@+id/googlehandle"
            android:layout_toRightOf="@+id/fbhandle"

            android:src="@drawable/ic_google_64dp"
            android:layout_width="45dp"
            android:layout_height="45dp" />


    </RelativeLayout>

    <TextView
        android:id="@+id/tvsignupin"
        android:text="@string/divertmsgtosignup"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="40dp"
        android:layout_centerHorizontal="true"
        android:textColor="#fcfcfc"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

Note: Do pay attention on bold highlighted text. You may noticed something like CustomeCut in Third Group.

Its a custom view inherited from Linear Layout View Group. Now we are going to customize linear layout using some methods and put them to work as we want in design.

Go to java folder, Create a class CustomCut under the package, and extend it with Linear Layout.

CustomCut.java Code:

public class CustomCut extends LinearLayout{
    private Context mcontext;
    private int parentWidth;
    private int parentHeight;

    public CustomCut(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mcontext=context;
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        parentWidth = MeasureSpec.getSize(widthMeasureSpec);
        parentHeight = MeasureSpec.getSize(heightMeasureSpec);
        this.setMeasuredDimension(parentWidth, parentHeight);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        Paint paint = new Paint();


        CornerPathEffect corner=new CornerPathEffect(120f);
        paint.setPathEffect(corner);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            paint.setColor(mcontext.getColor(android.R.color.white));
        }else{
         //You can give support for below marshmellow android version   

        }
        
        parentHeight=parentHeight-180;
        parentWidth=parentWidth-30;

        int x=50,y=0;
        path.moveTo(x, y); //start point Top Left
        path.lineTo(parentWidth, 0); //Top Right
        path.lineTo(parentWidth, parentHeight); // Bottom right
        path.lineTo(x,(parentHeight)-(parentHeight/4) ); // Bottom Left
        path.lineTo(x,y); //Back to Top Left first point.
        path.close();

        canvas.drawPath(path, paint);
        super.onDraw(canvas);
    }
}

To Give a Rounded Corners to Layout, we used CornerPathEffect and set to Paint.

This is how we can design layout using Path class and then Paint it using Paint class.  If you want to draw any new dimensions to layout you can go with changes in onDraw method.

Using onMeasure() we get the dimension of layout, and we can use it on onDraw method to take changes accordingly.

Now ,lets move to ActivityDelivery.java:

• We are going to hide toolbar
• Setting layout only for potrait mode.
• Setting up status bar color only if android version is above lollipop version.
• Applying fonts.

package ***Your-Package-Name***;
import android.content.pm.ActivityInfo;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TextInputEditText;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class DeliveryActivity extends AppCompatActivity {

TextView tvlogin,tvforgetpasswd;
EditText etusername,etpassword;
FloatingActionButton fbtnsubmit;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_delivery);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().hide();
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().setStatusBarColor(getResources().getColor(R.color.deliBackgnd));
        }


        tvlogin=(TextView)findViewById(R.id.tvdelivery);
        tvforgetpasswd=(TextView)findViewById(R.id.tvfordelipass);
        etpassword=((TextInputLayout)findViewById(R.id.tilpassword)).getEditText();
        etusername=((TextInputLayout)findViewById(R.id.tilusername)).getEditText();

        Typeface typefont=Typeface.createFromAsset(getAssets(),"fonts/lato.ttf");
        tvlogin.setTypeface(typefont);
        tvforgetpasswd.setTypeface(typefont);


        fbtnsubmit = (FloatingActionButton) findViewById(R.id.fab);
        fbtnsubmit.setImageResource(R.drawable.ic_gonext_64dp);
        fbtnsubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Redirecting to Home..", Snackbar.LENGTH_LONG).show();
            }
        });
    }
}

That’s it, now its time to run your app . It’s great yaa.. Any douts ,questions are welcome.

Thank You. Don’t Forget to share it with Your Needy Friends. They will learn and love it. Also do comment, if you like it or if you feel useful.

Check out project file we implemented .Click on FoodDeliveryConcept .Thank You.