---
title: "Styles Login form in Android"  
description: "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 hi"  
author: "Arti Mishra"  
published: 2018-04-05  
updated: 2020-03-04  
canonical: https://www.mindstick.com/articles/12852/styles-login-form-in-android  
category: "android apps"  
tags: ["android"]  
reading_time: 14 minutes  

---

# Styles Login form in Android

Getting started first we will discuss how to create [login form](https://www.mindstick.com/forum/98/login-form-in-c-sharp) in our [Android App](https://answers.mindstick.com/qa/94431/what-is-the-best-thing-to-do-when-an-android-app-says-that-it-is-not-responding). 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](https://www.mindstick.com/interview/1126/does-silverlight-web-application-work-with-all-browsers). 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](https://www.mindstick.com/forum/160822/why-am-i-unable-to-log-in-even-though-my-username-and-password-are-correct-in-mindstick-training) 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 –

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

**Define a button with login text.** \

```
<Buttonandroid: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](https://www.mindstick.com/forum/156679/select-any-parent-element-of-any-tag-via-jquery). It also allows you to position the component anywhere which you want, so it is [considered as](https://yourviews.mindstick.com/story/2050/here-the-facts-due-to-which-india-is-considered-as-a-vishwa-guru) 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](https://answers.mindstick.com/qa/109503/how-to-freeze-rows-and-columns-in-excel). 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](https://answers.mindstick.com/qa/102632/what-is-the-significance-of-google-s-material-design-for-user-interfaces). 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](https://www.mindstick.com/forum/157863/how-do-you-use-templates-in-knockoutjs-to-create-reusable-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 :

![Styles Login form in Android](https://www.mindstick.com/mindstickarticle/4ac73714-02c6-4a1f-af0c-1c3218ea9e75/images/f68d1c00-dfc9-45c5-b2d3-d306dcb65813.png)\

## 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 :

![Styles Login form in Android](https://www.mindstick.com/mindstickarticle/4ac73714-02c6-4a1f-af0c-1c3218ea9e75/images/7e308e04-d6e6-4c78-931b-de4a5f7dc6cc.png)**\**

## 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 :

![Styles Login form in Android](https://www.mindstick.com/mindstickarticle/4ac73714-02c6-4a1f-af0c-1c3218ea9e75/images/8abf80a3-a3bf-4a52-9db5-39e6bb0636eb.png)

---

Original Source: https://www.mindstick.com/articles/12852/styles-login-form-in-android

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.