change font for editText hint

Question

Is it possible to change the font for the hint displayed in the EditText field? I want to set the font in the xml itself.

possible duplicate: http://stackoverflow.com/questions/4716959/setting-typeface-of-hint-in-textedit — thepoosh, Nov 06 '12 at 13:24
As pointed out, this is a duplicate. You can change the hint color, but not the typeface. — jsmith, Nov 06 '12 at 13:34
you can check my answer [here](http://stackoverflow.com/a/40695930/3578171) hope it works. — Dmila Ram, Nov 19 '16 at 17:39

score 27 · Answer 1 · answered Feb 10 '16 at 17:56

You can change it with a SpannableString and a Custom TypefaceSpan.

First, create a Custom TypefaceSpan class:

public class CustomTypefaceSpan extends TypefaceSpan {
    private final Typeface mNewType;

    public CustomTypefaceSpan(Typeface type) {
        super("");
        mNewType = type;
    }

    public CustomTypefaceSpan(String family, Typeface type) {
        super(family);
        mNewType = type;
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        applyCustomTypeFace(ds, mNewType);
    }

    @Override
    public void updateMeasureState(TextPaint paint) {
        applyCustomTypeFace(paint, mNewType);
    }

    private static void applyCustomTypeFace(Paint paint, Typeface tf) {
        int oldStyle;
        Typeface old = paint.getTypeface();
        if (old == null) {
            oldStyle = 0;
        } else {
            oldStyle = old.getStyle();
        }

        int fake = oldStyle & ~tf.getStyle();
        if ((fake & Typeface.BOLD) != 0) {
            paint.setFakeBoldText(true);
        }

        if ((fake & Typeface.ITALIC) != 0) {
            paint.setTextSkewX(-0.25f);
        }

        paint.setTypeface(tf);
    }
}

Then just set the TypefaceSpan to a SpannableString:

TypefaceSpan typefaceSpan = new CustomTypefaceSpan(typeface);
SpannableString spannableString = new SpannableString(hintText);

spannableString.setSpan(typefaceSpan, 0, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

And finally just set the hint of your EditText:

mEditText.setHint(spannableString);

This is a correct answer for me, thanks @francisco_ssb. It works perfectly. — Menion Asamm, May 08 '16 at 19:08
Awesome use of a Span! In my case, I didn't need a true "custom Typeface" but just a system font and appearance that was different than the regular text. I used a TextAppearanceSpan on the hint and it worked like a charm. — Lisa Wray, Mar 20 '18 at 18:50
but, this approach doesn't float the current hint. Any suggestion how to make it float to the above field? @LisaWray — mochadwi, Dec 11 '18 at 12:15
@mochadwi the "floating" you're thinking of is probably an effect of TextInputLayout, a Material design wrapper for EditText. I'm on mobile right now, but just Google :) — Lisa Wray, Dec 13 '18 at 01:14
I see, so, with this code, plus hint on TextInputLayout, should do the trick? *cmiiw @LisaWray — mochadwi, Dec 16 '18 at 12:10

score 7 · Answer 2 · answered Dec 09 '15 at 12:11

7

I haven't find out any useful way to change hint font in XML.But you can achieve like this:

mEt.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        if(s.length()== 0) {
            //mEt.setTypeFace(normalFont);
        }else{
           // mEt.setTypeFace(hintFont);
        }
    }

    @Override
    public void afterTextChanged(Editable s) {
    }
});

answered Dec 09 '15 at 12:11

EmotionOF

81
1
3

1

Simple solution, as it should be – Drake Dec 21 '17 at 16:36
@Darius lol actually looks like there is no better... – Renetik Sep 28 '20 at 05:05

score 5 · Answer 3 · answered Oct 15 '16 at 13:59

There is a very simple way to do it. I just did in my App and it worked. The Key is set Facetype of your TextInputLayout too along with EditText.

