Tìm hiểu cách sử dụng font icon Awesome trên Android

• Font Awesome là cái gì? nó có tác dụng gì? Font Awesome(As) là một loại font icon. Trong android nó cho phép chúng ta vẽ lên một icon cái mà nó hỗ trợ lên một textview. Đặc biệt nó có thể co giãn và thay đổi màu sắc theo ý chúng ta điều chỉnh bằng cách set textcolor và set size cho nó. Bạn có thể set size bao nhiêu tùy ý mà nó vẫn không bị vỡ hình. Loại font này hỗ trợ rất nhiều các loại icon khác nhau, bạn có thể xem tại https://fortawesome.com/ Việc sử dụng font As hỗ trợ các design cũng như các lập trình viên khá nhiều bởi nó không cần phải cắt ghép các file ảnh.

• Download font và import tới assets/fonts trong project android. Địa chỉ download tại đây: https://fortawesome.github.io/Font-Awesome/

• Tạo file xml layout với các textview và id có sẵn. Ở đây tôi tạo một file với nội dung như sau:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_awidth="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.framgia.awesomedemo.MainActivity" >

    <LinearLayout
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/icon1"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/icon2"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textSize="50sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/icon3"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textColor="@color/ripple_material_light"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/icon4"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textColor="#114455"
            android:textSize="50sp" />
    </LinearLayout>

      <LinearLayout
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/icon5"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textColor="@color/ripple_material_light"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/icon6"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textColor="#114455"
            android:textSize="50sp" />

            <TextView
            android:id="@+id/icon7"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textColor="#114455"
            android:textSize="50sp" />
    </LinearLayout>

</LinearLayout>

Mục đích tạo các layout như trên:

 <LinearLayout
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/icon1"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/icon2"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textSize="50sp" />
    </LinearLayout>

Layout trên dùng để so sánh giữa 2 size icon khác nhau. Và dưới đây tôi so sánh 2 màu icon khác nhau.

<LinearLayout
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/icon3"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textColor="@color/ripple_material_light"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/icon4"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textColor="#114455"
            android:textSize="50sp" />
    </LinearLayout>

Đoạn layout còn lại là thử demo với các icon khác nhau.

• Bước tiếp theo chúng ta sẽ truy cập vào địa chỉ: https://fortawesome.github.io/Font-Awesome/cheatsheet/ và lấy những đoạn mã của icon mình muốn.

       <TextView
            android:id="@+id/icon1"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textSize="12sp" />

        <TextView
            android:id="@+id/icon2"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textSize="50sp" />

        <TextView
            android:id="@+id/icon3"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textColor="@color/ripple_material_light"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/icon4"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textColor="#114455"
            android:textSize="50sp" />

 <LinearLayout
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/icon5"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textColor="@color/ripple_material_light"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/icon6"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textColor="#114455"
            android:textSize="50sp" />

            <TextView
            android:id="@+id/icon7"
            android:layout_awidth="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textColor="#114455"
            android:textSize="50sp" />
    </LinearLayout>

Tới đây chúng ta đã gần như hoàn thành được tất cả các bước để có thể sử dụng font As. Còn một bước cuối cùng đó là setup cho font cho các textview như sau:

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setupFonts(this, new TextView[]{
            (TextView)findViewById(R.id.icon1),
            (TextView)findViewById(R.id.icon2),
            (TextView)findViewById(R.id.icon3),
            (TextView)findViewById(R.id.icon4),
            (TextView)findViewById(R.id.icon5),
            (TextView)findViewById(R.id.icon6),
            (TextView)findViewById(R.id.icon7)
        });
    }

    private void setupFonts(Context context, TextView[] textView) {
        Typeface font = Typeface.createFromAsset(context.getAssets(), "fonts/awesome.ttf");
        for (TextView tv : textView) {
            tv.setTypeface(font);
        }
    }

Chạy thử ứng dụng của tôi từ đây: https://github.com/daminhtung/report_t3