Tìm hiểu cách sử dụng font icon Awesome trên Android
Bài đăng này đã không được cập nhật trong 8 năm
1. Giới thiệu Font Awesome
- 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.
2. Cách sử dụng font As trong android và làm demo
-
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_width="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_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="@+id/icon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:textSize="12sp" />
<TextView
android:id="@+id/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:textSize="50sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="@+id/icon3"
android:layout_width="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_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:textColor="#114455"
android:textSize="50sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="@+id/icon5"
android:layout_width="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_width="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_width="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_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="@+id/icon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:textSize="12sp" />
<TextView
android:id="@+id/icon2"
android:layout_width="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_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="@+id/icon3"
android:layout_width="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_width="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_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="12sp" />
<TextView
android:id="@+id/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="50sp" />
<TextView
android:id="@+id/icon3"
android:layout_width="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_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#114455"
android:textSize="50sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="@+id/icon5"
android:layout_width="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_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#114455"
android:textSize="50sp" />
<TextView
android:id="@+id/icon7"
android:layout_width="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);
}
}
3. Chạy demo
Chạy thử ứng dụng của tôi từ đây: https://github.com/daminhtung/report_t3
All rights reserved
