Styling TextInput Layout with material design library

Google release material design library which provides with material design styles for different components which can be customized.


To get started you need to include material design library into your gradle file provided on this link : https://material.io/develop/android/docs/getting-started


TextInputLayout provides different material styles

• Widget.MaterialComponents.TextInputLayout.FilledBox
• Widget.MaterialComponents.TextInputLayout.OutlinedBox

for using above material themes you are required to use parent theme as parent="Theme.MaterialComponents.Bridge" this can become issue if you are using some old parent theme for your application changing the parent theme may change some UI are looking before changing to Theme.MaterialComponents.Bridge in place of changing the parent theme for your application you can assign new material components theme at your activity level your layout xml file root layout android:theme = "material theme" to keep your current dialogs and other UI behavior doesn't change and over the time migrate your application theme to new material library and use at application level.


new material design textInput style provides multiple properties to customize the design.


PART 1:  Widget.MaterialComponents.TextInputLayout.FilledBox

using FilledBox provides boxed style for your TextInputLayout


you can explore list of properties on this link : https://material.io/develop/android/components/text-fields

changing the background of the box : app:boxBackgroundColor="@color/black"

you can set the corner radius :

app:boxCornerRadiusBottomEnd="0dp"
app:boxCornerRadiusTopStart="0dp"

one of new useful property provided is app:endIconMode there are different values that you can pass on that

app:endIconMode="clear_text"

"clear_text" displays the clear icon with TextInputLayout which use can click clear icon and clear the text of the input layout. [Note : issue when endIconmode not visible with custom text watcher in older version https://www.prodbugs.com/2020/10/clear-icon-not-visible-in.html]


you can change the endIconMode app:endIconTint="@color/black" by default some time clear icon was not showing up passing the tintMode color did trick to icon to show up.

there are other app:endIconMode values includes password toggle, dropdown_menu, custom you can find more detail here : https://material.io/develop/android/components/text-fields


app:boxStrokeColor

boxStrokeColor provides way of modify the bottom line in textInputLayout by default it shows your primary color as bottom line color as show below 

If you want to remove bottom line you can modify boxStrokeColor initially setting boxStrokeColor transparent or same as the boxBackground color didn't work but there is way to modify that with selector color https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/res/color/mtrl_filled_stroke_color.xml

set transparent color for focused <item android:color="#00FFFFFF" android:state_focused="true" /> and it will remove the bottom border line color

this will still show red line on error which require app:ErrorEnabled property true for error

   

you can change the box color programmatically say you want to change box color on error to red you can do by textInputLyt.setBoxBackgroundColorResource(R.color.error_background) 

there are some new properties app:suffixText="Hey test" suffixTextColor prefixText prefixColor
so far trying suffixText seems to be always displaying clear icon if you set app:endIconMode="clear_text" regardless if text field is empty when it's focused.

app:suffixText, prefixText properties are not available in stable 1.1.0 version you check on rc version 1.2.0

PART 2 : OutlinedBox

another style provided my material design library is Widget.MaterialComponents.TextInputLayout.OutlinedBox extending that provides bordered box style for input text layout.

same as Box style you can customize border for OutlinedBox with app:boxStrokeColor and providing color selector.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/holo_blue_dark" android:state_focused="true" />
    <item android:color="@android:color/black" />
</selector>

like above you can provide default border and change border color with focused state there are other properties in selector sample can be found here https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/res/color/mtrl_filled_stroke_color.xml

and the material design website provided sample example on how it looks out with different status in selector which can be found here : https://material.io/components/text-fields#outlined-text-field

setting error provides red outline box border with error message you provide. 

another interesting  property which provides setting helper text

app:helperText="*Required"
app:helperTextTextColor="@android:color/black"

without setting  app:helperTextTextColor helper text was not showing up so had to set color. same property can be used with OutlinedBox

complete style hierarchy for TextInputLayout :  https://www.prodbugs.com/2020/10/setting-app-level-theme-for.html