Search code examples
androidandroid-layoutandroid-edittextandroid-textinputlayout

EditText inside TextInputLayout leaves empty space at the top


I have password field and i wanted to implement hide/show password functionality. So I used TextInputLayout. But if I use EditText inside TextInputLayout, it leaves empty space at the top of the layout. And I need to have height of that password field smaller. With that gap there, it's not possible. I've tried to set height to negative value for EditText, but it did not work. android:layout_height="45dp" is used to make that field smaller, but it doesnt work at all. wrap_content makes it even taller.

    <android.support.design.widget.TextInputLayout
            android:id="@+id/textInputLayout"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_marginEnd="45dp"
            android:layout_marginStart="42dp"
            app:passwordToggleDrawable="@drawable/login_password_eye"
            app:passwordToggleEnabled="true">

            <EditText
                android:id="@+id/passwordTextField"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:backgroundTint="@color/colorDivider"
                android:imeOptions="actionDone"
                android:inputType="textPassword"
                android:singleLine="true"
                android:textColor="@color/colorItemMajor"
                android:textSize="16sp" />

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

Image:

enter image description here

XML Code - full (i had to remove colors and images + top toolbar, but logic is same)

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainLoginLayout"
    android:orientation="vertical"
    android:clickable="true"
    android:focusableInTouchMode="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/loginLayout"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imageLogin"
            android:layout_width="210dp"
            android:layout_height="210dp"
            android:layout_gravity="center"
            android:scaleType="fitCenter"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/emailLabel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="E-mail"
            android:textColor="@color/colorBlack"
            android:textSize="16sp"
            android:layout_marginStart="45dp"
            android:layout_marginEnd="45dp"
            />

        <EditText
            android:id="@+id/emailTextField"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="45dp"
            android:layout_marginStart="45dp"
            android:backgroundTint="@color/colorBlack"
            android:inputType="textEmailAddress"
            android:textColor="@color/colorBlack"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/passwordLabel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Password"
            android:textColor="@color/colorBlack"
            android:textSize="16sp"
            android:layout_marginStart="45dp"
            android:layout_marginEnd="45dp"
            />

        <android.support.design.widget.TextInputLayout
            android:id="@+id/textInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/login_password_padding"
            android:layout_marginStart="@dimen/login_password_field_padding"
            app:passwordToggleDrawable="@drawable/login_password_eye"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@android:color/black">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/passwordTextField"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="0dp"
                android:backgroundTint="@color/colorDivider"
                android:imeOptions="actionDone"
                android:inputType="textPassword"
                android:singleLine="true"
                android:textColor="@color/colorItemMajor"
                android:textSize="@dimen/login_password_label_textsize" />

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

        <LinearLayout
            android:id="@+id/default_login_button"
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:gravity="center"
            android:clickable="true"
            android:focusable="true"
            android:layout_height="55dp"
            android:layout_marginStart="45dp"
            android:layout_marginEnd="45dp"
            android:layout_marginTop="45dp"
            android:background="@color/colorBlack">

            <ImageView
                android:id="@+id/loginButtonIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|center_horizontal"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/LoginButtonLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|center_horizontal"
                android:text="Login"
                android:textAppearance="@style/FilledLoginButtonTextAppearance" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Solution

  • I think you see this on layout preview . compile it try to run then you see its working gud. this gap is because you use floating edit text. – Harwinder Singh

    This worked!