font family for hint not working properly in TextInputLayout

Question

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!

Muscovado

github.com/material-components/material-components-android/… – Girondist

I checked it out! Thanks. It seems like it's a bug in their library. Hope they fix it – Muscovado

Answer 1

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)

Bukhara

I was eating my mind for this problem. "setting the font in the XML file won't work because it's always overriden by the inner EditText style.". Now I'm relieved, thanks :) – Blanc

Answer 2

Just add the android:fontFamily="YOUR_FONT" straight to the inner edit text and NOT to the TextInputLayout

Sunburn

The OP wants to have a different style for each the hint and the input text. Your solution sets both of those to "YOUR_FONT". – Humoresque