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
