Related Articles

Related Articles

How to Use Material Text Input Layout in Android?
  • Last Updated : 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 by Step Implementation

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.

add gradle file

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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.

Material Text Input Layout



Below is the complete code for the activity_main.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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>

chevron_right


More Optimisation

Step 5: Inside the “styles.xml” file write the following to make the outline of the desired choice. 

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Step 6: Now use them inside the shapeAppearance property of TextInputLayout. It will result in the following design.

Material Text Input Layout

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output UI:

Material Text Input Layout

My Personal Notes arrow_drop_up
Recommended Articles
Page :