Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to shrink padding/ margin top and bottom of TextInputLayout error text?

It results in the TextInputLayout taking too much space vertically.
It's crazy that half of the TextInputLayout height is just for the error text (below the horizontal line in of EditText). The font size of the error text is only 11dp. Ideally, I'd like reduce the space on top and bottom of the error text to something very minimal like 2dp

I've tried everything but I've only managed to reduced the height of the TextInputLayout to 70dp.

Is there anything else that I can do?

enter image description here

layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TextInputLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/height_textinputlayout"
    android:padding="0dp"
    app:errorTextAppearance="@style/ErrorText">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="@dimen/height_edittext"
        android:layout_marginBottom="0dp"
        android:layout_marginEnd="22dp"
        android:layout_marginStart="22dp"
        android:inputType="textEmailAddress"
        android:maxLines="1"
        android:singleLine="true"/>

</android.support.design.widget.TextInputLayout>

error style:

<style name="ErrorText" parent="TextAppearance.AppCompat">
        <item name="android:layout_margin">0dp</item>
        <item name="android:padding">0dp</item>
        <item name="android:textColor">@android:color/holo_red_dark</item>
        <item name="android:textSize">@dimen/font_size_form_field_error</item>
        <item name="android:gravity">top</item>
        <item name="fontPath">fonts/Avalon-Book.ttf</item>
        <item name="android:background">@android:color/holo_orange_dark</item>
    </style>
like image 200
ericn Avatar asked Nov 23 '16 04:11

ericn


1 Answers

While this does not solve your problem entirely it will help. I too was looking for an answer to this but not finding any solution my hacky way involves enabling and disabling the error on the TextInputLayout. It helps in some way.

fun clearError(til:TextInputLayout,text:Editable?,lengthCheck:Int? = null){
        if(text != null && text.isNotEmpty()){
            if(lengthCheck == null) {
                til.error = null
                til.isErrorEnabled = false
            } else if(text.length >= lengthCheck) {
                til.error = null
                til.isErrorEnabled = false
            }
        }
    }

    fun setErrorTil(til:TextInputLayout,error:String){
        if(!til.isErrorEnabled) til.isErrorEnabled = true
        til.error = error
    }

You can use these two functions to set the error and clear it when needed using a text watcher. Not ideal and does not answer your question but it is for passers by for whom this may help solving their use case.

textwatcher code incase you need it

email.addTextChangedListener(object : TextWatcher {
        override fun afterTextChanged(s: Editable?) {
            clearError(enameTip,s)}
        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
    })

In place of email use your edittext. Hope it helps someone. Also all examples are in kotlin.

like image 183
hispeed Avatar answered Oct 11 '22 13:10

hispeed