Allan Thraen
Apr 18, 2011
  47043
(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
CMS + CMP + Graph integration

We have just released a new package https://nuget.optimizely.com/package/?id=EPiServer.Cms.WelcomeIntegration.Graph which changes the way CMS fetch...

Bartosz Sekula | Nov 5, 2024

Block type selection doesn't work

Imagine you're trying to create a new block in a specific content area. You click the "Create" link, expecting to see a CMS modal with a list of...

Damian Smutek | Nov 4, 2024 | Syndicated blog

.NET 8 FAQ

I have previously written about .NET compatibility in general and .NET 8 in particular, see blog posts here , here and here . With the end of suppo...

Magnus Rahl | Nov 4, 2024

Dynamic packages in Commerce Connect

In Optimizely Commerce Connect, you can group different items using packages and bundles. Package: A package has one or more versions of a product...

K Khan | Nov 1, 2024