Allan Thraen
Apr 18, 2011
  46278
(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 http://demo.ath.episerver.com and select the page that lets you download a native app.

image

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="http://schemas.android.com/apk/res/android"
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    android:scrollbars="none"/>
  • In my main activity (the only activity) java file I defined the activity like this:
    public class AlloyTech extends Activity {
        
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            //Remove title bar as we already have it in the web app
            this.requestWindowFeature(Window.FEATURE_NO_TITLE);
            //Point to the content view defined in XML
            setContentView(R.layout.main);
            //Configure the webview setup in the xml layout
            WebView myWebView = (WebView) findViewById(R.id.webview);
            WebSettings webSettings = myWebView.getSettings();
            //Yes, we want javascript, pls.
            webSettings.setJavaScriptEnabled(true);
            //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
            myWebView.loadUrl("http://demo.ath.episerver.com");
        }
    }
    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!

image

Apr 18, 2011

Comments

Apr 19, 2011 07:23 PM

Like!

Apr 25, 2011 08:54 AM

Works great on my Droid 2 Global!

MuraliKrishna@websynergies.biz
MuraliKrishna@websynergies.biz Jul 13, 2011 01:12 PM

Hi,
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
Mauro

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

Hi

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
Optimizely PIM - Variant Management Overhaul & Rollout

Optimizely PIM has completely overhauled variant management with improved usability and support for variant swatches. In order to enable this...

Arthur Vander Voort | Feb 4, 2023

You Just Got Vectored! SVG Image Formats

 If you're reading this, then you've come across a need that nearly all Opti developers encounter in their careers; You need to display a vector...

Greg J | Feb 3, 2023 | Syndicated blog

CMS Core 12.12.0 delisted from Nuget feed

We have decided to delist version 12.12.0 of the CMS Core packages from our Nuget feed. As a consequence, we are also temporarily delisting version...

Magnus Rahl | Feb 3, 2023

How Optimizely Web Experimentation enables fast validation of design and UX changes

Ever wondered how to increase conversion rates and quickly validate design/UX alternatives to find the most impactful changes? I wrote a practical...

Jacob Pretorius | Jan 31, 2023

What’s next after Google Optimize’s sunsetting?

Google has announced that it is sunsetting the Google Optimize and Optimize 360 services, forcing customers to explore new platforms and invest in...

Ynze | Jan 31, 2023 | Syndicated blog

What’s next after Google Optimize’s sunsetting?

Google has announced that it is sunsetting the Google Optimize and Optimize 360 services, forcing customers to explore new platforms and invest in...

Ynze | Jan 31, 2023 | Syndicated blog