Calligraphy - How to Add custom font in Android

Are you fed up of Custom Views to set fonts? Or traversing the ViewTree to find TextViews? Yeah me too.

Sometime we want some other font for our Android application then you can add custom font in Android using Calligraphy library.

Dependency

Include the dependency Download (.aar) :

dependencies {
    compile 'uk.co.chrisjenx:calligraphy:2.2.0'
}

Add Fonts

Add your custom fonts to assets/. All font definitions are relative to this path.

alt text

Assuming that you are using Gradle you should create the assets directory under src/main/ in your project directory if it does not already exist. As it’s popular to use multi-project build with Gradle the path is usually app/src/main/assets/, where app is the project name.

You might consider creating a fonts/ subdirectory in the assets directory (as in examples).

Usage

<TextView fontPath="fonts/MyFont.ttf"/>

Note: The missing namespace, this IS intentional.

Installation

Define your default font using CalligraphyConfig, in your Application class in the #onCreate() method.

@Override
public void onCreate() {
    super.onCreate();
    CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()
                            .setDefaultFontPath("fonts/Roboto-RobotoRegular.ttf")
                            .setFontAttrId(R.attr.fontPath)
                            .build()
            );
    //....
}

Note: You don’t need to define CalligraphyConfig but the library will apply no default font and use the default attribute of R.attr.fontPath.

Inject into Context

Wrap the Activity Context:

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

You’re good to go!

Usage

Custom font per TextView

<TextView
    android:text="@string/hello_world"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fontPath="fonts/Roboto-Bold.ttf"/>

Note: Popular IDE’s (Android Studio, IntelliJ) will likely mark this as an error despite being correct. You may want to add tools:ignore="MissingPrefix" to either the View itself or its parent ViewGroup to avoid this. You’ll need to add the tools namespace to have access to this “ignore” attribute. xmlns:tools=" http://schemas.android.com/tools".

Custom font in TextAppearance

<style name="TextAppearance.FontPath" parent="android:TextAppearance">
    <!-- Custom Attr-->
    <item name="fontPath">fonts/RobotoCondensed-Regular.ttf</item>
</style>
<TextView
    android:text="@string/hello_world"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="@style/TextAppearance.FontPath"/>

Custom font in Styles

<style name="TextViewCustomFont">
    <item name="fontPath">fonts/RobotoCondensed-Regular.ttf</item>
</style>

Custom font defined in Theme

<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:textViewStyle">@style/AppTheme.Widget.TextView</item>
</style>

<style name="AppTheme.Widget"/>

<style name="AppTheme.Widget.TextView" parent="android:Widget.Holo.Light.TextView">
    <item name="fontPath">fonts/Roboto-ThinItalic.ttf</item>
</style>

Font Resolution

The CalligraphyFactory looks for the font in a pretty specific order, for the most part it’s very similar to how the Android framework resolves attributes.

  1. View xml – attr defined here will always take priority.
  2. Style xml – attr defined here is checked next.
  3. TextAppearance xml – attr is checked next, the only caveat to this is IF you have a font defined in the Style and a TextAttribute defined in the View the Style attribute is picked first!
  4. Theme – if defined this is used.
  5. Default – if defined in the CalligraphyConfig this is used of none of the above are found OR if one of the above returns an invalid font.

Why not piggyback off of fontFamily attribute?

We originally did, but it conflicted with users wanting to actually use that attribute, you now have to define a custom attribute.

Why no jar?

We needed to ship a custom ID with Calligraphy to improve the Font Injection flow. This unfortunately means that is has to be an aar. But you’re using Gradle now anyway right?

Multiple Typeface’s per TextView / Spannables

It is possible to use multiple Typefaces inside a TextView, this isn’t new concept to Android.

This could be achieved using something like the following code.

SpannableStringBuilder sBuilder = new SpannableStringBuilder();
sBuilder.append("Hello!") // Bold this
        .append("I use Calligraphy"); // Default TextView font.
// Create the Typeface you want to apply to certain text
CalligraphyTypefaceSpan typefaceSpan = new CalligraphyTypefaceSpan(TypefaceUtils.load(getAssets(), "fonts/Roboto-Bold.ttf"));
// Apply typeface to the Spannable 0 - 6 "Hello!" This can of course by dynamic.
sBuilder.setSpan(typefaceSpan, 0, 6, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
setText(sBuilder, TextView.BufferType.SPANNABLE);

Of course this is just an example. Your mileage may vary.

Exceptions / Pitfalls

To our knowledge (try: grep -r -e "void set[^(]*(Typeface " <android source dir>) there are two standard Android widgets that have multiple methods to set typefaces. They are:

  • android.support.v7.widget.SwitchCompat
  • android.widget.Switch

Both have a method called setSwitchTypeface that sets the typeface within the switch (e.g. on/off, yes/no). SetTypeface sets the typeface of the label. You will need to create your own subclass that overrides setTypeface and calls both super.setTypeface and super.setSwitchTypeface.

Hope you like this tutorial. Please share your thought with us as comment.

By Tell Me How

It is a technology blog and admin has excellent experience in programming from 5+ year. You can contact us at ceo.tellmehow@gmail.com

Share your thoughts

Leave a Reply

Loading Facebook Comments ...
Loading Disqus Comments ...