Using HTML to Format Text in Xamarin

I have to give props to Trevor Hart on this idea – he sent a message to a dev group I am in that said: “Hello fellow humans, have you ever used Xamarin and thought “Wow, how in the world is HTML easier to format text with than Android?”, well good news, you can tell android to act like an html interpreter so that you can do all your nice fancy styling in an html file, then just load it into a text view for Android. All you have to do is use the asset manager to get a stream to the html file, read from the stream and store it in a string, call fromHtml and pass the string, and pass that to setText for a text view. It’s pretty sweet actually.”

So I got to thinking – that IS actually pretty sweet!

As the landscape of web and mobile development gets more intertwined and complex, it is becoming very important to deliver a solid and consistent experience among all of the contexts that your content is viewed.  What better way to do that than to deliver a mobile-first, responsive, and adaptive experience we know and love in HTML while still leveraging the .NET power given through Xamarin.

Different from Hybrid Apps?

In the mobile development world the term “hybrid app” typically refers to an application that presents some (or all) of its screens as HTML pages inside a hosted web viewer control.

There are some development environments that let you build your mobile app entirely in HTML and Javascript, however those apps can suffer from performance problems when trying to accomplish complex processing or UI effects and are also limited in the platform features they can access.

Xamarin offers the best of both worlds, especially when utilizing the Razor HTML templating engine. With Xamarin you have the flexibility to build cross-platform templated HTML views that use Javascript and CSS, but also have complete access to the underlying platform APIs and fast processing using C#.

Let’s walk through how to do this so you can see how it works!

The HTML/CSS

So to start, I put together a simple and clean HTML layout that I wanted to use to demo this idea.   Here is the layout I am working with:

Download for yourself – HTML

Create the Xamarin Project

As usual, create an Android Xamarin project to get started. This video will walk you through how read in the HTML file in your Xamarin Android project.

 Final Thoughts

So I’m sure you can see, as I did, how great of a tool this is.  Often we have text that we want to be able to present to the user in a formatted way and using the editor when making Xamarin forms is pretty painful for this kind of thing.

Leave a Reply

Your email address will not be published. Required fields are marked *