Showing custom font or View in preview section of Android Studio XML

Question

Is there any way to view custom fonts/views in the preview section of Android Studio?

I have used font-awesome as a custom typeface to show microphone icon in my app. Everything is working fine. But as we all know the preview section cannot load custom views.

Is there any plugin or hack to see the custom views in the preview window while coding?

This is what I am loading on my app:

This is what I see in the preview section:

If you mean inside the development environment, like Android Studio, the short answer is no. I've never seen or heard of such a tool, hack or work around. Still I'd love to see if anyone else has figured this out as its been a problem for devs for years — spike_stack, Jan 05 '16 at 14:14
Yes, I am looking for a work around in the development environment (Android Studio). — Mohammad Arman, Jan 05 '16 at 15:00
@MohammadArman i think it depends on your implementation. In my Android Studio i can see FontAwesome icons. Here is [demo img](https://i.gyazo.com/f892d89a940665145d03d6adae2aedaf.png) Code is pretty simple. 1) Create custom view 2) Apply font in constructor 3) Add custom attr if you want to set font from xml [CODE](https://gist.github.com/varren/4c5bced96d12c1231ac1) — varren, Jan 05 '16 at 17:39
@varren Your demo img and Example code helped me to fix the issue. Can you please Post your comment as answer. I will mark it as an Accepted answer. :) — Mohammad Arman, Feb 08 '16 at 09:22

score 11 · Accepted Answer · edited May 23 '17 at 11:54

To make FontAwesome icons visible in Android Studio XML designer you can.

Create custom view
Apply font in constructor
Add custom attr if you want to set font from xml

Here is full demo code in gist

Demo img with code from comment:

Important parts: (pretty much the same as Declaring a custom android UI element using XML but with small tuning)

TextViewWithFont.java - Custom view class

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.widget.TextView;

public class TextViewWithFont extends TextView {

    public TextViewWithFont(Context context) {
        super(context);
        init(context, null, 0);
    }
    public TextViewWithFont(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }
    public TextViewWithFont(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }
    private void init(Context context, AttributeSet attrs, int defStyle) {
        // Load attributes
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TextViewPlusFont, 0, 0);
        try {
            String fontInAssets = ta.getString(R.styleable.TextViewPlusFont_customFont);
            setTypeface(Typefaces.get(context, "fonts/"+ fontInAssets));
        } finally {
            ta.recycle();
        }
    }
}

res/values/attrs.xml - Need this to use app:customFont="fontawesome-webfont.ttf"in our layout xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TextViewPlusFont">
        <attr name="customFont" format="string"/>
    </declare-styleable>
</resources>

Typefaces.java - Helper class to reuse fonts (Cache for fonts)

import android.content.Context;
import android.graphics.Typeface;
import android.util.Log;
import java.util.Hashtable;

public class Typefaces {
    private static final String TAG = "Typefaces";

    private static final Hashtable<String, Typeface> cache = new Hashtable<String, Typeface>();

    public static Typeface get(Context c, String assetPath) {
        synchronized (cache) {
            if (!cache.containsKey(assetPath)) {
                try {
                    Typeface t = Typeface.createFromAsset(c.getAssets(),
                            assetPath);
                    cache.put(assetPath, t);
                    Log.e(TAG, "Loaded '" + assetPath);
                } catch (Exception e) {
                    Log.e(TAG, "Could not get typeface '" + assetPath
                            + "' because " + e.getMessage());
                    return null;
                }
            }
            return cache.get(assetPath);
        }
    }
}

activity_main.xml - Layout and how to use TextViewWithFont custom view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <com.example.TextViewWithFont
        xmlns:app="http://schemas.android.com/apk/res/com.example"
        app:customFont="fontawesome-webfont.ttf"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="\uf1e2"
        android:textSize="60dp"/>
</LinearLayout>

score 5 · Answer 2 · answered Jan 05 '16 at 15:41

Preview section loads custom views fine as long as these views are correctly written. You have to remember about all small details like draw/onDraw/dispatchDraw methods, measuring and layouting, setting correct theme, styling, providing editMode data, etc.

The deal is that Android Studio has its own Context and Resources classes which are unable to perform certain things. For example these classes lack implementation of reading assets from assets folder and raw resources from raw folder.

To load a custom font, you need assets folder which you don't have access to in Android Studio. Custom view should work, more or less.

Showing custom font or View in preview section of Android Studio XML

2 Answers2

Linked