Use Roboto Font in App with Minimum API Level 14

Use Roboto font in app with minimum API level 14

Is there a way to use Roboto without including the Roboto font as an
asset?

No there is no other way of doing this for API 11<.

I usually create a custom TextView for the Robot typeface:

public class TextView_Roboto extends TextView {

public TextView_Roboto(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
createFont();
}

public TextView_Roboto(Context context, AttributeSet attrs) {
super(context, attrs);
createFont();
}

public TextView_Roboto(Context context) {
super(context);
createFont();
}

public void createFont() {
Typeface font = Typeface.createFromAsset(getContext().getAssets(), "robo_font.ttf");
setTypeface(font);
}
}

Now you can use it in your Layouts like this:

<com.my.package.TextView_Roboto>
android:layout_width="..."
android:layout_height="..."
[...]
</com.my.package.TextView_Roboto>

Of course you can create a TextView layout. One for Pre HC, one for HC and above(You'll have to make use of the layout and layout-v11 folders). Now you can use the <include> tag to include the TextView in your Layout. You just have to do this use this then:

if (android.os.Build.VERSION.SDK_INT >= 11){
TextView txt = (TextView) findViewById(R.id.myTxtView);
}
else{
TextView_Roboto txt = (TextView_Roboto) findViewById(R.id.myTxtView);
}

Edit:

You can use Roboto natively from Android 4.1+ like this:

android:fontFamily="sans-serif"           // roboto regular
android:fontFamily="sans-serif-light" // roboto light
android:fontFamily="sans-serif-condensed" // roboto condensed

How to use Roboto in xml layout

I've already found some possibilities

Using fontfamily

The simplest way would be add fontFamily attribute to your specific view like TextView

According to How to change fontFamily of TextView in Android

From android 4.1 / 4.2 / 5.0, the following
Roboto font families are available:

android:fontFamily="sans-serif"           // roboto regular
android:fontFamily="sans-serif-light" // roboto light
android:fontFamily="sans-serif-condensed" // roboto condensed
android:fontFamily="sans-serif-thin" // roboto thin (android 4.2)
android:fontFamily="sans-serif-medium" // roboto medium (android 5.0)

http://developer.android.com/reference/android/widget/TextView.html#attr_android:typeface

in combination with

android:textStyle="normal|bold|italic"

this 14 variants are possible:

  • Roboto regular
  • Roboto italic
  • Roboto bold
  • Roboto bold italic
  • Roboto-Light
  • Roboto-Light italic
  • Roboto-Thin
  • Roboto-Thin italic
  • Roboto-Condensed
  • Roboto-Condensed italic
  • Roboto-Condensed bold
  • Roboto-Condensed bold italic
  • Roboto-Medium
  • Roboto-Medium italic

You can also do this programmatically using code as below:

textView.setTypeface(Typeface.create("sans-serif-thin", Typeface.NORMAL));

Using typeface

Available built-ibn fonts are:

  • normal
  • sans
  • serif
  • monospace

You can cobine them like below:

   android:typeface="sans" | "serif" | "monospace"

See android:typeface.

Using styles.xml

You set style in styles.xml` like that:

<style name="boldText">
<item name="android:textStyle">bold|italic</item>
<item name="android:textColor">#FFFFFF</item>
</style>

and to use this style in main.xml layout file just use:

style="@style/boldText"

Combining Text atrributes

You can mix TextView attributes like in code below:

 android:fontFamily="serif" 
android:textStyle="italic"

Using third-party libraries

Foundry - apply custom typefaces through XML layouts and styles.

android-typeface-helper - Typeface helper for Android

Additional lecture

You may also want to read about Roboto typeface and Typography Google's Design Guide.

Similar StackOverflow Issues:

  • Using Roboto thin or condensed
  • How do I specify eg. Roboto-Medium or Roboto-Black in styles.xml
  • Use Roboto font in app with minimum API level 14

    Hope it help

How to use Roboto font in android Project

You can download the Roboto font from here:
https://fonts.google.com/specimen/Roboto. [Updated 2020-01-28]

You can do it the conventional way by using TypeFace, like this:

Typeface typeface = Typeface.createFromAsset(getAssets(), fontName);
textView.setTypeface(typeface);

Note: The above will have to be done in every Activity.

Alternatively, if, for example, you want to apply the Roboto font to all the TextViews in your application, then you will need to create your own widget that extends TextView.

There is a simple way of doing this. Follow the steps from this answer on SO: https://stackoverflow.com/a/9199258/450534 (full props to leocadiotine for the solution. I have used it before and it works like a charm)

EDIT: Think of your_namespace as a marker for you to give it a name of your choice. For example, when integrating Admob in XML, I use xmlns:ads. You can use, for example: xmlns:font or something descriptive.

As for what the custom.ttf stands for, it is basically the font file with its extension that you need to copy in your Assets folder. For example, if you are using ROBOTO-REGULAR.TTF, then replace the custom.ttf with ROBOTO-REGULAR.TTF. Using this example, the entire code should look this this:

<your.package.widget.TypefacedTextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:font="http://schemas.android.com/apk/res/your.package"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Custom fonts in XML are easy"
android:textColor="#FFF"
android:textSize="14dip"
font:typeface="ROBOTO-REGULAR.TTF" />

Android: Want to set custom fonts for whole application not runtime

EDIT: So it's been a while, and I'd like to add what I think is the best way to do this, and through XML no less!

So first, you're going to want to make a new class that overrides whatever View you want to customize. (e.g. want a Button with a custom typeface? Extend Button). Let's make an example:

public class CustomButton extends Button {
private final static int ROBOTO = 0;
private final static int ROBOTO_CONDENSED = 1;

public CustomButton(Context context) {
super(context);
}

public CustomButton(Context context, AttributeSet attrs) {
super(context, attrs);
parseAttributes(context, attrs); //I'll explain this method later
}

public CustomButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
parseAttributes(context, attrs);
}
}

Now, if you don't have one, add an XML document under res/values/attrs.xml, and add:

<resources>
<!-- Define the values for the attribute -->
<attr name="typeface" format="enum">
<enum name="roboto" value="0"/>
<enum name="robotoCondensed" value="1"/>
</attr>

<!-- Tell Android that the class "CustomButton" can be styled,
and which attributes it supports -->
<declare-styleable name="CustomButton">
<attr name="typeface"/>
</declare-styleable>
</resources>

Okay, so with that out of the way, let's get back to the parseAttributes() method from earlier:

private void parseAttributes(Context context, AttributeSet attrs) {
TypedArray values = context.obtainStyledAttributes(attrs, R.styleable.CustomButton);

//The value 0 is a default, but shouldn't ever be used since the attr is an enum
int typeface = values.getInt(R.styleable.CustomButton_typeface, 0);

switch(typeface) {
case ROBOTO: default:
//You can instantiate your typeface anywhere, I would suggest as a
//singleton somewhere to avoid unnecessary copies
setTypeface(roboto);
break;
case ROBOTO_CONDENSED:
setTypeface(robotoCondensed);
break;
}

values.recycle();
}

Now you're all set. You can add more attributes for about anything (you could add another one for typefaceStyle -- bold, italic, etc.) but now let's see how to use it:

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

<com.yourpackage.name.CustomButton
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me!"
custom:typeface="roboto" />

</LinearLayout>

The xmlns:custom line can really be anything, but the convention is what's shown above. What matters is that it is unique, and that's why the package name is used. Now you just use the custom: prefix for your attributes, and the android: prefix for android attributes.

One last thing: if you want to use this in a style (res/values/styles.xml), you should not add the xmlns:custom line. Just reference the name of the attribute with no prefix:

<style name="MyStyle>
<item name="typeface">roboto</item>
</style>

                               (PREVIOUS ANSWER)

Using a custom typeface in Android

This should help. Basically, there's no way to do this in XML, and as far as I can tell, no easier way to do it in code. You could always have a setLayoutFont() method that creates the typeface once, then runs setTypeface() for each. You'd just have to update it each time you add a new item to a layout. Something like below:

public void setLayoutFont() {
Typeface tf = Typeface.createFromAsset(
getBaseContext().getAssets(), "fonts/BPreplay.otf");
TextView tv1 = (TextView)findViewById(R.id.tv1);
tv1.setTypeface(tf);

TextView tv2 = (TextView)findViewById(R.id.tv2);
tv2.setTypeface(tf);

TextView tv3 = (TextView)findViewById(R.id.tv3);
tv3.setTypeface(tf);
}

EDIT: So I just got around to implementing something like this myself, and how I ended up doing it was making a function such as this:

public static void setLayoutFont(Typeface tf, TextView...params) {
for (TextView tv : params) {
tv.setTypeface(tf);
}
}

Then, just use this method from onCreate(), and pass all the TextViews you want to update:

Typeface tf = Typeface.createFromAsset(getAssets(), "fonts/BPreplay.otf");
//find views by id...
setLayoutFont(tf, tv1, tv2, tv3, tv4, tv5);

EDIT 9/5/12:

So since this is still getting views and votes, I'd like to add a much better and more complete method:

Typeface mFont = Typeface.createFromAsset(getAssets(), "fonts/BPreplay.otf");
ViewGroup root = (ViewGroup)findViewById(R.id.myrootlayout);
setFont(root, mFont);

/*
* Sets the font on all TextViews in the ViewGroup. Searches
* recursively for all inner ViewGroups as well. Just add a
* check for any other views you want to set as well (EditText,
* etc.)
*/
public void setFont(ViewGroup group, Typeface font) {
int count = group.getChildCount();
View v;
for(int i = 0; i < count; i++) {
v = group.getChildAt(i);
if(v instanceof TextView || v instanceof Button /*etc.*/)
((TextView)v).setTypeface(font);
else if(v instanceof ViewGroup)
setFont((ViewGroup)v, font);
}
}

If you pass it the root of your layout, it will recursively check for TextView or Button views (or any others you add to that if statement) within that layout, and set the font without you having to specify them by ID. This of course is assuming you want to set the font to every view.

Do I need to set type face-manually to roboto-light if i am targeting api 11+ or can I just use android:fontFamily=sans-serif-light

My question is, if i used the first example below, will users on api
13 for example, also see the roboto-light font?

No. The Roboto fonts are only natively available from Android 4.1 and upwards.

You have to set the typeface for versions lower than 4.1 like in your second example. Look up this answer I gave a while back for more information.

Roboto font for Android 4+?

You can use Roboto natively from Android 4.1+ like this:

android:fontFamily="sans-serif"           // roboto regular
android:fontFamily="sans-serif-light" // roboto light
android:fontFamily="sans-serif-condensed" // roboto condensed

For any version below that, you have to load the font yourself. Look at this answer I gave a while back for more information.

Valid values for android:fontFamily and what they map to?

Where do these values come from? The documentation for android:fontFamily does not list this information in any place

These are indeed not listed in the documentation. But they are mentioned here under the section 'Font families'. The document lists every new public API for Android Jelly Bean 4.1.

In the styles.xml file in the application I'm working on somebody listed this as the font family, and I'm pretty sure it's wrong:

Yes, that's wrong. You don't reference the font file, you have to use the font name mentioned in the linked document above. In this case it should have been this:

<item name="android:fontFamily">sans-serif</item>

Like the linked answer already stated, 12 variants are possible:

Added in Android Jelly Bean (4.1) - API 16 :

Regular (default):

<item name="android:fontFamily">sans-serif</item>
<item name="android:textStyle">normal</item>

Italic:

<item name="android:fontFamily">sans-serif</item>
<item name="android:textStyle">italic</item>

Bold:

<item name="android:fontFamily">sans-serif</item>
<item name="android:textStyle">bold</item>

Bold-italic:

<item name="android:fontFamily">sans-serif</item>
<item name="android:textStyle">bold|italic</item>

Light:

<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textStyle">normal</item>

Light-italic:

<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textStyle">italic</item>

Thin :

<item name="android:fontFamily">sans-serif-thin</item>
<item name="android:textStyle">normal</item>

Thin-italic :

<item name="android:fontFamily">sans-serif-thin</item>
<item name="android:textStyle">italic</item>

Condensed regular:

<item name="android:fontFamily">sans-serif-condensed</item>
<item name="android:textStyle">normal</item>

Condensed italic:

<item name="android:fontFamily">sans-serif-condensed</item>
<item name="android:textStyle">italic</item>

Condensed bold:

<item name="android:fontFamily">sans-serif-condensed</item>
<item name="android:textStyle">bold</item>

Condensed bold-italic:

<item name="android:fontFamily">sans-serif-condensed</item>
<item name="android:textStyle">bold|italic</item>

Added in Android Lollipop (v5.0) - API 21 :

Medium:

<item name="android:fontFamily">sans-serif-medium</item>
<item name="android:textStyle">normal</item>

Medium-italic:

<item name="android:fontFamily">sans-serif-medium</item>
<item name="android:textStyle">italic</item>

Black:

<item name="android:fontFamily">sans-serif-black</item>
<item name="android:textStyle">italic</item>

For quick reference, this is how they all look like:

Sample Image



Related Topics



Leave a reply



Submit