TextInputLayout :How to give padding or margin to hint?

好久不见. 提交于 2019-11-27 12:17:29

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

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.

axd

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.

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

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>

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.

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

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

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

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

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

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);
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!