Error text in TextInputLayout is covered by keyboard
Update: looks like this might have been fixed in 1.2.0-alpha03 version of the library.
To make sure the error message is visible without the user acting to see it, I subclassed TextInputLayout
and placed it inside a ScrollView
. This lets me scroll down if needed to reveal the error message, on every occasion the error message is set. There are no changes needed in the activity/fragment class that uses it.
import androidx.core.view.postDelayed
/**
* [TextInputLayout] subclass that handles error messages properly.
*/
class SmartTextInputLayout @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : TextInputLayout(context, attrs, defStyleAttr) {
private val scrollView by lazy(LazyThreadSafetyMode.NONE) {
findParentOfType<ScrollView>() ?: findParentOfType<NestedScrollView>()
}
private fun scrollIfNeeded() {
// Wait a bit (like 10 frames) for other UI changes to happen
scrollView?.postDelayed(160) {
scrollView?.scrollDownTo(this)
}
}
override fun setError(value: CharSequence?) {
val changed = error != value
super.setError(value)
// work around https://stackoverflow.com/q/34242902/1916449
if (value == null) isErrorEnabled = false
// work around https://stackoverflow.com/q/31047449/1916449
if (changed) scrollIfNeeded()
}
}
Here are the helper methods:
/**
* Find the closest ancestor of the given type.
*/
inline fun <reified T> View.findParentOfType(): T? {
var p = parent
while (p != null && p !is T) p = p.parent
return p as T?
}
/**
* Scroll down the minimum needed amount to show [descendant] in full. More
* precisely, reveal its bottom.
*/
fun ViewGroup.scrollDownTo(descendant: View) {
// Could use smoothScrollBy, but it sometimes over-scrolled a lot
howFarDownIs(descendant)?.let { scrollBy(0, it) }
}
/**
* Calculate how many pixels below the visible portion of this [ViewGroup] is the
* bottom of [descendant].
*
* In other words, how much you need to scroll down, to make [descendant]'s bottom
* visible.
*/
fun ViewGroup.howFarDownIs(descendant: View): Int? {
val bottom = Rect().also {
// See https://stackoverflow.com/a/36740277/1916449
descendant.getDrawingRect(it)
offsetDescendantRectToMyCoords(descendant, it)
}.bottom
return (bottom - height - scrollY).takeIf { it > 0 }
}
I also fixed TextInputLayout.setError() leaves empty space after clearing the error in the same class.
This is actually a known issue at Google.
https://issuetracker.google.com/issues/37051832
Their proposed solution is to create a custom TextInputEditText class
class MyTextInputEditText : TextInputEditText {
@JvmOverloads
constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = android.R.attr.editTextStyle
) : super(context, attrs, defStyleAttr) {
}
private val parentRect = Rect()
override fun getFocusedRect(rect: Rect?) {
super.getFocusedRect(rect)
rect?.let {
getMyParent().getFocusedRect(parentRect)
rect.bottom = parentRect.bottom
}
}
override fun getGlobalVisibleRect(rect: Rect?, globalOffset: Point?): Boolean {
val result = super.getGlobalVisibleRect(rect, globalOffset)
rect?.let {
getMyParent().getGlobalVisibleRect(parentRect, globalOffset)
rect.bottom = parentRect.bottom
}
return result
}
override fun requestRectangleOnScreen(rect: Rect?): Boolean {
val result = super.requestRectangleOnScreen(rect)
val parent = getMyParent()
// 10 is a random magic number to define a rectangle height.
parentRect.set(0, parent.height - 10, parent.right, parent.height)
parent.requestRectangleOnScreen(parentRect, true /*immediate*/)
return result;
}
private fun getMyParent(): View {
var myParent: ViewParent? = parent;
while (!(myParent is TextInputLayout) && myParent != null) {
myParent = myParent.parent
}
return if (myParent == null) this else myParent as View
}
}```
@user2221404 answer did not work for me so I changed the getMyParent() method to what is shown:
class CustomTextInputEditText @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = android.R.attr.editTextStyle
) : TextInputEditText(context, attrs, defStyleAttr) {
private val parentRect = Rect()
override fun getFocusedRect(rect: Rect?) {
super.getFocusedRect(rect)
rect?.let {
getTextInputLayout()?.getFocusedRect(parentRect)
rect.bottom = parentRect.bottom
}
}
override fun getGlobalVisibleRect(rect: Rect?, globalOffset: Point?): Boolean {
val result = super.getGlobalVisibleRect(rect, globalOffset)
rect?.let {
getTextInputLayout()?.getGlobalVisibleRect(parentRect, globalOffset)
rect.bottom = parentRect.bottom
}
return result
}
override fun requestRectangleOnScreen(rect: Rect?): Boolean {
val result = super.requestRectangleOnScreen(rect)
val parent = getTextInputLayout()
// 10 is a random magic number to define a rectangle height.
parentRect.set(0, parent?.height ?: 10 - 24, parent?.right ?: 0, parent?.height?: 0)
parent?.requestRectangleOnScreen(parentRect, true /*immediate*/)
return result
}
private fun getTextInputLayout(): TextInputLayout? {
var parent = parent
while (parent is View) {
if (parent is TextInputLayout) {
return parent
}
parent = parent.getParent()
}
return null
}
}
You should put everything in the ScrollView container so that user can at least scroll and see the error message. That is the only thing that worked for me.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
...
other views
...
</LinearLayout>
</ScrollView>