Denominator
Denominator

Reputation: 216

How to remove bottom padding from TextInputLayout

The first picture is what I want. The second picture is what I have implemented. As you can see, there is a padding to the bottom of the TextInputLayout which makes the gray background overflow past edittext line.

Please do not suggest negative margin or padding as it does not work in newer APIs.

Here is the XML I have for the first text input layout.

<android.support.design.widget.TextInputLayout
    android:id="@+id/fullNameTextLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="32dp"
    android:paddingTop="10dp"
    android:background="#EAEAEA"
    android:hint="Full Name"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <EditText
        android:id="@+id/fullNameEditText"
        style="@style/Regular15Grey1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textCapWords"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>

Picture 1 Picture2

Upvotes: 6

Views: 4860

Answers (4)

kassim
kassim

Reputation: 4009

I've found the padding is actually space for the error text, if you disable the error (e.g. in the layout XML with app:errorEnabled="false") the padding is closer to what you'd expect.

Upvotes: 5

Navadeep Tiwari
Navadeep Tiwari

Reputation: 96

 <android.support.design.widget.TextInputLayout
        android:id="@+id/fullNameTextLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:paddingTop="10dp"
        android:hint="Full Name"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <EditText
            android:id="@+id/fullNameEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textCapWords"
            android:text=""
            android:paddingBottom="16dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:layout_marginBottom="-8dp"
            android:singleLine="true"/>
    </android.support.design.widget.TextInputLayout>

Upvotes: 3

Amrit kumar
Amrit kumar

Reputation: 524

Maybe add a 2dp line below the EditText

<View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/black" />

You can change the color and the width later

Upvotes: 0

GianhTran
GianhTran

Reputation: 3701

You can using android:layout_marginBottom="-xdp" in your EditText

 <EditText
        android:id="@+id/fullNameEditText"
        style="@style/Regular15Grey1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textCapWords"
        android:paddingLeft="12dp"
        android:layout_marginBottom="-xdp"
        android:paddingRight="12dp"
        android:singleLine="true"/>

value of x depend on your design.

hope this helps

Upvotes: 3

Related Questions