How to use specified weights for fonts in XML

问题:

Using the Fonts in XML feature you can specify various font weights for a font family. For example:

<?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:font="@font/archivo_narrow_regular" android:fontWeight="400" android:fontStyle="normal"
        app:font="@font/archivo_narrow_regular" app:fontWeight="400" app:fontStyle="normal"/>

    <font android:font="@font/archivo_narrow_regular_italic" android:fontWeight="400" android:fontStyle="italic"
        app:font="@font/archivo_narrow_regular_italic" app:fontWeight="400" app:fontStyle="italic"/>

    <font android:font="@font/archivo_narrow_medium" android:fontWeight="500" android:fontStyle="normal"
        app:font="@font/archivo_narrow_medium" app:fontWeight="500" app:fontStyle="normal"/>

    <font android:font="@font/archivo_narrow_medium_italic" android:fontWeight="500" android:fontStyle="italic"
        app:font="@font/archivo_narrow_medium_italic" app:fontWeight="500" app:fontStyle="italic"/>

    <font android:font="@font/archivo_narrow_semibold" android:fontWeight="600" android:fontStyle="normal"
        app:font="@font/archivo_narrow_semibold" app:fontWeight="600" app:fontStyle="normal"/>

    <font android:font="@font/archivo_narrow_semibold_italic" android:fontWeight="600" android:fontStyle="italic"
        app:font="@font/archivo_narrow_semibold_italic" app:fontWeight="600" app:fontStyle="italic"/>

    <font android:font="@font/archivo_narrow_bold" android:fontWeight="700" android:fontStyle="normal"
        app:font="@font/archivo_narrow_bold" app:fontWeight="700" app:fontStyle="normal"/>

    <font android:font="@font/archivo_narrow_bold_italic" android:fontWeight="700" android:fontStyle="italic"
        app:font="@font/archivo_narrow_bold_italic" app:fontWeight="700" app:fontStyle="italic"/>

</font-family>

But I cannot figure out how to actually make use of each of these weights; either in an XML (layout/style) file, or in Java code. Their is no fontWeight attribute available for TextView, and the Typeface object created from ResourcesCompat.getFont(context, R.font.archivo_narrow) has no mention of font weights.

I realize that I can just specify the specific font resource (i.e. R.font.archivo_narrow_semibold), but then what is the point of having a fontWeight attribute in the font-family?

---

Update

A new static create(Typeface family, int weight, boolean italic) method was added in API Level 28, along with a getWeight() instance method. This finally makes it possible to make use of the fontWeight attribute in Java code; though only for API Level 28 and above, I haven't found any analogs in the support library.

This is useful—and shows that the fontWeight attribute didn't serve any purpose in the past—but I would really like to be able to use the weight in XML styling.

回答1:

Its looks like android following web standards for font management and sizing for android app.

The “font-weight” property is used to define the weight of a font, such as regular or bold.

But for all other weights a numerical range from 100 to 900 is used. One of the challenges with web fonts is that most web browsers do not properly support font weights other than normal & bold. The following chart describes the possible mappings of weights to the numeric definitions:

100    Extra Light or Ultra Light
200    Light or Thin
300    Book or Demi
400    Normal or Regular
500    Medium
600    Semibold, Demibold
700    Bold
800    Black, Extra Bold or Heavy
900    Extra Black, Fat, Poster or Ultra Black

You can read more about font weight here

---

cc_montserrat_bold.xml

<?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:font="@font/montserrat_bold"
        android:fontStyle="normal"
        android:fontWeight="700"
        app:font="@font/montserrat_bold"
        app:fontStyle="normal"
        app:fontWeight="700" />
    <font
        android:font="@font/montserrat_bolditalic"
        android:fontStyle="italic"
        android:fontWeight="700"
        app:font="@font/montserrat_bolditalic"
        app:fontStyle="italic"
        app:fontWeight="700" />

</font-family>

cc_montserrat_regular.xml

<?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:font="@font/montserrat_regular"
        android:fontStyle="normal"
        android:fontWeight="400"
        app:font="@font/montserrat_regular"
        app:fontStyle="normal"
        app:fontWeight="400" />
    <font
        android:font="@font/montserrat_italic"
        android:fontStyle="italic"
        android:fontWeight="400"
        app:font="@font/montserrat_italic"
        app:fontStyle="italic"
        app:fontWeight="400" />


</font-family>

Kotlin Usage:

