Sunday, 9 May 2021

TextInputLayout label interferring with entered text

In my new Android app, the label of the TextInputLayout appears in the space where the user types the input. This causes the entered text to render on top of the label/hint:

When the user first loads the page: When the user first loads the page

When the user taps on the text input, the label shrinks towards the top left as expected: When the user taps on the text input

When the user types an entry, it types over the label: When the user types an entry

I have two questions:

  1. What is the appropriate behavior here following Material Design guidelines?
  2. How do I accomplish this behavior?

Here is my layout file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/Theme.JobSearch"
    tools:context=".ui.JobsDetailsFragment">

    <TextView
        android:id="@+id/text_new_position"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/new_position"
        android:theme="@style/Theme.JobSearch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_new_position">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="@string/title"
            android:theme="@style/Theme.JobSearch"
            app:layout_constraintTop_toTopOf="parent" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.JobSearch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout">

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/position_save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:contentDescription="@string/position_save"
        android:src="@drawable/done"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Update

I tried moving android:hint to the TextInputLayout and still see the same behavior:

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/title_input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/title"
        android:theme="@style/Theme.JobSearch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_new_position">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintTop_toTopOf="parent" />
    </com.google.android.material.textfield.TextInputLayout>

For reference, here is themes.xml:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.JobSearch" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

    <style name="Theme.JobSearch.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="Theme.JobSearch.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="Theme.JobSearch.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>


from TextInputLayout label interferring with entered text

No comments:

Post a Comment