Android icons font

In this Android tip, I am going to show you how to use Heydings icons font in your application. Using font icons is better than images because the font icons can be scaled without losing quality. You are also easy to change colors, and apply shadow to the font icons.

To use the Heydings icons font, you need to download it from the link: http://www.fontsquirrel.com/fonts/heydings-common-icons. Then add the heydings_icons.ttf file to the assets folder of your project. In your code, you need to create an instance of Typeface for the icons font. Then set the Typeface instance to all widgets that display the font icons. To render the icons correctly, you need to know the codes that are mapped to the icons. For example, the question mark icon (?) is mapped to the code: 0054. You can get the codes used in the Heydings font from page: http://www.fonts2u.com/heydings-icons

Now to have an example application on using Heydings icons font, you create a new Android project. Then in the activity_main.xml file, you add four TextViews as shown below.

<RelativeLayout 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"
    tools:context="com.example.myfirstprogram.MainActivity" >
	
   <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:paddingBottom="5dp"
      android:orientation="horizontal"
      android:layout_alignParentBottom="true"
      android:background="#0B3861"
      >
      
  
   <TextView
      android:id="@+id/txtreg"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:textSize="30sp"
      android:textColor="#ffffff"
      android:gravity="center"
      />
   <TextView
      android:id="@+id/txttracking"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:textSize="30sp"
      android:textColor="#ffffff"
      android:gravity="center"
    />
   <TextView
      android:id="@+id/txtsms"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:textSize="30sp"
      android:textColor="#ffffff"
      android:gravity="center"
      
      />
   <TextView
      android:id="@+id/txtqa"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:textSize="30sp"
      android:textColor="#ffffff"
      android:gravity="center"
      />
 </LinearLayout>

</RelativeLayout>

Then in the MainActivity class, you create an instance of Typeface for the Heyding icons font and set the instance to all the TextViews. You need to prefix the code of an icon with the \u to represent the code as unicode.

public class MainActivity extends ActionBarActivity {
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// Create Typeface object to use the icons font
		Typeface font= Typeface.createFromAsset(getAssets(), "heydings_icons.ttf");
		TextView regIcon=(TextView)findViewById(R.id.txtreg);
		TextView trackIcon=(TextView)findViewById(R.id.txttracking);
		TextView smsIcon=(TextView)findViewById(R.id.txtsms);
		TextView qaIcon=(TextView)findViewById(R.id.txtqa);
		regIcon.setTypeface(font);
		regIcon.setText("\u0041");
		trackIcon.setTypeface(font);
		trackIcon.setText("\u0040");
		smsIcon.setTypeface(font);
		smsIcon.setText("\u0045");
		qaIcon.setTypeface(font);
		qaIcon.setText("\u0051");
		
	}
}

Android-icons-font

Posted by: Dara | post date: 01-30-2015 | Subject: Android Apps Development

Android icons font

Android Apps Development tips

Comments