TextInputLayout :How to give padding or margin to hint?

Question

I have to use TextInputLayout of design support library in my project. I want to give space between hint and EditText in TextInputLayout. I set margin and padding in TextInputLayout and even inside EditText but both are not work.So how to solve this issue. Here i attach screen shot and my coding.

==============================Style=================================

<style name="TextHint" parent="Base.TextAppearance.AppCompat">
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@color/green</item>
</style>



=============================XML===================================  
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    app:hintTextAppearance="@style/TextHint"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_height="wrap_content">
<EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/edttxtEmailAddress"
    android:singleLine="true"
    android:hint="@string/enter_valid_email"
    android:paddingLeft="20dp"
    android:textSize="20sp"
    android:background="@drawable/rounded_common"/>
</android.support.design.widget.TextInputLayout>

Answer 1

The solution proposed by ganesh2shiv works for the most part, although I've found it also de-centres the hint text displayed inside the EditText when not focused.

A better trick is to set the desired paddingTop to the EditText but also embed the extra padding within the EditText's background. A fairly sane way to do this is to wrap your original background in a <layer-list> and set the <item android:top="..."> attribute to match the paddingTop of your EditText.

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

  <EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/floating_hint_margin"
    android:background="@drawable/bg_edit_text" />
</android.support.design.widget.TextInputLayout>

And the bg_edit_text.xml drawable file:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:top="@dimen/floating_hint_margin">
    <your original background; can be <bitmap> or <shape> or whatever./>
  </item>
</layer-list>

Answer 2

I have been looking for the solution to this question from last couple of days myself. After tearing my hairs out for hours I have finally found a simple workaround. What I have noticed is that if you have custom background set on EditText the android:paddingTop attribute simple doesn't work to alter the spacing b/w the hint text and edit text (I have really no idea why). So if you have set custom background to your EditText, you can use android:translationY attribute in the EditText.

So here's your solution:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="10dp"
    app:hintTextAppearance="@style/TextHint">

    <EditText
        android:id="@+id/edttxtEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/rounded_common"
        android:hint="@string/enter_valid_email"
        android:paddingLeft="20dp"

        android:translationY="10dp" 

        android:singleLine="true"
        android:textSize="20sp" />
</android.support.design.widget.TextInputLayout>

Hope it helps. :)

---

Update: My sincerest apologies for the late update. I have been really busy lately. If you haven't realized yet let me tell you this answer is straight out ugly and wrong. In retrospect I think I was probably drunk when I wrote it. As mentioned by others it might cut the bottom region of the editText background but there's an ugly fix for it as well - you can set the height of the (parent) textInputLayout sightly bigger (how big? you are supposed to find it by trial and error, yuck!) than the (child) editText. I hope you all do realize that would be crazy so please don't do it. Check out the answer written by @Radu Topor, it's by far the best and clean solution to this question. Thanks.

Answer 3

I tried the padding changes, but it doesn't work well.

A simple workaround is to change the height of the TIL:

android:layout_height="wrap_content"

to (e.g.)

android:layout_height="50dp"

it might not give the same result on all screen sizes.

And add

android:gravity="bottom" 

to push your text down.

Answer 4

@RaduTopor 's answer is good, but I think we also need add android:bottom or else it also de-centres the hint text displayed inside the EditText when not focused

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:top="@dimen/floating_hint_margin" android:bottom="@dimen/floating_hint_margin">
    <your original background; can be <bitmap> or <shape> or whatever./>
  </item>
</layer-list>

Before(RaduTopor answer):

After:

Answer 5

After many attempts i found one more solution (material version 1.2.1):

this is layout sample:

  <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputLayout"
            style="@style/CustomTextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/textInputEditText"
                style="@style/CustomTextInputEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint" />

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

