CODEWITHSUNDEEP
androidandroid-edittextandroiddesignsupportandroid-textinputlayout
Baqir
Baqir

Reputation: 717

How to Change the Floating Label position of TextInputLayout in android

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. here is the screen shot of the Edit text

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>

Upvotes: 18

Views: 13451

Answers (7)

Satendra Behre
Satendra Behre

Reputation: 159

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

Upvotes: 2

Alex Naumchick
Alex Naumchick

Reputation: 39

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

Upvotes: 0

Parth Munjpara
Parth Munjpara

Reputation: 82

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.

Upvotes: 0

Anoop M Maddasseri
Anoop M Maddasseri

Reputation: 10529

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>

Upvotes: 2

kirti
kirti

Reputation: 71

You can give the height manually to TextInputLayout Like :

android:layout_height="100dp"

it work for me.

Upvotes: 4

Sunita
Sunita

Reputation: 336

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.

Upvotes: 3

Alok Nair
Alok Nair

Reputation: 4004

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

Upvotes: 0

Related Questions