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

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 2

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);

Answer 3

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 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

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 6

<?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>