this is styles sample:

 <style name="CustomTextInputLayout">
        <item name="boxCollapsedPaddingTop">-16dp</item>
        <item name="android:paddingTop">16dp</item>
        <item name="boxBackgroundColor">@color/backgroundColorWhite</item>
        <item name="android:textColorHint">...</item>
        <item name="android:textAppearance">...</item>
        <item name="hintTextAppearance">...</item>
        <item name="hintTextColor">...</item>
        <item name="boxStrokeColor">...</item>
    </style>

    <style name="CustomTextInputEditText">
        <item name="android:textAppearance">...</item>
        <item name="android:paddingTop">@dimen/margin_12</item>
        <item name="android:paddingBottom">@dimen/margin_12</item>
        <item name="android:paddingStart">0dp</item>
        <item name="android:paddingEnd">0dp</item>
    </style>

these 2 lines sets vertical offset for title/hint view in expanded state over collapsed state:

  <item name="boxCollapsedPaddingTop">-16dp</item>
  <item name="android:paddingTop">16dp</item>
 

these 2 lines - for margin between text and underline:

  <item name="android:paddingTop">@dimen/margin_12</item>
  <item name="android:paddingBottom">@dimen/margin_12</item>

that line - for removing backround tint bug:

 <item name="boxBackgroundColor">@color/backgroundColorWhite</item>

these 2 lines - for removing standard horizontal paddings

 <item name="android:paddingStart">0dp</item>
 <item name="android:paddingEnd">0dp</item>

Answer 6

I made a special class for the purpose of adding empty view above EditText, thus add padding to hint. You can use it as simple TextInputLayout.

public class PaddingTextInputLayout extends TextInputLayout {

public View paddingView;

public PaddingTextInputLayout(Context context) {
    super(context);
}

public PaddingTextInputLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public PaddingTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
    super.addView(child, index, params);
    refreshPaddingView();
}

public void addPaddingView(){
    paddingView = new View(getContext());
    int height = (int) getContext().getResources()
            .getDimension(R.dimen.edittext_text_input_layout_padding);
    ViewGroup.LayoutParams paddingParams = new ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            height);
    super.addView(paddingView, 0, paddingParams);
}

public void refreshPaddingView(){
    if (paddingView != null) {
        removeView(paddingView);
        paddingView = null;
    }
    addPaddingView();
}
}

This implementation is very simple and stupid, you can improve it a lot.

Answer 7

To disable the bottom line cut effect i have used margins, translationY and clipChildren="false"

<android.support.design.widget.TextInputLayout
        android:id="@+id/textinput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:clipChildren="false">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_profile_contact_name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="3dp"
            android:background="@drawable/image_back"
            android:hint="Contact name"
            android:padding="5dp"
            android:translationY="3dp" />
    </android.support.design.widget.TextInputLayout>

Answer 8

This is what i did in my project for getting enough space between edittext and hint

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_full_name"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginStart="40dp"
    android:layout_marginEnd="40dp"
    android:layout_marginTop="30dp"
    android:gravity="bottom"
    android:textColorHint="#fff"
    app:layout_constraintTop_toBottomOf="@+id/welcome_til_email">

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#9a050505"
        android:hint="You email"
        android:inputType="textCapWords"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:singleLine="true"
        android:textAppearance="?android:textAppearanceSmall"
        android:textColor="#fff"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.design.widget.TextInputLayout>

Answer 9

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp"
          android:bottom="5dp">
        <shape>
            <!-- Background Color -->
            <solid android:color="#f1f1f1"/>
            <!-- Round Corners -->
            <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

<style name="text_input_edit_text_without_border_style">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">55dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:paddingBottom">5dp</item>
    <item name="android:gravity">left|center_vertical</item>
    <item name="android:paddingLeft">8dp</item>
    <item name="android:paddingRight">8dp</item>
    <item name="android:maxLines">1</item>
    <item name="android:singleLine">true</item>
    <item name="android:imeOptions">actionNext</item>
    <item name="android:textSize">@dimen/text_size_large</item>
    <item name="android:background">@drawable/bg_without_border_with_padding_top</item>
