Search code examples
androidandroid-edittextstylesmaterial-designandroid-textinputlayout

Change thickness of the bottom line of EditText when wrapped into TextInputLayout


here is my code

XML Markup

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/TextLabel">

    <EditText
        android:id="@+id/etContactName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Contact Name"/>

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

Style

<style name="TextLabel" parent="TextAppearance.AppCompat">
    <item name="android:textColorHint">@color/hintColor</item>
    <item name="colorAccent">@color/primaryColor</item>
    <item name="colorControlNormal">@color/hintColor</item>
    <item name="colorControlActivated">@color/primaryColor</item>
</style>

Here is the output
(normal view)
Normal View

(focused view)

Focused View

Now My Problems / Issues

  1. I want the bottom line to be thinner. where should I change it.
  2. The blinking cursor is not showing, how to show it.
  3. EditText is automatically highlighting the spelling mistakes. I need to stop it.

Can anyone please point me to the right way to resolve the issues. Comment you anyone needs more info to answer this.

Thanks in advance.


Solution

  • I've solved my issue using my custom xml drawable. There might be some better way, but I couldn't find any. following is my drawable that I'm using as background of my textbox

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true">
            <layer-list >
                <item
                    android:bottom="1dp"
                    android:left="-2dp"
                    android:right="-2dp"
                    android:top="-2dp">
                    <shape android:shape="rectangle" >
                        <stroke
                            android:width="0.5dp"
                            android:color="@color/primaryColor" />
    
                        <solid android:color="#00FFFFFF" />
    
                        <padding android:left="3dp"
                            android:right="3dp"
                            android:top="3dp"
                            android:bottom="3dp" />
                    </shape>
                </item>
    
            </layer-list>
        </item>
        <item android:state_focused="true">
            <layer-list >
                <item
                    android:bottom="1dp"
                    android:left="-2dp"
                    android:right="-2dp"
                    android:top="-2dp">
                    <shape android:shape="rectangle" >
                        <stroke
                            android:width="0.5dp"
                            android:color="@color/primaryColor" />
    
                        <solid android:color="#00FFFFFF" />
    
                        <padding android:left="3dp"
                            android:right="3dp"
                            android:top="3dp"
                            android:bottom="3dp" />
                    </shape>
                </item>
    
            </layer-list>
        </item>
        <item>
            <layer-list >
                <item
                    android:bottom="1dp"
                    android:left="-2dp"
                    android:right="-2dp"
                    android:top="-2dp">
                    <shape android:shape="rectangle" >
                        <stroke
                            android:width="0.5dp"
                            android:color="#BCBCBC" />
    
                        <solid android:color="#00FFFFFF" />
    
                        <padding android:left="3dp"
                            android:right="3dp"
                            android:top="3dp"
                            android:bottom="3dp" />
                    </shape>
                </item>
    
            </layer-list>
        </item>
    
    </selector>