Android Login Screen Design with TextInputLayout & Button Design

Android Login Screen Design with TextInputLayout & Button Design

Table of Contents

Hi everyone, in this post, we will learn about another component of Android which is TextInputLayout & Button Design. In this android TextInputLayout & Button Design example, we will learn how to use TextInputLayout & Button Design.

it is a very easy and nice layout to show hints on the top of the layout.

Step 1: First one to Start Android Studio

Step 2 : Seconds step to Create a New Project Project ClickOn ==> File ==> NEW ==> New Project

Step 3: Create an Activity Log in

Open Your login_activity.xml and follow this code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@color/white"
    tools:context="codeplayon.com.Log_In">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="30dp"
            android:text=" Welcome to  "/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="25dp"
            android:textColor="@color/colorAccent"
            android:text="Codeplayon.com"/>


        <android.support.design.widget.TextInputLayout
            android:id="@+id/namelayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint=" Enter your login UserID"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:textColorHint="@color/colorAccent"
            android:layout_marginTop="80dp">


            <EditText
                android:id="@+id/editemail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:drawablePadding="5dp"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="15dp"
                android:backgroundTint="@color/colorPrimaryDark" />

        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:id="@+id/passlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:textColorHint="@color/colorAccent"
            android:hint=" Password">

            <EditText
                android:id="@+id/editpass"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:drawablePadding="5dp"
                android:inputType="textPassword"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="15dp"
                android:backgroundTint="@color/colorPrimaryDark"
                />

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

        <Button
            android:id="@+id/LogInBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_gravity="center"
            android:background="@drawable/button"
            android:text="Login"
            android:textAppearance="?android:textAppearanceLarge"
            android:textStyle="bold"
            android:paddingRight="20dp"
            android:paddingLeft="20dp"
            android:textColor="@color/White"/>
        <TextView
            android:id="@+id/ForgotPassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:layout_gravity="right"
            android:layout_marginRight="30dp"
            android:textColor="@color/colorPrimaryDark"
            android:text="Forgot Password?"/>


    </LinearLayout>


</LinearLayout>

Step 4: Create a Drawable file button.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimaryDark"/>
    <stroke android:width="1dip" android:color="@color/White" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip"
        android:right="0dip" android:bottom="0dip" />
</shape>

Complte project run these project and test it