Set Custom Fonts for TextView and EditText in Android
UPDATE: To add Custom Fonts using fontFamily, Check out this article
Custom Fonts
In this quick tutorial we will see how to set your desired Custom fonts to the TextViews and EditTexts. These solutions can also be applied for Buttons. There are several ways to achieve this. We will see all of them one by one.
Note: In the new Android O, font is promoted as a resource type. That means custom fonts can be set the same way we set textcolor and background!
Create Assets folder
First of all create the Assets Folder if its not created already. Create the Assets folder inside main folder i.e. src/main/assets/. Once the Assets folder is created, create a subfolder inside assets folder called fonts. So now the folder hierarchy looks like src/main/assets/fonts.
Add all your custom fonts with proper naming inside the fonts folder. Android supports both .ttf and .otf formats.
Setting Custom Font to TextView (or EditText/Button)
lets consider the below mentioned TextView as the reference for examples.
|
1 2 3 4 5 |
TextView tvText = (TextView)findViewById(R.id.tv_text); |
Method One
In the first method we will set the font to TextView in the Activity or Fragment directly using TypeFace
|
1 2 3 4 5 6 7 8 9 |
// Create a TypeFace using font from Assets folder Typeface mtypeFace = Typeface.createFromAsset(getAssets(), "fonts/MyFont.ttf"); // set TypeFace to the TextView or Edittext tvText.setTypeface(mtypeFace); |
So in this method you need to set the TypeFace individually to all the TextViews / EditTexts / Buttons.
Method Two
In this method we will create a Custom TextView (or EditText / Button) class and use it directly in Layout xml and reuse it where ever we need to have custom fonts.
Lets start by creating the Custom TextView Class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
public class CustomTextView extends TextView { // Can also be replaced with EditText or Button private static final String TAG = "CustomTextView"; public CustomTextView(Context context) { super(context); } public CustomTextView(Context context, AttributeSet attrs) { super(context, attrs); setCustomFont(context, attrs); } public CustomTextView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); setCustomFont(context, attrs); } private void setCustomFont(Context ctx, AttributeSet attrs) { TypedArray a = ctx.obtainStyledAttributes(attrs, R.styleable.CustomTextView); String customFont = a.getString(R.styleable.CustomTextView_customFont); setCustomFont(ctx, customFont); a.recycle(); } public boolean setCustomFont(Context ctx, String asset) { Typeface typeface = null; try { typeface = Typeface.createFromAsset(ctx.getAssets(),“fonts/”+asset); } catch (Exception e) { Log.e(TAG, "Unable to load typeface: "+e.getMessage()); return false; } setTypeface(typeface); return true; } } |
Now create an xml file attrs.xml and place it inside res/values. Don’t create if it already exists, just copy – paste the below code in it.
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomTextView"> <attr name="customFont" format="string"/> </declare-styleable> </resources> |
Now since our Custom TextView is created, Lets see how to use them. Let below code be your Layout XML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:foo="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.mypackage.CustomTextView android:id="@+id/tv_custom" android:layout_height="match_parent" android:layout_width="match_parent" android:text="@string/sample_text" foo:customFont="my_font.otf"> </com.mypackage.CustomTextView> </LinearLayout> |
Use this custom font TextView wherever you want.
Hope you found this quick tutorial helpful. Please let me know your comments below.
Error:(64) No resource identifier found for attribute ‘customFont’ in package ‘com.archimedia.moveng’
Sorry, just delete previous comment.
What does ‘foo:’ mean?
That is just a namespace. You may write your own.
Check the linearlayout code.. foo is defined there
Thanks a lot!
Anyway there is an error in here:
typeface = Typeface.createFromAsset(ctx.getAssets(), asset);
In your example you said:
“Once the Assets folder is created, create a subfolder inside assets folder called fonts.”
So that line should be:
typeface = Typeface.createFromAsset(ctx.getAssets(), “fonts/”+asset);
Doesn’t matter, thanks a lot!
Thanks for pointing out, I will make the change! 🙂
worked like a charm, great guide.
Thank you!
Is it work to Edittext if we do like the same?
Yes it will work
not working this code