mEmailView.setTypeface(Typeface.createFromAsset(getAssets(), getString(R.string.app_font)));
((TextInputLayout) findViewById(R.id.tilEmail)).setTypeface(Typeface.createFromAsset(getAssets(), getString(R.string.app_font)));

Ayaz Alifov · Answer 4 · 2017-08-16T10:44:48.617

@francisco_ssb's answer is correct. However, I will provide an alternative solution which helps to change not only a hint's font, but also its size and style. I hope this solution will be helpful.

1) Create a custom Hint object:

import android.graphics.Typeface;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.style.MetricAffectingSpan;

public class CustomHint extends SpannableString
{
    public CustomHint(final CharSequence source, final int style)
    {
        this(null, source, style, null);
    }

    public CustomHint(final CharSequence source, final Float size)
    {
        this(null, source, size);
    }

    public CustomHint(final CharSequence source, final int style, final Float size)
    {
        this(null, source, style, size);
    }

    public CustomHint(final Typeface typeface, final CharSequence source, final int style)
    {
        this(typeface, source, style, null);
    }

    public CustomHint(final Typeface typeface, final CharSequence source, final Float size)
    {
        this(typeface, source, null, size);
    }

    public CustomHint(final Typeface typeface, final CharSequence source, final Integer style, final Float size)
    {
        super(source);

        MetricAffectingSpan typefaceSpan = new CustomMetricAffectingSpan(typeface, style, size);
        setSpan(typefaceSpan, 0, source.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    }
}

2) Create custom MetricAffectingSpan object:

import android.graphics.Typeface;
import android.text.TextPaint;
import android.text.style.MetricAffectingSpan;

public class CustomMetricAffectingSpan extends MetricAffectingSpan
{
    private final Typeface _typeface;
    private final Float    _newSize;
    private final Integer  _newStyle;

    public CustomMetricAffectingSpan(Float size)
    {
        this(null, null, size);
    }

    public CustomMetricAffectingSpan(Float size, Integer style)
    {
        this(null, style, size);
    }

    public CustomMetricAffectingSpan(Typeface type, Integer style, Float size)
    {
        this._typeface = type;
        this._newStyle = style;
        this._newSize = size;
    }

    @Override
    public void updateDrawState(TextPaint ds)
    {
        applyNewSize(ds);
    }

    @Override
    public void updateMeasureState(TextPaint paint)
    {
        applyNewSize(paint);
    }

    private void applyNewSize(TextPaint paint)
    {
        if (this._newStyle != null)
            paint.setTypeface(Typeface.create(this._typeface, this._newStyle));
        else
            paint.setTypeface(this._typeface);

        if (this._newSize != null)
            paint.setTextSize(this._newSize);
    }
}

3) Use:

Typeface newTypeface = Typeface.createFromAsset(getAssets(), "AguafinaScript-Regular.ttf");
CustomHint customHint = new CustomHint(newTypeface, "Enter some text", Typeface.BOLD_ITALIC, 60f);
        //        CustomHint customHint = new CustomHint(newTypeface, "Enter some text", Typeface.BOLD_ITALIC);
        //        CustomHint customHint = new CustomHint(newTypeface, "Enter some text", 60f);
        //        CustomHint customHint = new CustomHint("Enter some text", Typeface.BOLD_ITALIC, 60f);
        //        CustomHint customHint = new CustomHint("Enter some text", Typeface.BOLD_ITALIC);
        //        CustomHint customHint = new CustomHint("Enter some text", 60f);

customEditText.setHint(customHint);

score 2 · Answer 5 · answered Nov 06 '12 at 13:33

2

Its not possible in XML -

Text and hint can only have the same font in XML.

answered Nov 06 '12 at 13:33

Sreeram

564
1
5
15

HOSHYAR Ahmadpour · Answer 6 · 2016-11-29T20:09:09.990

2

I can change the hint font by use this library .

After compiling the library you must create a class of applications and the class definition following command:

CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()
                  .setDefaultFontPath("font.ttf")
                  .setFontAttrId(R.attr.fontPath)
                  .build()
          );

After each activity you want Override it with the following command:

@Override
      protected void attachBaseContext(Context newBase) {
          super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
      }

edited Nov 29 '16 at 20:09

answered Nov 29 '16 at 14:54

HOSHYAR Ahmadpour

309
4
5

1

After compiling the library you must create a class of applications and the class definition following command: CalligraphyConfig.initDefault(new CalligraphyConfig.Builder() .setDefaultFontPath("font.ttf") .setFontAttrId(R.attr.fontPath) .build() ); After each activity you want Override it with the following command: @Override protected void attachBaseContext(Context newBase) { super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase)); } – HOSHYAR Ahmadpour Nov 29 '16 at 15:22
@johnny5, this answer helped me as I was using the Calligraphy library that this answer refers to. HOSHYAR Ahmadpour also explained the answer. Thank you for the answer HOSHYAR Ahmadpour. – Sakiboy Dec 03 '16 at 23:09
2

@Sakiboy yeah that's good, I was in the review queues assuring that future people would be able to use this answer, I upvoted him after he fixed his answer – johnny 5 Dec 03 '16 at 23:14

score 1 · Answer 7 · answered Mar 20 '19 at 07:40

Take the approach of using a text input layout and placing a text input edit text inside

 <com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_input_layout_Til">

   <com.google.android.material.textfield.TextInputEditText
      android:id="@+id/editText"/>

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

On the Fragment/Activity , Set the font you want for the hint onto the TextInputLayout(text_input_layout_Til) Then set the font on the edit text(editText) as well / If you do this , The text the user will input and the hint will have different fonts

score 0 · Answer 8 · answered Feb 01 '19 at 12:56

With Android 8.0 (API level 26) comes a new feature that gives a possibility to change font in xml for the hint displayed in the EditText. Guide based on Fonts in XML.

Steps:

1) Create a new resource directory: right-click the res folder and go to New -> Android resource directory.

2) Set name of resource directory as font.

3) In the Resource type list, select font, and then click OK.

4) Add your custom font(e.g. my_font.ttf) in the font folder.

5) In the layout XML, set the fontFamily attribute to the font file:

<EditText
    android:id="@+id/edit_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/my_font"/>

... or if you want to do it programmatically:

val typeface = resources.getFont(R.font.my_font)
edit_text.typeface = typeface

To use the Fonts in XML feature on devices running Android 4.1 (API level 16) and higher, use the Support Library 26:

Note: When you declare font families in XML layout through the support library, use the app namespace to ensure your fonts load.

1) In font directory create custom_font.xml

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/my_font"/>
</font-family>

2) Set the fontFamily attribute:

 <EditText
    android:id="@+id/edit_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/custom_font"/>

... or if you want to do it programmatically:

val typeface = ResourcesCompat.getFont(context, R.font.custom_font)
edit_text.typeface = typeface

score 0 · Answer 9 · answered Aug 20 '20 at 11:13

In Kotlin:

            nomeEditText.setText("New Text") //changes the text
            nomeEditText.isEnabled = false //disables editable
            nomeEditText.setBackgroundColor(Color.parseColor("#ffffff")) //changes background
            nomeEditText.setTextColor(Color.parseColor("#737373")) //changes color text
            nomeEditText.setTextSize(TypedValue.COMPLEX_UNIT_SP,28f) //changes text size
            nomeEditText.typeface = Typeface.create("@font/roboto", Typeface.BOLD) //changes font familly
            nomeEditText.gravity = Gravity.CENTER_HORIZONTAL //centralize

score -3 · Answer 10 · answered Nov 10 '17 at 07:10

-3

use this code:

edittext.setAccentTypeface(typeface);

answered Nov 10 '17 at 07:10

Hossein Farrokh

1
1

This is not available for EditText. – android developer Feb 19 '18 at 13:50

change font for editText hint

10 Answers10

Linked