How to Use Material Text Input Layout in Android?
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.
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 > |
More Optimisation
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 > |