val textView = dialog.findViewById<TextView>(android.R.id.message) as TextView
val typeface = ResourcesCompat.getFont(context,R.font.cc_montserrat_regular)
        textView.typeface = typeface

Android Project Screenshot:

回答2:

As pointed out by @FlorianWalther, the TextView.textFontWeight attribute is exactly what I was looking for. This attribute was apparently added in API level 28, but was not documented until recently.

Make sure all of the weights are in the same XML file (as in my question), then simply use the attribute along with the fontFamily attribute.

<TextView android:id="@+id/weightedTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/archivo_narrow"
    android:textFontWeight="700"/>

As far as I am aware this attribute is only available in API Level 28 an above, I will update if I find its counterpart in the support library.

回答3:

here how you can user different font's weights in android studio

1. Open app/src/main/res/layout/you_awesome_layout.xml
2. Select the Design tab
3. In the Component Tree panel, open you TextView and select View all attributes at the bottom of the right menu
4. In the Attributes panel, open the fontFamily dropdown and select More Fonts…
5. Select family YouFontFamilyName
6. Select style Regular/Bold/Semibold/Black/WhateverStyleYouHaveThere

Voila, I think this is the only way to achieve what you want

回答4:

Edit: this isn't a solution the the request :/

I've found the Typeface.Builder class which I think is what you want. Unfortunately it is only available from API level 26 and up. Perhaps a compat library will appear soon.

https://developer.android.com/reference/android/graphics/Typeface.Builder.html

 Typeface.Builder buidler = new Typeface.Builder("your_font_file.ttf");
 builder.setFontVariationSettings("'wght' 700, 'slnt' 20, 'ital' 1");
 builder.setWeight(700);  // Tell the system that this is a bold font.
 builder.setItalic(true);  // Tell the system that this is an italic style font.
 Typeface typeface = builder.build();

回答5:

Since the textFontWeight attribute is API level 28 and higher a workaround for supporting older devices is to create a separate fontFamily for each font-weight and reference the fontFamily from the View.

res/layout/your_layout.xml

<TextView
    ...
    android:fontFamily="@font/fontFamily_your_font_demibold 
/>

res/font/fontFamily_your_font_demibold.xml

<font-family xmlns:app="http://schemas.android.com/apk/res-auto">

    <font
        app:font="@font/your_font_demibold"
        app:fontStyle="normal"
        app:fontWeight="600" />

</font-family>

res/font/fontFamily_your_font_bold.xml

<font-family xmlns:app="http://schemas.android.com/apk/res-auto">

    <font
        app:font="@font/your_font_bold"
        app:fontStyle="normal"
        app:fontWeight="800" />

</font-family>

回答6:

I struggled with several weights of a font: bold, semibold, medium, regular. For me it finally worked when I created a .xml file for each weight, with normal and italic, and then referencing them in the layout or style with both android:fontFamily: and fontFamily:. The latter was important, cause otherwise it would only work in very high API levels.

    <font-family xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <font android:font="@font/internal_inter_bold" 
        android:fontStyle="normal"
        android:fontWeight="700"
        app:font="@font/internal_inter_bold"
        app:fontStyle="normal"
        app:fontWeight="700" />
    <font android:font="@font/internal_inter_bold_italic"
        android:fontStyle="italic"
        android:fontWeight="700"
        app:font="@font/internal_inter_bold_italic"
        app:fontStyle="italic"
        app:fontWeight="700" />
     </font-family>



     <style name="numbers_large">
        <item name="android:textSize">32sp</item>
        <item name="android:fontFamily">@font/inter_bold</item>
        <item name="fontFamily">@font/inter_bold</item>
    </style>

This works even in Android 5.0, didn't test it for lower ones.

So basically create a font.xml file for each font weight, use both app: and android: prefixes, and then reference them with both prefixes.

回答7:

Step 1: Find or Download your font, let's say cavier_dream

Step 2: Right-click on the res folder and create the font resource folder inside the res folder

Step 3: Right-click on font folder and create a font resource file, let's say app_font.xml

Step 4: Open the app_font.xml file and modify as follows

<?xml version="1.0" encoding="utf-8"?>

<font
    android:font="@font/cavier_dream"
    android:fontWeight="400"
    android:fontStyle="normal"
    app:fontWeight="400"
    app:fontStyle="normal"
    app:font="@font/cavier_dream"/>

Usage:

For global usage across the application go to the styles.xml and inside the theme, create a new item as follow

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:fontFamily">@font/app_font</item>
</style>

And for local usage simply use the fontFamily attribute and set the app_font as value.

Happy coding:)