Custom Error display TextInputLayout

1.1k views Asked by At

I have a specific implementation of error handling in edit texts. Is there any way i could achieve something like shown below.Requirementrequirement

I managed to achieve almost similar result. Only part remaining is the validator.Achieved

Any help would be appretiated

Edit 1: Attaching code for to help.

 <android.support.design.widget.TextInputLayout
        style="@style/FrameTextLayout"
        android:layout_width="match_parent"
        app:theme="@style/GreyHighlight">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/fragment_sign_up_one.text_email"
            style="@style/FrameEditText"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="@string/email"
            android:inputType="textEmailAddress" />

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

Values in values\styles.xml

<style name="GreyHighlight" parent="AppThemeNoAction">
    <item name="colorControlNormal">@color/colorHeather</item>
    <item name="colorControlActivated">@color/colorHeather</item>
    <item name="textColorError">@color/colorHeather</item>
</style>

<style name="FrameTextLayout">
    <item name="android:background">@drawable/border_background</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:layout_height">53dp</item>
    <item name="android:layout_marginTop">16dp</item>
</style>

<style name="FrameEditText">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:maxLines">1</item>
    <item name="android:textSize">16.7sp</item>
    <item name="android:textColor">@color/colorDarkIndigo</item>
    <item name="android:paddingBottom">8dp</item>
    <item name="android:paddingLeft">16dp</item>
    <item name="android:paddingRight">16dp</item>
    <item name="android:paddingTop">8dp</item>
</style>

Also on the sidenote how do we centre hint inside a TextInputLayout. Example attached.

required

Currently,

enter image description here

Edit 2: Managed to center hint by disabling hint when not in focus by using app:hintEnabled="false" on TextInputLayout.

1

There are 1 answers

0
Ritesh Shakya On BEST ANSWER

So i ended up creating a custom view that fulfilled what i needed. If anyone is interested I created a library for it.

CustomFormViews