Text Field Material Design | CodersArts

Updated: Dec 22, 2020

Text field material design basically help us to design attractive Ui for login and register page we are able to add validation also there.


In input text material design Implementation first we need to add dependency for material design

In App-> Gradle Script -> Build.gradle


implementation 'com.google.android.material:material:1.0.0'


  1. 2. In Login Activity.xml we need implement Text materialInput layout

  2. TextInputEditText


  1. <com.google.android.material.textfield.TextInputLayout android:layout_marginRight="15dp" android:layout_marginLeft="15dp" android:layout_marginTop="50dp" android:hint="Username" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dene"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/user" android:inputType="text" android:layout_width="match_parent" android:layout_height="wrap_content"/>


  1. implementation Outline of EditText


style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dene">

Outline box is above the box that is know as outline box



  1. FeildText

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">

When we filling the text inside field that is knows as text field like in above text is inside the field inside the text field





Diff b/w FilledBox and Outline text box


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:layout_height="match_parent" android:orientation="vertical" tools:context=".RegisterActivity"> <com.google.android.material.textfield.TextInputLayout android:layout_marginRight="15dp" android:layout_marginLeft="15dp" android:layout_marginTop="50dp" android:hint="Username" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/user" android:inputType="text" android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout> <com.google.android.material.textfield.TextInputLayout android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense" android:layout_marginTop="140dp" android:hint="Full Name"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/name" android:inputType="text" android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout> <com.google.android.material.textfield.TextInputLayout android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense" android:layout_marginTop="220dp" android:hint="Email"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/email" android:inputType="textEmailAddress" android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout> <com.google.android.material.textfield.TextInputLayout android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense" android:layout_marginTop="300dp" android:hint="Password"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/pass" android:inputType="textPassword" android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout> <Button android:layout_marginRight="15dp" android:layout_marginLeft="15dp" android:id="@+id/register" android:layout_marginTop="400dp" android:hint="Go" android:background="#fffff0" android:layout_width="match_parent" android:layout_height="wrap_content"/> </RelativeLayout>



Hire an android developer to get quick help for all your android app development needs. with the hands-on android assignment help and android project help by Codersarts android expert. You can contact the android programming help expert any time; we will help you overcome all the issues and find the right solution.

Want to get help right now? Or Want to know price quote

Please send your requirement files at contact@codersarts.com. and you'll get instant reply as soon as requirement receives





Contact Us

Tel: (+91) 0120  4118730  

Time :   10 : 00  AM -  08 : 00 PM IST 

Registered address: G-69, Sector 63, 

 Noida - 201301, India

We Provide Services Across The different countries

USA    Australia   Canada   UK    UAE    Singapore   New Zealand    Malasia   India   Ireland   Germany

CodersArts is a Product by Sofstack Technology Solutions Pvt. Ltd.

  • CodersArts | Linkedin
  • Instagram