Icons are symbols that make it easy to understand the User interface for a naive user. There are many icons are available in Material UI by Google UI. But still few icons are not available in the material icons library. FontAwesome is an amazing platform, which provides useful icons which are used in many web and mobile app. Officially there is no FontAwesome library available for android, But hopefully, there is a really good community whose contribution helps the developers. So in this article, we are going to discuss two different approaches.
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Add dependencies to the build.gradle(Module:app) file
Add the following dependency to the build.gradle(Module:app) file.
// font awesome library
Step 3: Working with the activity_main.xml file
Then go to your XML file where you want to put the font awesome icon. Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
In the text property, we just put the string value of the icon. that value you can get from font awesome. Here is the link, just follow that link you will get the value.
Just run your app. Voilà now you can see your icon on your screen.
This approach is basically what we are doing from scratch here no need for any third-party plugin implementation.
- Download the font awesome otf file by following this link.
- After downloaded unzip it > go to otf folder > choose any file
- Rename the file with all lowercase letters
Create a resource directory,
- In your project folder > the main folder> right-click > select Android Resource Directory
- from resource values > select font
- after that, you can see a folder like this
- Now just copy-paste the fontawsome.otf file in that directory.
Note: We have renamed the fontawesome file as font_awesome.otf (do not use capital letters while renaming the file)
- To use the icon use the string value represent in font-awesome. You can get them from this link.
- use the following code in your desire XML file
Just look at the text property and the font-family property in <TextView>. The text value is the string value of the icon and the font family is our fontswesome file which is in the font resource folder.
Now that’s it, you can see icons on your screen. This approach may take some amount of memory, so maybe your app size will be a little bit increase if you are concern about app size then do not use it use the first approach. If you stuck at any point feel free to check the github account.