Android Webapp in 3 Minutes

Posted by Tiago Scolari on Sep 19, 2011
In Development, Android
Tags

I’m going to use the rails application I created on the post How to Build a Mobile Rails 3.1 App to create a simple android app. You probably can do this in less than 3 minutes, I guess.

** UPDATE **

This guide is good to get you started, but I consider it deprecated. I think the end result gives a bad user experience, since it will won’t behave as an proper mobile app, and it won’t also behave as a webpage. Worst place ever.

  • First I would recommend you using responsive layout, and ditching jquery mobile.
  • Instead of navigating inside a webview and emulating transitions inside it, try to use the native transitions! You already have a native layer, why don’t you open each link in a different webview and load it as a new action? Give it a try!

I’ll write an updated guide to this in the future!

Continuing

I’m using a webview and fetch data from the web, so I need to ask internet permission in the manifest:

// add this above the application tag in the AndroidManifest.xml file

<uses-permission android:name="android.permission.INTERNET"/>

It’s also necessary a webView in the main.xml layout, here is the code:

// main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <WebView android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:id="@+id/mainWebView">
     </WebView>
</LinearLayout>

At this point, it’s possible to load the rails app into the webView: (refactoring tip: don’t hardcode your urls!)

// AndroidMobileAppSampleActivity.java

public class AndroidMobileAppSampleActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView mainWebView = (WebView) findViewById(R.id.mainWebView);
        mainWebView.loadUrl("http://mobile-sample-app.heroku.com");
    }
}

Because the sample webapp uses javascript, and probably every other page does too, it’s necessary to enable javascript in the webView:

// AndroidMobileAppSampleActivity.java - onCreate()

WebSettings webSettings = mainWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

The problem at this point is that, when you click in a link inside the webView, instead of navigating inside the app’s “browser” it will open the link in the actual mobile browser.

To change this behaviour, it’s necessary to create a webViewClient, and set it as the mainWebView’s client:

// AndroidMobileAppSampleActivity.java

public class AndroidMobileAppSampleActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView mainWebView = (WebView) findViewById(R.id.mainWebView);

        WebSettings webSettings = mainWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        mainWebView.setWebViewClient(new MyCustomWebViewClient());
        mainWebView.loadUrl("http://mobile-sample-app.heroku.com");
    }

    private class MyCustomWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}

There is one more thing I would like to change. The scroll bar is getting rendered outside the page. I want it rendered inside, this would eliminate the white gap on the right. It’s just a matter of changing the scroll bar style:

// AndroidMobileAppSampleActivity.java - onCreate()

mainWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

Et voila, it’s working :) I told you it would be less than 3 minutes.

It’s not as cool as a full native app but, with a good designer and some love, it may be worth. Having all the logic in your site, no need to update the app for each new feature, user authentication, … in a 3 minutes app.

The source of this app can be found here.