Helper Text for Android’s TextInputLayout
A feature that Google described but ‘nearly’ never delivered
Google has created a comprehensive guide for Material Design, their design language which is used in Android since API Level 21 (Android 5.0). With the different support libraries like the Design Support Library Google offers every Android developer a way to create apps using Material components following the design guide.
But some components described in detail by the Material Design guide are not fully implemented by the libraries as for example the Helper Text below a text field. The guide describes the Helper Text in detail like any other component.
As we are not the first to come by this missing feature of the support library there is an open issue regarding the Helper Text in Google’s issue tracker since 2015. Until this is addressed by a maintainer of the support libraries the Helper Text can’t be used with the provided components.
There are a few libraries projects on GitHub which enhance the EditText component and provides the Helper Text as part of their library. One of the more know project is the MaterialEditText library. As with all library projects the effort to keep up with API or design changes is up to its maintainer.
Most Android developers will try to keep the number of dependencies as small as possible because of the 64k reference limit. Because of that if only simple enhancements like the Helper Text is needed it can be implemented easily with extending the component from the support library. There are a few tutorials which describe possible solutions for enhancing the TextInputLayout with a Helper Text option. One of the oldest on most referenced solution is a Gist that demonstrates an elegant and simple solution for the problem.
Since we started using Kotlin as our main programming language for Android projects back in 2015 we’ve rewritten all our Java source code. In one of our projects we recently had to add a Helper Text and because the previously used solutions was based on a Gist which was written in Java it we create our own solution with Kotlin. As part of that we came up with an example for the Helper Text problem.
The sample source code demonstrates with minimal changes the usage of our ExtendedTextInputLayout instead of the original by simply replacing it in the layout.
Enabling a Helper Text on the ExtendedTextInputLayout is just as easy by setting a CharSequence on the helperText property.
Switching between an Error Text and Helper Text which are both located below the EditText view was the main task for implementing the Helper Text. For displaying an Error Text the TextInputLayout has a method which simply gets extended with our logic for the helper text to switch seamless between the both texts.
Here it is the ExtendedTextInputLayout:
The source code alongside a small example can be found on GitHub.
Switching between Helper Text and Error Text looks like this:
The solution we demonstrated here is one possible way to implement Helper Text for TextInputLayout which suits our project just fine. If you have improvements or thoughts to share then please let us know!
UPDATE
Starting with the design support library release of 28.0.0-alpha1 Google finally included the Helper Text function and the described workaround is no longer needed. Any details regarding the functionality can be looked up in the SDK documentation found here.
