font family for hint not working properly in TextInputLayout

Issue

I'm trying to create a different font style for the hint and the text. Something similar to this.

My code so far:

 <com.google.android.material.textfield.TextInputLayout
    android:id="@+id/filledTextField2"
    style="@style/Widget.TextInputLayout.Primary"
    android:layout_width="233dp"
    android:layout_height="93dp"
    android:layout_marginTop="216dp"
    android:hint="FIRST NAME"
    app:layout_constraintEnd_toEndOf="parent"
    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:textAppearance="@style/InputTextFont"
        android:textSize="@dimen/text_input_font_size" />

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

styles.xml

 <style name="Widget.TextInputLayout.Primary" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="hintTextAppearance">@style/TextAppearance.App.Caption</item>
    <item name="boxStrokeColor">@color/colorPrimary</item>
    <item name="android:textColorHint">@color/colorSecondary</item>
    <item name="hintTextColor">@color/colorPrimary</item>
    <item name="boxStrokeWidth">@dimen/text_input_box_width</item>
</style>

 <style name="TextAppearance.App.Caption" parent="TextAppearance.AppCompat.Caption">
    <item name="fontFamily">@font/poppins_bold</item>
    <item name="android:fontFamily">@font/poppins_bold</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:textSize">15sp</item>
</style>

  <style name="InputTextFont" parent = "">
    <item name="fontFamily">@font/poppins_regular</item>
    <item name="android:fontFamily">@font/poppins_regular</item>
    <item name="android:textSize">@dimen/text_input_font_size</item>
</style>

After playing with the code a bit, it seems that the font size in "TextAppearance.App.Caption" works, meaning the hint's font size changes properly, but the font family does not. However, if I use "android:fontFamily="@font/poppins_bold" in "TextInputEditText", it works, but then both the hint and text become the same.

My question is how do I override them to work with custom fonts? Would be a great help if someone helps me out! TIA!

Solution

According to this thread, setting the font in the XML file won't work because it's always overriden by the inner EditText style.

A temporary workaround for now in Kotlin would be to set the HintTextAppearance after the layout is created:

yourInputLayout.doOnLayout { 
    yourInputLayout
    .setHintTextAppearance(R.style.YourHintStyle)
}

It's always good to turn it into an extension method if you're going to reuse it:

fun TextInputLayout.setHintStyle(id: Int) {
    doOnLayout {
        setHintTextAppearance(id)
    }
}

Usage:

yourInputLayout.setHintStyle(R.style.YourHintStyle)

Answered By - Dimas Mendes