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

Question

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)

(focused view)

Now My Problems / Issues

I want the bottom line to be thinner. where should I change it.
The blinking cursor is not showing, how to show it.
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.

How did you resolve this? Could you share with us? – Selin Apr 11 '16 at 07:50 — Selin, Apr 11 '16 at 07:50
@Selin: Posted my solution – Krishanu Dey Apr 11 '16 at 08:30 — Krishanu Dey, Apr 11 '16 at 08:30

score 63 · Accepted Answer · answered Apr 11 '16 at 08:29

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>

Finally, thanks. This worked for me, after trying like 20 different things mentioned in other posts — cfl, May 17 '16 at 07:53
Thanks a ton sir. Tried a lot of things but this worked out at the end. — Pavan, Jan 12 '18 at 12:28
I've tried about 7 different options and this is literally the only one that works as expected in every single scenario. — EpicPandaForce, Sep 12 '18 at 23:37
This works. But there is a strange padding between line and text that I cant remove — LMaker, Aug 03 '20 at 13:53

sasikumar · Answer 2 · 2015-08-01T07:01:44.290

Edittext bottom color

android:backgroundTint="@color/yourcolor"

To disable spellchecker add code in your Edittext xml

android:inputType="textNoSuggestions"

Create an XML file with the name "EditTextStyle.xml" in the drawable folder in your project and write the following code:

<?xml version="1.0" encoding="utf-8" ?>

   <shape xmlns:android="http://schemas.android.com/apk/r..."
   android:thickness="0dp"
   android:shape="rectangle">
  <stroke android:width="3dp"
     android:color="#4799E8"/>
  <corners android:radius="5dp" />
  <gradient
  android:startColor="#C8C8C8"
  android:endColor="#FFFFFF"
  android:type="linear"
  android:angle="270"/>
  </shape>

Now add the following attribute to your EditText:

       <EditText    

        android:background="@drawable/EditTextStyle"/>

I'm able to change EditText bottom color, I need to change stroke width thinner. — Krishanu Dey, Aug 01 '15 at 06:49

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

2 Answers2

Linked