Getting started first we will discuss how to create login form in our Android App. This is required for any android app, where the user is login to his/her account.

A login form is a screen asking your credentials to login any particular web application. You might have seen if we login any specific account first we fill required field.

Here we explains, how to create a login screen and how to manage required field when false attempts are made.

First you have to define two EditText asking username and password of the user & after that we have to create login button. The password EditText must have inputType set to password. Its syntax is given below –

<EditText
android:id=”@+id/editText1”
android:layout_height=”wrap_content”
android:layout_height=”wrap_content”
/>
<EditText
android:id=”@+id/editText2”
android:layout_height=”wrap_content”
android:layout_height=”wrap_content”
android:inputType=”textPassword”
/>

Define a button with login text. 

<Button
android:id=”@+id/button1”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Login” />

Android Layout:

1. Relative Layout

Relative Layout specify how child element are positioned relative to each other. The position of each view can be specified as relative to its sibling elements or relative to the parent element. It also allows you to position the component anywhere which you want, so it is considered as most flexible layout.

2. Linear Layout 

Android Linear layout is a ViewGroup that aligns all children in a single direction, either vertically or horizontally.

3. Table Layout 

Android Table Layout going to be arranged groups of views into rows and columns. You will use the <TableRow> element to build a row in the table. Each row has zero or more cells; each cell can hold one View object.

CardView: 

CardView is major part of UI Widgets that introduced in Material Design. CardView represent the information in a card manner with a drop shadow (elevation) and corner radius which looks consistent across the platform. CardView extends all the feature of Frame Layout and it’s our own feature.

You can achieve good looking UI components when CardView is combined with RecyclerView. In this post we are going to learn how to integrate CardView by creating an android login form that displays cardView .

First Layout 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:background="#C0C0C0"
    android:layout_gravity="center"
    android:layout_height="match_parent"
    tools:context="com.example.msclient009.loginform.MainActivity">
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_margin="20dp"
        android:layout_gravity="center"
        card_view:cardCornerRadius="20dp"
        android:layout_height="wrap_content">
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TableRow>
           <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="200dp">
                <TextView
                    android:id="@+id/text1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="55dp"
                    android:layout_marginStart="55dp"
                    android:drawableLeft="@drawable/user"
                    android:gravity="center"
                    tools:layout_editor_absoluteX="68dp"
                    tools:layout_editor_absoluteY="0dp" />
            </LinearLayout>
        </TableRow>
        <TableRow>
            <LinearLayout
                android:layout_width="50dp"
                android:orientation="horizontal"
                android:layout_marginLeft="50dp"
                android:background="#C0C0C0"
                android:layout_height="50dp">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/ic_account_circle_black_24dp"/>
                <EditText
                    android:id="@+id/textView1"
                    android:layout_width="270dp"
                    android:background="#C0C0C0"
                    android:layout_height="wrap_content"
                    android:hint="User Name...."
                    android:textColorHint="#fff"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="left"
                    android:padding="10dp"
                    />
            </LinearLayout>
        </TableRow>
        <TableRow>
            <LinearLayout
                android:layout_width="50dp"
                android:orientation="horizontal"
                android:layout_marginLeft="50dp"
                android:layout_marginTop="20dp"
                android:background="#C0C0C0"
                android:layout_height="50dp">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/ic_lock_black_24dp"/>
                <EditText
                    android:id="@+id/textView2"
                    android:layout_width="270dp"
                    android:layout_height="wrap_content"
                    android:background="#C0C0C0"
                    android:hint="Password...."
                    android:textColorHint="#fff"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="left"
                    android:padding="10dp" />
            </LinearLayout>
        </TableRow>
        <TableRow>
            <LinearLayout
                android:layout_width="200dp"
                android:layout_height="wrap_content">
                <Button
                    android:layout_width="150dp"
                    android:layout_height="50dp"
                    android:layout_marginLeft="100dp"
                    android:layout_marginTop="20dp"
                    android:background="#1E90FF"
                    android:text="Login"
                    android:layout_marginBottom="20dp"
                    android:textColor="#fff"
                    android:textSize="20dp"
                    android:textStyle="bold" />
            </LinearLayout>
        </TableRow>
    </TableLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>

Output :

