Change font of the floating label EditText and TextInputLayout

Question

Someone tried to change the font of the floating label? I changed the source of EditText but the font of the floating label did not change, I am very grateful to those who help me

Code:

               <android.support.design.widget.TextInputLayout
                    android:id="@+id/tilTextoDescricao"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@id/tilValorUnidade"
                    android:layout_marginTop="10dp">

                    <EditText
                        android:id="@+id/etTextoDescricao"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:hint="Descrição"
                        android:textSize="15dp"
                        android:inputType="text" />

                </android.support.design.widget.TextInputLayout>

----------------- 

   etTextoDescricao= (EditText) findViewById(R.id.etTextoDescricao);
  etTextoDescricao.setTypeface(CustomTypeface.getTypefaceMediumDefault(this));

Solution 1

As of Design Library v23, you can use TextInputLayout#setTypeface().

This will set the typeface on both the expanded and floating hint.

Here is the feature request where it was discussed on b.android.com.

EDIT: The error view typeface was not being set, but is now fixed in v25.1.0.

Solution 2

Unfortunately, you'll have to use reflection to handle this.

The floating label is drawn by CollapsingTextHelper, which is an internal, package-private class and isn't setup to handle spans. So, using something like a custom TypefaceSpan won't work in this case.

Because this uses reflection, it isn't guaranteed to work in the future.

Implementation

final Typeface tf = Typeface.createFromAsset(getAssets(), "your_custom_font.ttf");
final TextInputLayout til = (TextInputLayout) findViewById(R.id.yourTextInputLayout);
til.getEditText().setTypeface(tf);
try {
    // Retrieve the CollapsingTextHelper Field
    final Field cthf = til.getClass().getDeclaredField("mCollapsingTextHelper");
    cthf.setAccessible(true);

    // Retrieve an instance of CollapsingTextHelper and its TextPaint
    final Object cth = cthf.get(til);
    final Field tpf = cth.getClass().getDeclaredField("mTextPaint");
    tpf.setAccessible(true);

    // Apply your Typeface to the CollapsingTextHelper TextPaint
    ((TextPaint) tpf.get(cth)).setTypeface(tf);
} catch (Exception ignored) {
    // Nothing to do
}

Error view

If you needed to change the font of the error, you could do one of two things:

1. Use Reflection grab the error TextView and apply the Typeface much like before
2. Use a custom span. Unlike the floating label, the error view used by TextInputLayout is just a TextView, so it's able to handle spans.

Using reflection

final Field errorField = til.getClass().getDeclaredField("mErrorView");
errorField.setAccessible(true);
((TextView) errorField.get(til)).setTypeface(tf);

Using a custom span

final SpannableString ss = new SpannableString("Error");
ss.setSpan(new FontSpan(tf), 0, ss.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
til.setError(ss);

private static final class FontSpan extends MetricAffectingSpan {

    private final Typeface mNewFont;

    private FontSpan(Typeface newFont) {
        mNewFont = newFont;
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        ds.setTypeface(mNewFont);
    }

    @Override
    public void updateMeasureState(TextPaint paint) {
        paint.setTypeface(mNewFont);
    }

}

Results

The font I'm using is Smoothie Shoppe.

Solution 3

I'm using new MaterialComponents theme and none of the answers helped me.

Had to play with styles and themes on my own. Will post a chunk of styles here in case somebody faces the same issue.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
  ...
  <item name="textInputStyle">@style/CustomFontTextInputLayout</item>
</style>  

<!-- region TextInputLayout & TextInputEditText styles -->
<style name="TextInputLayout.OutlineBox.CustomFont" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
  <item name="android:theme">@style/ThemeOverlay.TextInputEditText.OutlinedBox.CustomFont</item>
</style>

<style name="ThemeOverlay.TextInputEditText.OutlinedBox.CustomFont" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
  <item name="editTextStyle">@style/TextInputEditText.OutlinedBox.CustomFont</item>
</style>

<style name="TextInputEditText.OutlinedBox.CustomFont" parent="Widget.MaterialComponents.TextInputEditText.OutlinedBox">
  <item name="android:fontFamily">@font/my_font</item>
</style>

<style name="CustomFontTextInputLayout" parent="Widget.Design.TextInputLayout">
  <item name="hintTextAppearance">@style/TextInputLayoutHintText</item>
  <item name="helperTextTextAppearance">@style/TextInputLayoutHelperText</item>
  <item name="errorTextAppearance">@style/TextInputLayoutErrorText</item>
</style>

<style name="TextInputLayoutHintText" parent="TextAppearance.Design.Hint">
  <item name="android:fontFamily">@font/my_font</item>
</style>

<style name="TextInputLayoutHelperText" parent="TextAppearance.Design.HelperText">
  <item name="android:fontFamily">@font/my_font</item>
</style>

<style name="TextInputLayoutErrorText" parent="TextAppearance.Design.Error">
  <item name="android:fontFamily">@font/my_font</item>
</style>
<!-- endregion -->

Then in xml layout:

<android.support.design.widget.TextInputLayout
    style="@style/TextInputLayout.OutlineBox.CustomFont"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/first_name"/>
</android.support.design.widget.TextInputLayout>

Here's the result:

Solution 4

i just found a simple solution and it's worked for me:

in this way you can set the typeface to hint of any edit text:

in layout.xml :

 <android.support.design.widget.TextInputLayout
            android:id="@+id/text_input1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <EditText
                android:id="@+id/edt_user"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/username"/>
        </android.support.design.widget.TextInputLayout>

and in java class :

public class MainActivity extends AppCompatActivity {

EditText editText;
TextInputLayout textInputLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Typeface font_yekan= Typeface.createFromAsset(getAssets(), "fonts/byekan.ttf");
        textInputLayout= (TextInputLayout) findViewById(R.id.text_input1);
    textInputLayout.setTypeface(font_yekan);
      }
 }

Solution 5

Here is a custom class implementation for adneal's answer.

public class CustomTextInputLayout extends TextInputLayout {

    public CustomTextInputLayout(Context context) {
        super(context);
        initFont(context);
    }

    public CustomTextInputLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initFont(context);
    }

    private void initFont(Context context) {
        final Typeface typeface = Typeface.createFromAsset(
                context.getAssets(), "fonts/YOUR_CUSTOM_FONT.ttf");

        EditText editText = getEditText();
        if (editText != null) {
            editText.setTypeface(typeface);
        }
        try {
            // Retrieve the CollapsingTextHelper Field
            final Field cthf = TextInputLayout.class.getDeclaredField("mCollapsingTextHelper");
            cthf.setAccessible(true);

            // Retrieve an instance of CollapsingTextHelper and its TextPaint
            final Object cth = cthf.get(this);
            final Field tpf = cth.getClass().getDeclaredField("mTextPaint");
            tpf.setAccessible(true);

            // Apply your Typeface to the CollapsingTextHelper TextPaint
            ((TextPaint) tpf.get(cth)).setTypeface(typeface);
        } catch (Exception ignored) {
            // Nothing to do
        }
    }
}

In your XML files now you need to use CustomTextInputLayout instead of TextInputLayout and it will work out of the box.

<your.package.CustomTextInputLayout
    android:id="@+id/textInputLayout_email"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <AutoCompleteTextView
        android:id="@+id/editText_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint_email"
        android:inputType="textEmailAddress" />

Thanks adneal for the answer.

View more solutions