CODEWITHSUNDEEP
androidpaddingandroid-textinputlayout
0leg
0leg

Reputation: 14154

Removing TextInputLayout extra top padding

TextInputLayout seems to always have some extra padding at the top (no matter that all margins/paddings are set to 0):

enter image description here

The layout looks like:

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.AppCompatEditText
            android:id="@+id/txt_amount"
            style="@style/EditTextStyle"
            android:hint="@string/hint_amount"
            android:inputType="numberDecimal"/>
    </android.support.design.widget.TextInputLayout>

How to remove this extra space?

Upvotes: 38

Views: 24380

Answers (11)

Badr Bujbara
Badr Bujbara

Reputation: 8691

It worked for me when I

  • Set EditText's paddingStart and paddingEnd and height to wrap_content
  • Set TextInputLayout's height to wrap_content
  • Optionally added android:minHeight="56dp" to the parent layout

Upvotes: 0

Prajwal Waingankar
Prajwal Waingankar

Reputation: 2728

Add hintEnabled = false to TextInputLayout in the layout XML.

Upvotes: 0

Lawrence Gimenez
Lawrence Gimenez

Reputation: 3255

As of compileSdk 33 or Material library version v1.8.0, I added the attribute

app:boxBackgroundMode="filled"

in <com.google.android.material.textfield.TextInputLayout

Upvotes: 0

Ali Kashan
Ali Kashan

Reputation: 29

to remove all paddings in your TextInputLayout, you can set app:boxCollapsedPaddingTop to 0dp in TextInputLayout and android:padding to 0dp in Edittext.

Upvotes: 2

Madhav
Madhav

Reputation: 351

I had done using set manual padding in TextInputEditText

android:paddingHorizontal="@dimen/_12sdp"
android:paddingVertical="@dimen/_10sdp"

Upvotes: 1

Azamat Mahkamov
Azamat Mahkamov

Reputation: 1090

You can do it by overriding the default padding style of TextInputStyle, (Material version should be above 1.1.0)

 <style name="CustomInputLayoutPadding" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="boxBackgroundColor">@color/transparent</item>
    <item name="materialThemeOverlay">@style/CustomOverlayFilledPadding</item>
</style>

then

 <style name="CustomeOverlayFilledPadding">
    <item name="editTextStyle">@style/CustomTextInputEditPaddingStyle</item>
</style>

then

   <style name="CustomTextInputEditPaddingStyle" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox">
    <item name="android:paddingStart" ns2:ignore="NewApi">2dp</item>
    <item name="android:paddingEnd" ns2:ignore="NewApi">2dp</item>
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">2dp</item>
    <item name="android:paddingTop">28dp</item>
    <item name="android:paddingBottom">12dp</item>
</style>

Upvotes: 1

Ali Akber
Ali Akber

Reputation: 532

The accepted answer didn't work for me on version - 1.2.1 so I did some experiments and realized that the padding doesn't actually come from the TextInputLayout, rather it's from TextInputEditText. So first I removed the padding from that, but it looked uneven, so I set custom padding to TextInputEditText and it worked fine. Just add this line android:padding="16dp" to the TextInputEditText replacing 16dp with your desired value.

Upvotes: 16

Gerrard
Gerrard

Reputation: 829

having a structure like this:

<com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/til_project"
                    style="@style/LoginTextInputLayoutStyle"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    app:errorEnabled="false">

                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/totalPiecesProduct"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:padding="0dp"
                        android:textSize="13sp"
                        style="@style/TextInputEditTextStyle"/>

                </com.google.android.material.textfield.TextInputLayout>

the keys are:

app:errorEnabled="false" in TextInputLayout

`android:padding="0dp"` in `TextInputEditText`

before:

enter image description here

after

enter image description here

Upvotes: 15

chitra Sathwara
chitra Sathwara

Reputation: 75

You can use this

  <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColorHint="@android:color/white">

            <com.bugle.customviews.RobotoLightEditText

                android:id="@+id/edtName"
                style="@style/StyledTilEditText"
                android:hint="@string/name"
                android:imeOptions="actionNext"
                android:inputType="textCapWords" />

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

Upvotes: -1

Rajesh Peram
Rajesh Peram

Reputation: 1198

You can remove extra space above AppCompatEditText by setting app:hintEnabled="false" to TextInputLayout but it won't display hint until you re-enable that.

For more info goto Android Developer site -TextInputLayout

Checkout below code

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintEnabled="false">

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/txt_amount"
        style="@style/EditTextStyle"
        android:hint="@string/hint_amount"
        android:inputType="numberDecimal"/>
</android.support.design.widget.TextInputLayout>

Hope this helpfull..

@Rajesh

Upvotes: 76

Ashish
Ashish

Reputation: 11

Add this line in EditText

android:translationY="-10dp"

Upvotes: -4

Related Questions