Allan Thraen
Apr 18, 2011
(7 votes)

Turning a mobile web app into a native Android app

As some of you maybe have read I made a little one-size-fits-all Mobile Web App template site using jQuery Mobile a little while ago. I put up a demo on my new little virtual test-server (thank you, Everweb).

Mobile Web Apps (and especially jQuery Mobile) are really cool – they look great on many devices, they have the feel of a real app – and you can actually do quite a lot with them. But I still wasn’t completely satisfied. I wanted permanent icon-real-estate on my HTC Desire Android phone – and I didn’t want an address bar in the top of my page that could entice a weak mind to go elsewhere. And also – apps are cool Smile 

You can try  my app if you have an Android device. Just point it to and select the page that lets you download a native app.


This is how I did it:

Naturally I considered Titanium, PhoneGap, myWidz and other App providers – but in the end, I figured I might as well jump in with both feet and figure out how to do it ‘for real’. Based on some vague university memories of java I figured this would be a walk in the park. And it turns out it was! Google has done a lot of work making it pretty easy to learn how to build your own Android apps from scratch. This is what I did:

  • Followed this guide to get my development environment set up. JDK, Eclipse Classic, Android SDK, Android developer tools (ADT) + defining Android SDK location in Eclipse. I also configured a virtual device (aka emulator) so I could easily debug.
  • Started a new android project.  Setup my desired project names, package names, etc. I’m still trying to get used to this weird java-thing where namespaces are domain names in reverse…really – what’s up with that? Seems there is a geek-joke here I’m not getting.
  • In “res\layout” the default layout is located, called “main.xml”. I changed it so it looked like this:
  • <?xml version="1.0" encoding="utf-8"?>
    <WebView  xmlns:android=""
  • In my main activity (the only activity) java file I defined the activity like this:
    public class AlloyTech extends Activity {
        public void onCreate(Bundle savedInstanceState) {
            //Remove title bar as we already have it in the web app
            //Point to the content view defined in XML
            //Configure the webview setup in the xml layout
            WebView myWebView = (WebView) findViewById(;
            WebSettings webSettings = myWebView.getSettings();
            //Yes, we want javascript, pls.
            //Make sure links in the webview is handled by the webview and not sent to a full browser
            myWebView.setWebViewClient(new WebViewClient());
            //And let the fun begin
    Note: Activity is basically the controller for every “mode”.
  • Then I put in a tag in the manifest stating that this app will need to access the INTERNET: <uses-permission android:name="android.permission.INTERNET"></uses-permission>
  • Finally I just had to replace a the icons (in 3 different sizes – 72x72, 48x48 and 36x36), change some names and a few settings in the manifest and use the Export wizard to make me an APK (Android Package) signed and all.


While I as developing I of course debugged – first just by running on the emulator, later by connecting my phone with a USB cable (and USB Debugging turned on) – which will let you deploy directly to the phone.

Last thing I had to do was of course to make the APK available to anybody wanting to try this. I figured I’d do this by letting people download it when they were browsing my mobile web app with an android device. So, I created a visitor group to identify Android users, checked the box to make sure it could be used for permissions, created a download page – and ensured that only people in the Android Users visitor group had permission to see that page…And voila!


Apr 18, 2011


Apr 19, 2011 07:23 PM


Apr 25, 2011 08:54 AM

Works great on my Droid 2 Global! Jul 13, 2011 01:12 PM

I am a beginner to Mobile App in EPIServer CMS 6.
Can anyone suggest how to start ?

Mauro Cattaneo
Mauro Cattaneo Jun 25, 2012 05:48 PM

Hi Allan,

I'm developing a "native-like" web app with Telerik Kendo UI mobile framework (based on jquery mobile) and I want to deploy it for Android users through a native app "container", like what you have done.

I only have a doubt: what are the main differences between using PhoneGap and your solution?

Thanks a lot

Rakesh Raja
Rakesh Raja Feb 20, 2013 10:11 AM


Can you share your project files please.. I tried to follow what you said but its not working.. Can you please share files?

williamn wil
williamn wil Aug 27, 2018 07:10 PM

Hi, anyone share full project files, please ?? I want to turn my android game web page into app actually. It's basically a game blog of WWE 2K18 Android Game, you can check it here. Anybody out there to help me out to convert it successfully without errors.

i can pay you if you guy's want.

Thanks, will be waiting for your reply.

need speed
need speed Aug 28, 2018 11:49 AM

i wantto play 3d car games y8 online. any one guide me.

tony man
tony man Sep 3, 2018 04:49 AM

Hi, Would you like to marshal the game sounds are hot now. For more information visit: SonidosGratis

Nicolash Marting
Nicolash Marting Sep 5, 2018 08:37 AM

the number of mails they take care of. It handles over a million liteblue eretire An essential note right here is that just licensed individuals can access this web site.

Please login to comment.
Latest blogs
Caching & Rendering of metadata from the DAM

For the EPiServer.Cms.WelcomeIntegration.UI 1.2.0 release, we have facilitated the ability to cache and render metadata from assets within the DAM....

Matthew Slim | Jun 2, 2023

Conversion Rate Optimization: Maximizing ROI through Data-Driven Decisions

In today's digital landscape, businesses are constantly looking for ways to improve their online presence and drive more conversions. One effective...

JessWade | Jun 1, 2023

Enhance Your Writing with Suggestions

Are you tired of staring at a blank screen, struggling to find the right words? The Epicweb.Optimizely.AIAssistant Addon is here to revolutionize...

Luc Gosso (MVP) | May 31, 2023 | Syndicated blog

Content Graph - Letting GraphQL do all the hard work for you

Background As we have seen before, setting up Content Graph on the CMS side is pretty easy. However, when it comes to the “head” part of the setup,...

Kunal Shetye | May 26, 2023 | Syndicated blog

Improved headless functionality in Customized Commerce

Did you know that with the release of Content Delivery Commerce API 3.7 we have massively improved the out of the box headless capabilities of...

Marcus Hoffmann | May 25, 2023

Boost Your Productivity with the AI Assistant Addon for Optimizely Content Cloud

In today's fast-paced digital world, efficiency and convenience are paramount. That's why we're excited to introduce the Optimizely AI-Assistant...

Luc Gosso (MVP) | May 25, 2023 | Syndicated blog