Android uses font awesome instead of simple icons

In Android development, there will often be a large number of small icons, but the Android interface and HTML is different, such as HTML, you can make a large number of small icons into Sprite, which will greatly reduce the number of HTTP requests, for performance is also a great upgrade, and in Android, Generally for NA itself tive app small icons are generally used to do the display, will be embedded into the application, there is nothing comparable, but if the Android app has a large number of small icons, virtually increased the size of the APK file, this time to the appearance of the font awesome.

What is a font awesome

Font awesome is a fonts file designed specifically for Bootstrap, and we can display the icon files we want to display as easily as possible by displaying fonts. For Android, fonts can be used in place of some small images that need to be displayed, and the images in these fonts are vectors, which can be zoomed in and out, which means that each icon can be rendered perfectly on screen of all sizes. Well, don't say much, go straight to the chase.

Use the font awesome1 on Android. Download Font awesome

2. Unzip the downloaded compressed package

Copy the Fontawesome-webfont.ttf file under the Fonts directory to the Asset folder

3. Writing String.xml

First you need to write the String.xml file, you need to go to the http://fortawesome.github.io/Font-Awesome/cheatsheet/connection to find the font icon corresponding to the string.

<string name="Heard">&#xf004;</string><string name="Fa_google_plus">&#xf0d5;</string><string name="Fa_save">&#xf0c7;</string><string name="Fa_thumbs_o_up">&#xf087;</string><string name="fa_toggle_on">&#xf205;</string>

The value of each string here is the value of the icon that needs to be displayed, and the value of name can be given casually, but it is generally a meaningful name.

4. Writing layouts

Using the string in TextView, you can display its corresponding icon, which replaces the previous use of ImageView to display the small icon. Convenient for a lot.

<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:gravity="Center_horizontal"android:padding="50DP"tools:context=". Mainactivity "> <textview android:ID="@+id/test_view"Android:layout_width="Wrap_content"android:layout_height="Wrap_content"Android:text="@string/heard"Android:textappearance="? Android:attr/textappearancelarge"Android:textcolor="#Ff9834"Android:textsize="30SP"/> <textview android:ID="@+id/fa_google_plus"Android:layout_width="Wrap_content"android:layout_height="Wrap_content"Android:text="@string/fa_google_plus"Android:textappearance="? Android:attr/textappearancelarge"Android:textcolor="#87619a"Android:textsize="50SP"/> <textview android:ID="@+id/fa_thumbs_o_up"Android:layout_width="Wrap_content"android:layout_height="Wrap_content"Android:text="@string/fa_thumbs_o_up"Android:textappearance="? Android:attr/textappearancelarge"Android:textcolor="#976523"Android:textsize="60SP"/> <textview android:ID="@+id/fa_save"Android:layout_width="Wrap_content"android:layout_height="Wrap_content"Android:text="@string/fa_save"Android:textappearance="? Android:attr/textappearancelarge"Android:textcolor="#954278"Android:textsize="40SP"/> <textview android:ID="@+id/fa_toggle_on"Android:layout_width="Wrap_content"android:layout_height="Wrap_content"Android:text="@string/fa_toggle_on"Android:textappearance="? Android:attr/textappearancelarge"Android:textcolor="#273896"Android:textsize="50SP"/></linearlayout>

Can be found here, we can customize the color and size of the icon, so in different screen adaptation is also excellent, very convenient.

5. References in code

First find the corresponding. ttf file under Asset

Typeface font = Typeface.createFromAsset"fontawesome-webfont.ttf");

Then you just need to TextView settypeface (font) for each one.

((TextView)findViewById(R.id.fa_google_plus)).setTypeface(font);

The display results are as follows:

Although the font awesome has many advantages, but still have to mention its number of icons or so limited, it is difficult for us to find all the necessary icons from its body. Know it all, that's why it's not popular in the local app, but it's a great innovation for Web apps, especially web pages written using bootstrap, which can also be accessed on your phone's browser. This adaptive layout really achieves the purpose of both PC and mobile phones that can be accessed at the same time.

SOURCE download

Android uses font awesome instead of simple icons