how to resize the textField and disable floating label in a TextInputLayout?

Question

I'm using the Material design library to make a rounded editText, and I was able to do that but now I want it to look a bit smaller, I used the dense textField style but I still want the height of the view to be smaller than that. The problem is that floating Label tag, I haven't set a hint for the textField but the Label Tag is still taking up some empty space.

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:endIconMode="custom"
        app:endIconDrawable="@drawable/ic_speaker_24dp"
        app:layout_constraintBottom_toBottomOf="@+id/topBar_view"
        app:layout_constraintEnd_toEndOf="@+id/topBar_view"
        app:layout_constraintStart_toEndOf="@+id/separater_line"
        app:layout_constraintTop_toTopOf="parent"
        app:boxCornerRadiusTopStart="20dp"
        app:boxCornerRadiusTopEnd="20dp"
        app:boxCornerRadiusBottomStart="20dp"
        app:boxCornerRadiusBottomEnd="20dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>

I just want the textField to look like the chrome url search bar, slim and the hint disappear when typing, not a floating Label.

Edit: I tried the app:hintEnabled="false" attribute but there is still an empty space

Try this also app:hintAnimationEnabled="false" – Anas Mehar Sep 03 '19 at 00:36 — Anas Mehar, Sep 03 '19 at 00:36
try this app:hintEnabled="false" inside TextInputLayout tag – unzila Sep 03 '19 at 04:37 — unzila, Sep 03 '19 at 04:37

score 28 · Accepted Answer · answered Sep 03 '19 at 05:46

You can use app:hintEnabled="false" to disable the floating label functionality. Also you can customize the dense style.

You can use something like:

  <com.google.android.material.textfield.TextInputLayout
        app:hintEnabled="false"
        style="@style/MyDenseOutlined"
        ...>

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

  </com.google.android.material.textfield.TextInputLayout>

with this style:

  <style name="MyDenseOutlined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="materialThemeOverlay">@style/MyThemeOverlayOutlinedDense</item>

  </style>

  <style name="MyThemeOverlayOutlinedDense">
    <item name="editTextStyle">@style/MyTextInputEditText_outlinedBox_dense_h
    </item>
  </style>

  <style name="MyTextInputEditText_outlinedBox_dense_h" parent="@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">8dp</item>
  </style>

Here the results (with a default style and the custom style):

This worked perfectly for me, but can I understand why we made 3 Styles referencing each others instead of making one directly? This thing confused me a little. — Ziad H., Sep 04 '19 at 16:52
It is not so simple. The `editTextStyle` is an attribute defined at the AppTheme level and it is used by all components (like the colorPrimary).You can't use it inside a`TextInputLayout.OutlinedBox` style.The `materialThemeOverlay` attribute allows to override theme attributes for this specific style(`MyDenseOutlined`). In this way only the component with this style will used the custom `editTextStyle`. — Gabriele Mariotti, Sep 04 '19 at 18:20
I don't see a difference in the result compared to nh7's answer which is a lot simpler, BUT these solution are all bad, I think. If you don't need a hint you could use EditText. I use TextInputLayout because of it's hint. I can't see any other benefit if you already change it's style. — The incredible Jan, Jun 29 '21 at 08:53

score 2 · Answer 2 · answered Oct 16 '20 at 22:22

Just set the TextInputEditText padding to 8dp for example. You shouldn't set a label/hint in that case.

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/input_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:text="Some text" />

        </com.google.android.material.textfield.TextInputLayout>

Will look like this:

score 0 · Answer 3 · answered May 27 '20 at 03:43

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/etemailLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint=" ">

        <EditText
            android:id="@+id/txtemail"
            style="@style/login_edittext"
            android:hint="Enter Your Email Address"
            android:inputType="textEmailAddress" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/etPasswordLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint=" "
        android:scrollbars="vertical"
        app:counterEnabled="true"
        app:passwordToggleEnabled="true">

        <EditText
            android:id="@+id/txtpassword"
            style="@style/login_edittext"
            android:hint="Enter Password"
            android:inputType="textPassword"
            android:maxLength="8"
            android:scrollbars="vertical" />

    </com.google.android.material.textfield.TextInputLayout>

for apply style to your EditText put below code in Styles.xml ..

<style name="login_edittext">
        <item name="android:layout_marginTop">15dp</item>
        <item name="android:background">@drawable/edittext_background</item>
        <item name="android:textColorHint">#FFFFFF</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

for backgroud effect create edittext_background.xml in drawable..

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="7dp" />
    <solid android:color="#80ffffff" />
    <padding android:left="10dp" android:right="10dp"
        android:top="10dp" android:bottom="10dp" />
    <stroke android:width="2dp" android:color="#FFFFFF" />
</shape>

how to resize the textField and disable floating label in a TextInputLayout?

3 Answers3