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 TextInp

Answer 1

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 2

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

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

Answer 3

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 4

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 5

I think is simpler than you think working with fixes sizes, provide you don't need to use wrap_content for whatever reason, otherwise the accepted approach seems to work properly.

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="bottom">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_marginTop="10dp"/>

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

Following this example you have a 20dp space to place your hint label as you want, playing with the layout_marginTop property.

Answer 6

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>