</style>

<style name="text_input_layout_style">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginBottom">@dimen/margin_medium</item>
</style>

Answer 10

Just add to your EditText custom background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
        <shape android:shape="rectangle">
            <padding
                android:top="4dp"/> // your padding value
        </shape>
    </item>
// customize your background items if you need
</layer-list>
<android.support.design.widget.TextInputLayout
 ...>
    <android.support.design.widget.TextInputEditText
        ...
        android:background="@style/your_custom_background"/>

then apply it to your EditText and increase height of your EditText with your padding value if you use fix height

Answer 11

This a late answer but hope it helps, And I thinks its a bit better solution. Rather then giving background to your editText , Give that background to your TextInputLayout . And set edittext layout to transparent.

<android.support.design.widget.TextInputLayout
                android:id="@+id/tinput_phone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="05dp"
                android:background="@drawable/send_email_screen_element_bg"
                android:padding="05dp"
                android:theme="@style/grey_control_style">

                <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/edt_phone"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:ems="10"
                    android:hint="@string/phone_hint_str"
                    android:inputType="text"
                    android:paddingStart="10dp"
                    android:paddingTop="10dp"
                    android:paddingBottom="10dp"
                    android:singleLine="true"
                    android:textColor="@color/black"
                    android:textSize="14sp" />
            </android.support.design.widget.TextInputLayout>

Answer 12

just use padding-bottom

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



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

                <com.google.android.material.textfield.TextInputEditText

                   ....
                    android:paddingBottom="@dimen/dp_25"
...
                   />
            </com.google.android.material.textfield.TextInputLayout>

Answer 13

If the requirement is to add space between cursor and hint then you can try

editTextComment.setHint("  "+getString(R.string.add_a_comment));

Answer 14

layout xml

<com.google.android.material.textfield.TextInputLayout
    style="@style/TextInputLayout"
    android:layout_marginTop="10dp"
    android:gravity="center"
    android:theme="@style/TextInputLayoutHint">

    <androidx.appcompat.widget.AppCompatEditText
        style="@style/TextInputEditText"
        android:hint="Email ID"
        android:inputType="textEmailAddress"
        android:maxLines="1" />

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

styles.xml

<style name="TextInputLayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginStart">15dp</item>
    <item name="android:layout_marginLeft">15dp</item>
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginEnd">15dp</item>
    <item name="android:layout_marginRight">15dp</item>
</style>

<style name="TextInputLayoutHint" parent="">
    <item name="android:textColorHint">@color/colorHintNormal</item>
    <item name="colorControlActivated">@color/colorOrange</item>
    <item name="android:textSize">11dp</item>
</style>

<style name="TextInputEditText" parent="">
    <item name="android:translationY">10dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">@null</item>
    <item name="android:paddingBottom">15dp</item>
    <item name="android:textColor">@color/colorBlack</item>
    <item name="android:textColorHint">@color/colorHintActive</item>
    <item name="android:textSize">13sp</item>
</style>    

Answer 15

You can use startIconDrawable to TextInputLayout and make sure you set some dummy transparant icon(icon width would be the padding start value). so that you will get padding from start. Note: this is a hack, not a direct solution

Answer 16

If you want to set the android:hint padding to 0 on focus, add app:boxCollapsedPaddingTop="0dp" to your TextInputLayout.

Answer 17

You can try this solution and editTextStyle in TextInputLayout style only. For example:

<com.google.android.material.textfield.TextInputLayout
    ...
    android:layout_width="@dimen/element_width"
    android:layout_height="@dimen/element_height"
    ...
    style="@style/EditTextField.Container"
    ...
    android:hint="@string/you_hint_resource">

    <com.google.android.material.textfield.TextInputEditText
        ...
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        ... />

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

In your style section

<style name="EditTextField"/>

