How to Change the Floating Label position of TextInputLayout in android

Question

I have a rectangular shaped Edit Text which is inside the TextInputLayout. I want to put some margin between floating label and rectangular boundaries of edit text but i am not able to do that. I tried different margins parameters but it didn't workout.

In the image you can see that floating label is stick with the upper boundary of the rectangular edit text. But i want some space between label and upper boundary. Thanx in advance.

below is the XML code for EditText

 <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

           >

            <EditText
                android:id="@+id/input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="email"

                android:background="@drawable/textbg"/>

below is the code for background drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">
    <stroke android:width="1dp"
        android:color="@color/colorPrimary"/>
    />

    <padding
        android:left="15dp"
        android:right="15dp"
        android:top="15dp"
        android:bottom="15dp" />
</shape>

Use this link to solve your problem. http://www.androidhive.info/2015/09/android-material-design-floating-labels-for-edittext/ Hope this will help you. All the best. — Sanwal Singh, Oct 27 '15 at 06:56
You can refer to this answer: http://stackoverflow.com/questions/32609710/textinputlayout-how-to-give-padding-or-margin-to-hint — Chandler, Jun 28 '16 at 01:49
You can refer to this link: http://stackoverflow.com/questions/32609710/textinputlayout-how-to-give-padding-or-margin-to-hint — Chandler, Jun 28 '16 at 02:13
Any solution for this https://stackoverflow.com/questions/65367815/floating-label-needs-to-show-inside-the-textinput-layout-in-android-studio — sejn, Jan 22 '21 at 10:50

score 4 · Answer 1 · edited Oct 28 '16 at 22:06

4

You can give the height manually to TextInputLayout Like :

android:layout_height="100dp"

it work for me.

edited Oct 28 '16 at 22:06

Paul Roub

36,322
27
84
93

answered Oct 26 '16 at 10:14

kirti

71
7

1

It works exactly as expected. But also you need to set gravity=bottom for TextInputLayout to additional height appears on the top. – Serhiy Jun 21 '17 at 12:42

score 3 · Answer 2 · answered Oct 29 '15 at 08:37

3

I believe that you can not customize the label position TextInputLayout. and using TranslationY is not the suitable solution for changing the floating label postion because it will translate any view. if you find any other answer please let me know.

answered Oct 29 '15 at 08:37

Sunita

336
2
18

thanx for replying and agree with your comment – Baqir Oct 29 '15 at 08:40

Anoop M Maddasseri · Answer 3 · 2016-12-16T11:02:17.433

Use drawable background with layer list to get some padding from top.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp">
        <shape android:shape="rectangle">
            <!-- view background color -->
            <solid android:color="@android:color/transparent"></solid>

            <stroke
                android:width="1dp"
                android:color="@color/colorAccent" />

            <!-- If you want to add some padding -->
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"></padding>
        </shape>
    </item>
</layer-list>

Usage

<android.support.design.widget.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:hint="@string/label_quantity"
  android:textColorHint="@color/colorOrange"
  app:errorEnabled="true"
  app:errorTextAppearance="@style/ErrorText">

  <android.support.design.widget.TextInputEditText
    android:layout_width="match_parent"
    android:layout_height="@dimen/login_edit_text_height"
    android:background="@drawable/drawable_background"
    android:imeOptions="actionNext"
    android:inputType="number"
    android:maxLines="1"/> 

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

not working . moreover your code is for solid rectangle shape and my question is for hollow rectangle — Baqir, Dec 16 '16 at 09:30
Well, you can go for hollow by editing the drawable. I have updated the answer. It must works. — Anoop M Maddasseri, Dec 16 '16 at 11:03
made some tricks but now edittext cursor and hint looks bend more towards the top boundary of the rectangle when not focused . And i think it will be visible according to screen resolution/size of the phone — Baqir, Dec 16 '16 at 11:35

score 2 · Answer 4 · answered Nov 08 '19 at 12:52

(Tested Code 100 % working) Your TextInputLayout height should be greater than EditText. Then set GRAVITY.

 <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="65dp"
                android:gravity="bottom">

                   <EditText
                    android:id="@+id/etName"
                    android:layout_width="match_parent"
                    android:layout_height="40dp"/>

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

score 0 · Answer 5 · answered Oct 27 '15 at 06:59

If you have custom background set on EditText the android:paddingTop attribute simple doesn't work to alter the spacing b/w the floating hint text and edit text. So if you have set custom background to your EditText, you can use android:translationY attribute in the EditText.

 <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="email"
                android:translationY="10dp" 
                android:background="@drawable/textbg"/>

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

Hope this helps :)

android:translationY="10dp" it will translate edit text or in fact any View. — Baqir, Oct 27 '15 at 09:07
yes your solution works as per question but it also change the position of original hint(when it wasn't focused). — Baqir, Oct 27 '15 at 12:12

score 0 · Answer 6 · answered Jun 14 '17 at 04:06

For that you just have to put background in the textinputlayout from edttext as follow

<android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/textbg"
       >

        <EditText
            android:id="@+id/input_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="email"/>

and you just have to specify padding top in drawable file.

score 0 · Answer 7 · answered Aug 08 '17 at 08:06

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

How to Change the Floating Label position of TextInputLayout in android

7 Answers7