Material Design TextInput change label and helper size

Question

In Material Desing TextInput how do you change the size of the label and helper with styles XML.

I've followed the Material Design codelab, the code lab shows a label that is at least 3 times the size of mine.

My label not readable.

Codelabs label

Not sure but here is my XML code

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/new_first_name"
            style="@style/TestInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="First Name"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

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

My Style XML

    <style name="TestInput" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="hintTextAppearance">@color/black</item>
        <item name="hintTextColor">@color/black</item>
        <item name="android:paddingBottom">16dp</item>
        <item name="boxStrokeColor">@color/colorAccent</item>
        <item name="maxLines">1</item>
        <item name="helperText">@string/first_name</item>
        <item name="android:colorControlHighlight">@color/orange</item>
        <item name="counterMaxLength">20</item>
        <item name="endIconMode">clear_text</item>
        <item name="android:layout_marginTop">16dp</item>
        <item name="android:layout_marginStart">16dp</item>
        <item name="android:layout_marginEnd">16dp</item>
    </style>

Answer 1

You can use the hintTextAppearance and helperTextTextAppearance attributes in the layout or in a custom style.

Something like:

        <com.google.android.material.textfield.TextInputLayout
            app:hintTextAppearance="@style/App.hintTextAppearance"
            app:helperTextTextAppearance="@style/App.helperTextTextAppearance"
            ...>

with:

<style name="App.hintTextAppearance" parent="TextAppearance.MaterialComponents.Caption">
    <item name="android:textSize">xxsp</item>
</style>

<style name="App.helperTextTextAppearance" parent="TextAppearance.MaterialComponents.Caption">
    <item name="android:textSize">xxsp</item>
</style>