Tuesday 31 January 2012

Setting external front or Typeface in android

In this tutorial i will show how you can use external fonts in your Android application instead of regular fonts.
The first step is that you need to download a front (.ttf file) from internet which you want to use. It's easy. You can search for free fonts and download the one which you want to use. Here in this tutorial we will be using two fonts - RockFont font and FeastOfFlesh font as shown below.

Now inside the assets folder of your project create a new folder and name it as fonts. Copy the font(.ttf) files in this folder. In our case the font files are RockFont.ttf and FEASFBRG.TTF.
If you are using Eclipse refresh your project directory tree once. Now copy the following code in the main.xml.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"                                                                                                                                          
    android:id="@+id/main_root" 
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:id="@+id/text1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
   />
<TextView  
    android:id="@+id/text2"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    />
</LinearLayout>
Now if you want your TextViews to have this external front you need to perform the below code in your activity 
  @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Typeface font1 = Typeface.createFromAsset(getAssets(), "fonts/RockFont.ttf");
        Typeface font2 = Typeface.createFromAsset(getAssets(), "fonts/FEASFBRG.TTF");
        TextView customText1 = (TextView)findViewById(R.id.text1);
        TextView customText2 = (TextView)findViewById(R.id.text2);


        customText1.setTypeface(font1);     // to set the font
        customText1.setTextSize(40.f);        // to set the text size
        customText1.setText("Hello! This is a custom font...");   // to set the text to be displayed 
        
        customText2.setTypeface(font2);
        customText2.setTextSize(30.f);
        customText2.setText("Developed by www.bOtskOOl.com");
    }
The Typeface class specifies the typeface and intrinsic style of a font. We have created two objects of this class - font1 and font2 and assigned them the path of two font files by using creatFromAsset() method.
After this we declare two objects of TextView class and assign them the ids of our XML layout. We then define what type of font to use by using setTypeface() function. We can alter the default textsize by using setTextSize() method. And finally we define the text to be displayed via setText() method.
Now if you are working with a layout where you want to set custom font on multiple objects ,instead of calling all the TextView,EditText ,Button etc in your Activity you can simply use this method.First get the root view in your onCreate then call the method with this two parameters. 
Typeface font1 = Typeface.createFromAsset(getAssets(), "fonts/RockFont.ttf");  
ViewGroup rootVIew = (ViewGroup) findViewById(R.id.main_root);                                                                                                                                                           see  the id of LinearLayout in main.xml
public static void setTypeFaceForChilds(ViewGroup viewGroup,Typeface typeface) {
                          final int childCount = viewGroup.getChildCount();
                          for (int i = 0; i < childCount; i++) {
                         View view = viewGroup.getChildAt(i);
                                    if (view instanceof ViewGroup) {
                                  setTypeFaceForChilds((ViewGroup) view,typeface);
                                   } else if(view instanceof TextView){
                                              ((TextView) view).setTypeface(typeface);
                                               }
                            }
}
This is a recursive method it will get all the child's under the root layout and then set the  Typeface .It will not wor with Spinners.It will only wor on the ViewGroup child objects (TextView,EditText ,Button etc.)
Enjoy.... 
Do post your doubts, queries or suggestions in this blog.


No comments:

Post a Comment