Headertab

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Tuesday 12 January 2016

FontAwesome Example

Hello friends
Today we are learn about what is "FontAwesome" why use and how to use in your android application.So lets start..

Q. What is FontAwesome ?

Font Awesome is a font and icon toolkit based on CSS and LESS. it was made by dave Gandy for use with the Twitter Bootstrap and later was incorporated into the BootstarapCDN.

Q. Why use FontAwesome ?

 Font Awesome give you scalable vector icons that can instantly be customize.


How to use FontAwesome ? Follow some instructions...

Create a new android studio project.

Basically you can use font awesome many type so i am going to tech you all these step by step.


Download file

Step 1>

 Copy below resource code and go to values folder and  paste in string.xml resource file

<resources>
    <string name="fa_arrow_down">&#xf063;</string>
    <string name="fa_bank">&#xf19c;</string>
    <string name="fa_birthday_cake">&#xf1fd;</string>
</resources>


 Go to mainactivity.xml

<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
android:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
android:text="@string/fa_arrow_down"
        android:layout_weight="1" />
    <TextView
android:id="@+id/text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
android:text="@string/fa_bank"
        android:layout_weight="1" />
    <TextView
android:id="@+id/text3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
android:text="@string/fa_birthday_cake"
        android:layout_weight="1" />
</LinearLayout>

and now go to MainActivity.java




@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   //Select TextView we want to change the Font
   TextView textView1 = (TextView) findViewById(R.id.text1);
TextView textView2 = (TextView) findViewById(R.id. text2);
TextView textView3 = (TextView) findViewById(R.id. text3);
   Typeface font = Typeface.createFromAsset(getAssets(),"fontawesome.ttf");
   //Set the typeface
   textView1.setTypeface(font);
textView2.setTypeface(font);
textView3.setTypeface(font);

}




now see ..



now you can change color this icon add some line of code.



<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
android:text="@string/fa_arrow_down"
android:textColor="#990000"
        android:layout_weight="1" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
android:text="@string/fa_bank"
android:textColor="#F50057"
        android:layout_weight="1" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
android:text="@string/fa_birthday_cake"
android:textColor="#FFF000"
        android:layout_weight="1" />

Now see..






Step 2> 

        In another way create a custom class TextViewAwesom.java 

   public class TextViewAwesom  extends TextView {

    private final static String NAME = "FONTAWESOME";
    private static LruCache<String, Typeface> sTypefaceCache = new LruCache<String, Typeface>(12);

    public TextViewAwesom(Context context) {
        super(context);
        init();

    }

    public TextViewAwesom(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public void init() {

        Typeface typeface = sTypefaceCache.get(NAME);

        if (typeface == null) {

            typeface = Typeface.createFromAsset(getContext().getAssets(), "fontawesom.ttf");
            sTypefaceCache.put(NAME, typeface);

        }

        setTypeface(typeface);

    }



}

now you change xml file code see below code..

<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.samset.blog.TextViewAwesome
android:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
android:text="@string/fa_arrow_down"
        android:layout_weight="1" />
    <com.samset.blog.TextViewAwesome
android:id="@+id/text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
android:text="@string/fa_bank"
        android:layout_weight="1" />
    <com.samset.blog.TextViewAwesome
android:id="@+id/text3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
android:text="@string/fa_birthday_cake"
        android:layout_weight="1" />
</LinearLayout>


now no need to extra code in mainactivity.java file  



If you want to full source code sample so go to this link

https://github.com/search?utf8=%E2%9C%93&q=FontAwesomSample

If this helps you then feel free to like and follow me on github.

Thank you.