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:
You can adjust the size in the Text Size submenu of the View menu or by pressing Ctrl+I (increase font size), Ctrl+D (decrease font size) and Ctrl+0 (normal font size).
Create a folder in the main directory called Fonts. The main directory should be the one where your Download folder is. Use your file browser again to find your downloaded TTF file. Copy and paste it into the Fonts folder.
To make FontAwesome icons visible in Android Studio XML designer you can.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With