Tuesday, May 29, 2018

Using Font as Icon on Tabbed and Navigation Pages

Overview


This article discusses how you can utilize a Font (*.ttf) on your app particularly on your NavigationPage and TabbedPage  which will require custom renderer. Fortunately there was an Iconize Plugin by Jeremy Marcus the source is available here and unfortunately this was not updated anymore to work with the new Xamarin.Forms library.





So while waiting for him to make those updates on that library, I manage to copy some lines and have a working copy for TabbedPage and NavigationPage and make it simple (minimalist) as possible and added some properties which i think is useful and may help Xamarin Devs out there.



How To Use


Since i have no plan in porting this to nuget, still hoping the existing libraries will be active soon. So for now you can just copy the folders show in the image below, and you can adjust the namespaces as your project.






For Android project you need to add the Initialize in the MainActivity class to access the toolbar and the tab bar and to make your Android project iconize tabbed and navigation pages work.





The Font


The font is the essential part of the Iconized TabbedPage and NavigationPage, the main advantage is you can make the icon bigger without losing the quality of the image created using font, It scales well on any device density and sizes. in our example we are using the fontawesome icons ( https://fontawesome.com )  and you can also use font available in fontello ( http://fontello.com ) which is pretty awesome.

So to start with, download your font i highly recommend  using *.ttf format, Make sure to add it in "Asset" folder of the Android project and "Resources" folder of the iOS project.





Note: After adding the font, you will still need to add a setting in info.plist in your iOS project.







See it in Action


After it is all setup, we can now use the FlatNavigationPage and FlatTabbedPage i have provided a couple of samples so you can start tweaking on it and possibly you can add your new feature depending on your needs. The samples i have created includes "NavigationPage With Logo" , "NavigationPage With Icon Toolbar", and "TabbedPage With Icons". The samples are very self-explanatory.





Wrapping Up


If you have some questions go shoot me a message here and will gladly answer your questions. If you want more and advance topic you can catch us at this facebook groups  MondPH And Xamdavao.  If you want the full sample source you can check it right here LINK. enjoy coding.