TextInputLayout move the hint label and change it's background color when focused

Question

I am trying to customize materials TextInpuLayout.OutlinedBox and TextInputEditText.

My current state is like following image

What I want to do is remove the background of the hint label so that it doesn't create that ugly cutout. Like this:

Or if that isn't possible moving the label above the input would also do the trick:

It would be nice if this was achievable using styles so that I could easily apply this to other text input elements as well. I'm pretty new to android so please be considerate.

Here's the code for the styling:

<style name="MyTheme" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:textSize">14sp</item>
    <item name="boxCornerRadiusTopStart">@dimen/textInputCornerRadius</item>
    <item name="boxCornerRadiusTopEnd">@dimen/textInputCornerRadius</item>
    <item name="boxCornerRadiusBottomStart">@dimen/textInputCornerRadius</item>
    <item name="boxCornerRadiusBottomEnd">@dimen/textInputCornerRadius</item>
    <item name="boxBackgroundColor">@color/primaryDarkColorBackground</item>
    <item name="boxStrokeColor">@color/text_input_box_stroke</item>
</style>
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
    <item name="android:background">@null</item>
    <item name="android:paddingStart">30dp</item>
</style>

And here is how I define my input in the layout:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/username_layout"
        style="@style/MyTheme"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="48dp"
        android:layout_marginEnd="48dp"
        android:hint="@string/email_or_username"
        app:boxBackgroundMode="outline"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.10">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/username"
            style="@style/EditTextStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.textfield.TextInputLayout>

Can you provide some code what you have implemented so far ? — Swayangjit, Nov 24 '19 at 16:51
@Swayangjit it's just the default outlinedbox with a transparent box stroke, a background color and a little padding. — ThizzHead, Nov 24 '19 at 17:51
I'm having the same issue. I'm building a TextInputLayout component where I don't know which background it's going to be placed on and the HintText background has the same issue as first example from above/OP (square around text). Haven't found a way to programmatically target it either. — skepnaden, Mar 16 '20 at 08:35

score 1 · Answer 1 · answered Nov 24 '19 at 22:39

I don't think you can obtain it with the TextInputLayout.OutlinedBox style.
It is not exactly what you are looking for:

   <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Rounded"
        ..>

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

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

With:

  <style name="Widget.MaterialComponents.TextInputLayout.FilledBox.Rounded" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="shapeAppearanceOverlay">@style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout</item>
    <item name="boxStrokeColor">@color/input_text_no_underline</item>
  </style>

  <style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

The selector is used to remove the underline:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0" android:color="?attr/colorOnSurface"/>
</selector>

Note: it requires the version 1.1.0 of the library.

Hi Gabriele, this answer is very useful to me that I'm facing the same problem. I followed your solution but the underline remains. I have put the selector in the color.xml file like this: ..... Maybe the problem is ?attr/colorOnSurface? I don't have the attr directory. Thanks again for your help — michelecasati, Mar 04 '20 at 09:43
@michelecasati Try to use the same color used in the background — Gabriele Mariotti, Mar 04 '20 at 09:52
I have understood the problem. I am using a gradient as a background, so the color won't match in both cases. I have to figure it out another solution, thanks anyway for your quick help — michelecasati, Mar 04 '20 at 10:15

score -1 · Answer 2 · edited Jul 22 '20 at 07:44

-1

Try setting on the TextInputEditText:

android:background="@android:color/transparent"

edited Jul 22 '20 at 07:44

ʍѳђઽ૯ท

16,646
7
53
108

answered Jul 21 '20 at 23:28

Adriel Iclodean

80
8

TextInputLayout move the hint label and change it's background color when focused

2 Answers2