Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 824
Ziad H. Avatar asked Nov 29 '22 00:11

Ziad H.


1 Answers

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

enter image description here enter image description here

like image 93
Gabriele Mariotti Avatar answered Dec 05 '22 04:12

Gabriele Mariotti