Alex
Alex

Reputation: 1249

Android - reduce EditText floating label padding/margin?

Is it possible to have those floating label (Email/Password) to be inside the box. Basically reduce the space in between hint and actual input.

enter image description here

I tried padding Top/Bottom. Margin Top/Bottom for editText. But none of them gave the result I am looking for.


 <android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:id="@+id/emailWrapper"
    app:hintTextAppearance="@style/floatingLabel">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:paddingLeft="17dp"
        android:paddingRight="17dp"
        android:id="@+id/txtEmail"
        android:singleLine="true"
        android:inputType="textEmailAddress"
        android:hint="@string/emailPlaceholder"
        android:background="@drawable/btn_empty_stroke" />

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

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/floatingLabel"
    android:id="@+id/passwordWrapper"
    android:layout_below="@+id/emailWrapper">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:paddingLeft="17dp"
        android:paddingRight="17dp"
        android:singleLine="true"
        android:inputType="textPassword"
        android:id="@+id/txtPassword"
        android:paddingTop="0dp"
        android:text="HELLO"
        android:hint="@string/passwordPlaceholder"
        android:background="@drawable/btn_empty_stroke" />

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

Upvotes: 10

Views: 15647

Answers (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:bottom="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 fixed height.

Upvotes: -1

Alex
Alex

Reputation: 1249

Thanks @Frank N.Stein for your comment and idea of decreasing the height. It did the trick.

Answering my own question. As someone else might come up with this issue.

So basically I had to give exact height to TextInputLayout and keep EditText height the same. Also give paddingTop to TextInputLayout and clipToPadding false. So final textbox xml comes out like this.

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_marginTop="20dp"
    android:layout_height="54dp"
    android:gravity="bottom"
    android:paddingTop="4dp"
    android:clipToPadding="false"  // above 3 lines are important
    android:id="@+id/emailWrapper"
    app:hintTextAppearance="@style/floatingLabel">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:paddingLeft="17dp"
        android:paddingRight="17dp"
        android:id="@+id/txtEmail"
        android:singleLine="true"
        android:inputType="textEmailAddress"
        android:hint="@string/emailPlaceholder"
        android:text="[email protected]"
        android:background="@drawable/btn_empty_stroke" />

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

Upvotes: 16

Related Questions