<style name="EditTextField.Container" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
    <item name="android:textColorHint">@color/edit_text_hint_color</item>
    <item name="hintTextColor">@color/edit_text_hint_color</item>
    <item name="hintTextAppearance">@style/PasswordInput.HintTextAppearance</item>
    <item name="materialThemeOverlay">@style/PasswordInput.MaterialThemeOverlayStyle</item>
</style>

<style name="EditTextField.HintTextAppearance">
    <item name="android:paddingBottom">20dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:textSize">12sp</item>
</style>

<style name="EditTextField.MaterialThemeOverlayStyle">
    <item name="editTextStyle">@style/EditTextStyle</item>
</style>

<style name="EditTextStyle" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox.Dense">
    <item name="android:background">@drawable/edittext_body_container</item>
    <item name="android:paddingBottom">@dimen/input_text_bottom_padding</item>
    <item name="android:paddingStart">@dimen/input_text_padding_start</item>
    <item name="android:paddingTop">@dimen/input_text_top_padding</item>
    <item name="android:textCursorDrawable">@drawable/cursor_white_drawable</item>
    <item name="android:textSize">16sp</item>
    <item name="lineHeight">20sp</item>
</style>

Answer 18

Working Solution:

You have to give custom height to TextInputEditText and make a custom drawable then you will get your solution, HOPE IT WILL WORKS 100%

1st step:

 <com.google.android.material.textfield.TextInputLayout
    android:id="@+id/tilStart"
    android:layout_width="match_parent"
    android:textColorHint="@color/darkgreen"
    android:layout_marginTop="@dimen/_20sdp"
    android:layout_height="wrap_content"
    app:errorEnabled="true"
    android:layout_below="@+id/labelDescription">

  <com.google.android.material.textfield.TextInputEditText
      android:id="@+id/tietStart"
      android:layout_width="match_parent"
      android:layout_height="@dimen/_30sdp"
      android:hint="@string/start_offset"
      android:fontFamily="@font/gilroysemibold"
      android:background="@drawable/customedittext"
      android:text="@string/zero"
      android:gravity="bottom"
      android:paddingLeft="@dimen/_10sdp"
      android:textColor="@color/darkgreen"
      android:inputType="number"
      android:typeface="monospace"
      android:digits="0123456789."
      android:singleLine="true" />
</com.google.android.material.textfield.TextInputLayout>

2nd step:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="@dimen/_10sdp">
    <shape >
        <solid android:color="@color/activitycolor"/>
        <corners android:radius="@dimen/_10sdp"/>
    </shape>
</item>
</layer-list>

Answer 19

Try to use paddingStart instead of padding left or right. It worked for me.

android:paddingStart="8dp"

Answer 20

I think you should consider this:

The design library takes an interesting approach to customizing the EditText: it doesn’t change it directly. Instead, the TextInputLayout is used to wrap the EditText and provide the enhancements.

The first one, displaying a floating label when the user types something into the field, is done automagically. The TextInputLayout finds the EditText among its children and attaches itself as a TextWatcher, so it’s able to determine when the field has been modified and animates the movement of the hint from its regular place in the EditText to the floating label position above it.

The second enhancement, displaying the error message, requires a slight change in code. Instead of setting the error on the EditText, the error should be set on the TextInputLayout. That’s because there is no automatic way for the TextInputLayout to be notified when the error is set on the EditText. Here’s what the layout might look like:

<android.support.design.widget.TextInputLayout
    android:id="@+id/username_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:id="@+id/username_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/username_hint"/>
</android.support.design.widget.TextInputLayout>

Note that both the EditText and TextInputLayout need layout IDs. In the fragment, we would need to configure the TextInputLayout to enable displaying errors:

TextInputLayout usernameTextInputLayout = (TextInputLayout) view.findViewById(R.id.username_text_input_layout);
usernameTextInputLayout.setErrorEnabled(true);
...
usernameTextInputLayout.setError(R.string.username_required);