Second Layout Code: 

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/backimage"
    xmlns:card_view="http://schemas.android.com/apk/res-auto">
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view2"
        android:layout_width="match_parent"
        android:layout_margin="50dp"
        card_view:cardCornerRadius="20dp"
        android:layout_height="300dp">
        <TableLayout
            android:layout_width="329dp"
            android:layout_height="match_parent"
            android:background="@drawable/background2">
            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#fff"
                android:gravity="center"
                android:padding="10dp"
                android:text="Sign Up"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textColorHint="#fff"
                android:textStyle="bold" />
            <TableRow>
                <LinearLayout
                    android:layout_width="200dp"
                    android:layout_height="50dp"
                    android:layout_marginLeft="50dp"
                    android:layout_marginTop="25dp"
                    android:background="#fff"
                    android:orientation="horizontal">
                    <ImageView
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:layout_marginTop="5dp"
                        android:background="#fff"
                        android:src="@drawable/ic_account_circle_black_24dp" />
                    <EditText
                        android:layout_width="200dp"
                        android:layout_height="match_parent"
                        android:background="#fff"
                        android:hint="User Name..." />
                </LinearLayout>
            </TableRow>
            <TableRow>
                <LinearLayout
                    android:layout_width="200dp"
                    android:layout_height="50dp"
                    android:layout_marginLeft="50dp"
                    android:layout_marginTop="25dp"
                    android:background="#fff"
                    android:orientation="horizontal">
                    <ImageView
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:layout_marginTop="5dp"
                        android:background="#fff"
                        android:src="@drawable/ic_lock_black_24dp" />
                    <EditText
                        android:layout_width="200dp"
                        android:layout_height="match_parent"
                        android:background="#fff"
                        android:hint="Password..."
                        android:textColorHint="#A9A9A9" />
                </LinearLayout>
            </TableRow>
            <TableRow>
                <LinearLayout
                    android:layout_width="200dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="15dp">
                    <Button
                        android:layout_width="120dp"
                        android:layout_height="50dp"
                        android:layout_marginLeft="40dp"
                        android:background="#fff"
                        android:text="Login"
                        android:textColor="#000"
                        android:textSize="20dp"
                        android:textStyle="bold" />
                </LinearLayout>
            </TableRow>
        </TableLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>

Output :

Third Layout Code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@drawable/green"
    android:layout_gravity="center"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:elevation="50dp"
        android:background="@drawable/user8" />
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_margin="50dp"
        android:layout_gravity="center"
        android:background="#98FB98"
        card_view:cardCornerRadius="20dp"
        android:layout_height="wrap_content">
        <TableLayout
            android:layout_width="wrap_content"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="40dp"
            android:layout_height="wrap_content">
            <TableRow>
                <LinearLayout
                    android:layout_width="100dp"
                    android:layout_height="50dp"
                    android:layout_marginTop="30dp"
                    android:background="@drawable/rounded_edittext"
                    android:orientation="horizontal">
                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:src="@drawable/ic_account_circle_black_24dp" />
                    <EditText
                        android:id="@+id/textView1"
                        android:layout_width="190dp"
                        android:layout_height="wrap_content"
                        android:gravity="left"
                        android:hint="User Name...."
                        android:padding="10dp"
                        android:textAppearance="?android:attr/textAppearanceLarge"
                        android:textColorHint="#000" />
                </LinearLayout>
            </TableRow>
            <TableRow>
                <LinearLayout
                    android:layout_width="200dp"
                    android:layout_height="50dp"
                    android:layout_marginTop="30dp"
                    android:background="@drawable/rounded_edittext"
                    android:orientation="horizontal">
                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:src="@drawable/ic_lock_black_24dp" />
                    <EditText
                        android:id="@+id/textView2"
                        android:layout_width="190dp"
                        android:layout_height="wrap_content"
                        android:gravity="left"
                        android:hint="Password...."
                        android:padding="10dp"
                        android:textAppearance="?android:attr/textAppearanceLarge"
                        android:textColorHint="#000" />
                </LinearLayout>
            </TableRow>
            <TableRow>
                <LinearLayout
                    android:layout_width="200dp"
                    android:layout_height="wrap_content">
                    <Button
                        android:layout_width="200dp"
                        android:layout_height="50dp"
                        android:layout_marginBottom="20dp"
                        android:layout_marginTop="30dp"
                        android:background="@drawable/rounded_edittext"
                        android:text="Login"
                        android:textColor="#000"
                        android:textSize="20dp"
                        android:textStyle="bold" />
                </LinearLayout>
            </TableRow>
        </TableLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>

Output :