How to Use Material Text Input Layout in Android?

23 Oct, 2020
Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android application. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. If you like the way how the UI elements from Google Material Design Components for android which are designed by Google are pretty awesome, then here are some steps that need to be followed to get them, and one of them is Google Material Text Input Layout. So in this article, we’ll implement the Text Input Layout in android using the Material design library. 
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Add Required Dependency
Include google material design components dependency in the build.gradle file. After adding the dependencies don’t forget to click on the “Sync Now” button present at the top right corner.  
implementation ‘com.google.android.material:material:1.3.0-alpha02’
Note that while syncing your project you need to be connected to the network and make sure that you are adding the dependency to the app-level Gradle file as shown below.
Step 3: Change the Base application theme
Go to app -> src -> main -> res -> values -> styles.xml and change the base application theme. Below is the code for the styles.xml file.
XML
<resources>        <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>    </style>    </resources>
Step 4: Working with the activity_main.xml file
Inside the  activity_main.xml file use the following code. It will result in the following design.
Below is the complete code for the activity_main.xml file.
XML
<?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:orientation="horizontal"    tools:context=".MainActivity">      <com.google.android.material.textfield.TextInputLayout        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="Enter password"        app:endIconMode="password_toggle">          <com.google.android.material.textfield.TextInputEditText            android:layout_width="match_parent"            android:layout_height="wrap_content" />      </com.google.android.material.textfield.TextInputLayout>  </LinearLayout>
Step 5: Inside the “styles.xml” file write the following to make the outline of the desired choice. 
XML
<style name="Cut" parent="ShapeAppearance.MaterialComponents.MediumComponent">        <item name="cornerFamily">cut</item>        <item name="cornerSize">12dp</item></style>  <style name="Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent">        <item name="cornerFamily">rounded</item>        <item name="cornerSize">16dp</item></style>
Step 6: Now use them inside the shapeAppearance property of TextInputLayout. It will result in the following design.
XML
<com.google.android.material.textfield.TextInputLayout        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="Enter password"        app:endIconMode="password_toggle">          <com.google.android.material.textfield.TextInputEditText            android:layout_width="match_parent"            android:layout_height="wrap_content" />  </com.google.android.material.textfield.TextInputLayout>  <com.google.android.material.textfield.TextInputLayout        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="Enter password"        app:endIconMode="password_toggle"        app:endIconTint="@color/colorAccent"        app:shapeAppearance="@style/Cut">          <com.google.android.material.textfield.TextInputEditText            android:layout_width="match_parent"            android:layout_height="wrap_content" />  </com.google.android.material.textfield.TextInputLayout>  <com.google.android.material.textfield.TextInputLayout        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="Enter text"        app:endIconMode="clear_text"        app:endIconTint="@color/colorPrimaryDark"        app:shapeAppearance="@style/Rounded">          <com.google.android.material.textfield.TextInputEditText            android:layout_width="match_parent"            android:layout_height="wrap_content" />  </com.google.android.material.textfield.TextInputLayout>
android
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android SDK and it's Components
How to Communicate Between Fragments in Android?
Flutter - Custom Bottom Navigation Bar
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
Flutter - Stack Widget
Activity Lifecycle in Android with Demo App
Introduction to Android Development
Data Binding in Android with Example