Text Field Material Design | CodersArts

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

<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