In our last blog we’ve shown you
how you can use different views on iOS, Android
and Desktop. Now we’ll have a closer look at how to style the app for Android.
The app will be available on github when this blog series is complete.
The first thing we’ll do, is make the app behave a bit more like a native app and less like a web page, so in
index_android.html we’ll add this to the head section:
This tells the webview that the page is optimized for mobile, prevents strange
scroll behavior, and disallows text selection.
Next we’ll use a css framework to make it look more native.
Materialize is a project that allows you to style
your application according to the Material design principles
introduced by Google. This does exactly what we want.
Download either the standard version of the project, or the Sass based version.
The Sass version gives you a bit more control and you can disable some components
if you don’t need them, but you’ll nedd to setup scss compilation.
I used the sass version to add some additional styles for registering the Material Icons,
since I wanted to bundle them with the app. I also added JQuery, since it’s faster
if you bundle it with the app. This way the app will also work offline. My HTML looks like this:
Now we can use the style classes. I’ll add some random examples from the tutorial. Let’s start with a navbar:
The NavBar will be collapsed on smaller devices and expanded on larger ones. If collapsed, it will slide out a sidebar.
Let’s add a list:
I’ve added some more items in order to test if the navbar will stay fixed:
Materialize has all the components and color schemes you need to create a nice
native looking app for Android. In the next parts of this blog, we’ll connect
the list to a real viewmodel. But first we’ll have a look at iOS.