Thursday, May 31, 2012

Custom fonts for Webview And Textviewv in android?


In Android, the three default font options are monospace, sans serif and serif. You do have some flexibility with adding effects to the default fonts, but without custom fonts, you are pretty limited in how text in your Android appears to your users. Luckily, it’s fairly straightforward to set a custom font. You can find plenty of free custom fonts at sites likedafont.com – just download the .ttf file for the font of your choice, and add it to the assets/fonts directory of your codebase (create the directory if it doesn’t exist already).
Custom Fonts in Views
If, for example, you’d like to set the font for a TextView with id=name, it’s as simple as adding the following to your code:

TextView name = (TextView) findViewById(R.id.name);
Typeface  typeface = Typeface.createFromAsset(getContext().getAssets()"fonts/customFont.ttf");
name.setTypeface(typeface)
;


That’s fine when you have just one or two TextViews with custom fonts, but it gets to be a pain when you want customized fonts on all your TextViews. That’s a lot of boilerplate code to have in your activities! It would be convenient to be able to specify the font name in xml. To do this, you can extend TextView:

public class CustomTextView extends TextView {
private static final DEFAULT_FONT="defaultFont.ttf";

  public CustomTextView(Context context) {
    this(context, null);
  }

  public CustomTextView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    TypedArray arr = context.obtainStyledAttributes(attrs, R.styleable.CustomTextView, 0, 0);
    String fontName = arr.getString(R.styleable.CustomTextView_fontName);
    // Sets to a default font if none is specified in xml
    if (fontName == null) {
      fontName = DEFAULT_FONT;
    }
    setFont(fontName);
  }

  private void setFont(String fontName) {
    Typeface typeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/" + fontName);
    setTypeface(typeface);
  }
}


In your attrs.xml (in res/values/, create the xml file if it doesn’t exist already), add an attribute for CustomTextView as follows:

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


Now you can add a custom font to a TextView in xml, without any additional code to your activities:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:example="http://schemas.android.com/apk/res/com.example.customfonts"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
<com.example.customfonts.CustomTextView
       example:fontName="customFont2.ttf"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
</LinearLayout>


That’s it! Now you can easily set custom fonts for views in xml.
Custom Fonts in WebViews
For webviews, you still want to copy the .ttf file into your assets/fonts directory, and then you can create new font-faces in your css and use them by setting font-family:

<style type="text/css"> 
    @font-face { 
        font-family:"customFont1"; 
        src:url('file:///android_asset/fonts/customFont.ttf');
    }
    @font-face { 
        font-family:"PTS55F"; 
        src:url('file:///android_asset/fonts/customFont2.ttf');
    }

    body { font-family:'customFont'; }
    h1 { font-family:'customFont2'; }
</style>


Using custom fonts gives you a lot more control over the visual appearance of your application, but when don’t get carried away — using too many random fonts can make an app seem very disjointed. In general, try to use at most a few fonts that go well together. To get you started, here are 40 free designer fonts.

22 comments:

  1. regarding the second part of this post, "custom fonts in webviews"

    Is it applicable for Android OS 4.1 ? it seems that it doesn't work for the newest android os.

    ReplyDelete
  2. This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck.
    Android Training in chennai | Android Training

    ReplyDelete
  3. I am so proud of you and your efforts and work make me realize that anything can be done with patience and sincerity. Well I am here to say that your work has inspired me without a doubt.
    Click here:
    angularjs training in tambaram
    Click here:
    angularjs6 Training in Chennai

    ReplyDelete
  4. I likable the posts and offbeat format you've got here! I’d wish many thanks for sharing your expertise and also the time it took to post!!
    Click here:
    Microsoft azure training in annanagar
    Click here:
    Microsoft azure training in velarchery

    ReplyDelete
  5. The knowledge of technology you have been sharing thorough this post is very much helpful to develop new idea. here by i also want to share this.
    Devops training in sholinganallur

    ReplyDelete
  6. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.

    best rpa training in chennai |
    rpa training in chennai |
    rpa training in bangalore
    rpa training in pune | rpa online training

    ReplyDelete
  7. Thanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.

    java training in tambaram | java training in velachery

    java training in omr | oracle training in chennai

    ReplyDelete
  8. It was really a wonderful article and I was really impressed by reading this blog. We are giving all software and Database Course Online Training.thnks aa lot guys.
    Ai & Artificial Intelligence Course in Chennai
    PHP Training in Chennai
    Ethical Hacking Course in Chennai Blue Prism Training in Chennai
    UiPath Training in Chennai

    ReplyDelete
  9. I am so proud of you and your efforts and work make me realize that anything can be done with patience and sincerity. Well I am here to say that your work has inspired me without a doubt.
    java training in chennai

    java training in omr

    aws training in chennai

    aws training in omr

    python training in chennai

    python training in omr

    selenium training in chennai

    selenium training in omr

    ReplyDelete
  10. This information is impressive..I am inspired with your post writing style & how continuously you describe this topic.

    Apache Spark Training Institute in Pune
    Best AWS Training Institute in Pune
    Best Tableau Training Institute in Pune

    ReplyDelete