Views: 44746
Number of votes: 7
Average rating:

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

Jeff Wallace
( By Jeff Wallace, 4/19/2011 7:23:41 PM)

Like!

( By , 4/25/2011 8:54:22 AM)

Works great on my Droid 2 Global!

MuraliKrishna@websynergies.biz
( By MuraliKrishna@websynergies.biz, 7/13/2011 1:12:41 PM)

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

Mauro Cattaneo
( By Mauro Cattaneo, 6/25/2012 5:48:57 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
( By Rakesh Raja, 2/20/2013 10:11:48 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
( By williamn wil, 8/27/2018 7:10:23 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
( By need speed, 8/28/2018 11:49:17 AM)

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

tony man
( By tony man, 9/3/2018 4:49:46 AM)

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

Nicolash Marting
( By Nicolash Marting, 9/5/2018 8:37:11 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.