How to set custom font in .xml file instead of .java file?

As other answers suggest, you may use a font downloaded from google: Android Api 16+

open the textAppearance spinner in the designer: Choose a font for your View (Tap More Fonts...) like so:

enter image description here


In the dialog choose your custom font and download it to your project:
enter image description here

Now, you can refer to this font from xml using the fontFamily attribute:

    <Button
    android:id="@+id/btnTapMe"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/rounded_button"
    android:fontFamily="@font/aclonica"

    android:text="Tap Me!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

As a bonus, you can also use it from code: see snippet:

Toast toast = Toast.makeText(this, yourString, Toast.LENGTH_SHORT);
LinearLayout layout = (LinearLayout) toast.getView();
TextView tvToast = (TextView) layout.getChildAt(0);

//Here is the relevant part:
Typeface typeface = ResourcesCompat.getFont(this, R.font.aclonica);
tvToast.setTypeface(typeface);
toast.show();

For your reference,

 public class MyTextView extends TextView {

    public MyTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public MyTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyTextView(Context context) {
        super(context);
        init();
    }

    public void init() {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "font/yourfont.ttf");
        setTypeface(tf ,1);

    }
}

In XML,

 <you_package.MyTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"       
        android:textSize="20sp"
        android:text="Your text"
        />

Android API 16+

Beginning with Android 8.0 (API 26), there is native support for setting the fonts in XML. However, using the support library extends this down to Android 4.1 (API 16).

enter image description here

1. Add a font to your project

  • Right click the res folder and go to New > Android Resource Directory. Type font as the name and font as the Resource type.
  • Copy and paste your font into the new res/font directory. I'm just using a single font in my example, the regular dancing script font. I renamed it to dancing_script.ttf just to avoid any potential naming problems with upper case or illegal characters.

2. Create a font-family XML file.

  • Right click the res/font folder and choose New > Font Resource File. Call it whatever you want. I'm calling mine my_custom_font.xml.

  • Paste in the following code. Note that the attributes are set twice, once for android (API 26+) and once for app (API 16+).

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

3. Set the font in XML

Now you can just use the fontFamily attribute to set the font in XML.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:fontFamily="@font/my_custom_font" />

Notes

  • Read the documentation for more help.
  • If you need to support pre-API 16, then just set the font programmatically.

As per the documentation

Android 8.0 (API level 26) introduces a new feature, Fonts in XML, which lets you use fonts as resources. You can add the font file in the res/font/ folder to bundle fonts as resources. These fonts are compiled in your R file and are automatically available in Android Studio. You can access the font resources with the help of a new resource type, font. For example, to access a font resource, use @font/myfont, or R.font.myfont. To use the Fonts in XML feature on devices running Android API version 14 and higher, use the Support Library 26.

To add fonts as resources, perform the following steps in the Android Studio:

1.Right-click the res folder and go to New > Android resource directory. The New Resource Directory window appears.

2.In the Resource type list, select font, and then click OK. Note: The name of the resource directory must be font.

3.Add your font files in the font folder.

Creating a font family

A font family is a set of font files along with its style and weight details. In Android, you can create a new font family as an XML resource and access it as a single unit, instead of referencing each style and weight as separate resources. By doing this, the system can select the correct font based on the text style you are trying to use.

To create a font family, perform the following steps in the Android Studio:

1.Right-click the font folder and go to New > Font resource file. The New Resource File window appears.

2.Enter the file name, and then click OK. The new font resource XML opens in the editor.

3.Enclose each font file, style, and weight attribute in the element. The following XML illustrates adding font-related attributes in the font resource XML:

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

Using fonts in XML layouts

In the layout XML file, set the fontFamily attribute to the font file you want to access.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/lobster"/>

Open the Properties window to set the font for the TextView. Select a view to open the Properties window. Note: The Properties window is available only when the design editor is open. Select the Design tab at the bottom of the window.

Expand the textAppearance property, and then select the font from the fontFamily list.

Adding fonts to style

Open the styles.xml, and set the fontFamily attribute to the font file you want to access.

 <style name="customfontstyle" parent="@android:style/TextAppearance.Small">
    <item name="android:fontFamily">@font/lobster</item>
</style>

Tags:

Android

Recent Posts