Question

I am in process of creating an app which had multiple standalone html5 web pages which have to be displayed in web views. I have currently created a sample dummy page in html5 and css3 which opens up in my android app webview.

The problem is the look and feel does not look as good as it should. Following is a screenshot of what the sample page looks like in the android webview when it opens initially:

_{(source: abhisheksabbarwal.com)}

The current version is a little zoomed in. The user has the freedom of using the built-in zoom controls. I am currently using the following properties for the webview :

mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setBuiltInZoomControls(true);

How-ever the display doesnot look just right. I am requesting hints/comments/suggestions on how I could make the the view look more decent ? Are there any guidelines that I should follow while creating these pages for webviews or are there any specific webview properties that I need to handle properly ?

I am new to html5 and css3 standards. I want to make my webpages look like professional pages in a webapp. Can someone guide me to make this right ? I have been looking through a lot of information but couldnot figure out exactly what is to be done and ended up creating the above dummy page. I can share more information if requested. Thanks for your time to read this long post. Your advice will definitely help.

Answer 1

If you’d like to get things up and running quickly, look into using Initializr (www.initializr.com) with the HTML5 Boilerplate and Bootstrap. There are heaps of tutorials out there and if you’re familiar with HTML and CSS you can pick this up in no time.

In terms of webviews, make sure you’re setting the layout to fill the screen:

    android:layout_width="fill_parent"
    android:layout_height="fill_parent"