{"id":32,"date":"2012-03-10T23:16:15","date_gmt":"2012-03-10T17:46:15","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=32"},"modified":"2012-03-10T23:16:15","modified_gmt":"2012-03-10T17:46:15","slug":"creating-android-applications-with-html-user-interface","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/creating-android-applications-with-html-user-interface\/","title":{"rendered":"Creating Android Applications with HTML User Interface"},"content":{"rendered":"

I created my first two Android applications completely using Android APIs. However I realized that I can build better user interface quickly using HTML, JavaScript and CSS. Android SDK provides WebView controls which is a browser control. So I started looking for ways to make WebView render local HTML files. Most APIs of WebView are simple to understand and use, except one important method, loadUrl.<\/p>\n

To begin with I was not sure where to store my HTML\/JS files in the Android project and what URL to use to load them. JavaDoc help for WebView did not mention how to load local assets into WebView. It turned out that you need to keep all your HTML\/JS files in the ‘assets’ folder of you project and load them with URL file:\/\/android_asset\/.
\n
\nHere are steps to load local HTML file in the Activity class –<\/p>\n

    \n
  1. You first need to create a layout for your Activity in res\/layout folder of your Android project<\/li>\n
  2. In the left pallet, click ‘Composite’ view and drag and drop ‘WebView’ control on to the layout
    \n\"Adding<\/a><\/li>\n
  3. In your activity class, associate above layout with the activity using setContentView method –\n
    public void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.main); \/\/ pass id of layout resource\n    }<\/pre>\n<\/li>\n
  4. In the onStart method of the Activity, get reference to the WebView we created above and load URL\n
    public void onStart() {\n        super.onStart();\n\n        WebView webView =  (WebView)findViewById(R.id.webView1);\n        \/\/enable JavaScript\n        webView.getSettings().setJavaScriptEnabled(true);\n        webView.loadUrl(\"file:\/\/\/android_asset\/index.html\");\n    }<\/pre>\n<\/li>\n
  5. Create index.html in the ‘assets’ folder of your project<\/li>\n<\/ol>\n
    Accessing Java class from JavaScript<\/h2>\n
    With HTML, JavaScript and CSS you can create many useful Android applications. If you use HTML5 APIs, you could even create and access SQLLite database from JavaScript. However sometimes you many want to get access to Android APIs from your JavaScript code. You can do that as follows.<\/p>\n
    Create a class that will act as an interface between Java code and JavaScript code<\/p>\n
    public class java2JSAgent\n    {\n        public String getContacts()\n        {\n            String jsonResponse = null;\n            \/\/call Android APIs to get contacts\n            \/\/serialize to JSON and assign to jsonResponse\n\n            return jsonResponse;\n        }\n    }<\/pre>\n
    Craeate and instance of this class in onStart method and associate it with the instance\u00a0of WebView<\/p>\n
    webView.addJavascriptInterface(new java2JSAgent(), \"java2JSAgentVar\");<\/pre>\n
    The second argument to addJavascriptInterface method is name
    \nof the JavaScript variable
    \n. You can now access the Java object in JavaScript code using this variable name
    \n.<\/p>\n
    <script type=\"text\/javascript\">\n    var contactsJson = java2JSAgentVar.getContacts();\n<\/script><\/pre>\n
    So, using HTML, JavaScript, CSS and native Android APIs you can create quite powerful Android applications. And if you want to develop cross platform mobile applications using HTML and JS, then PhoneGap<\/a> is your best bet.<\/p>\n
    -Ram Kulkarni<\/p>\n
    Update :<\/strong>
    \nIn Android SDK 4.2, you have to annotate (@JavascriptInterface) methods in Java class that you want to make available to JavaScript. (see description of     addJavascriptInterface<\/a>). So in the above example the class java2JSAgent would be –<\/p>\n
    import<\/span> android<\/span>.<\/span>webkit<\/span>.<\/span>JavascriptInterface<\/span>;<\/span>\n\npublic<\/span> class<\/span> java2JSAgent\n{<\/span>\n        @<\/span>JavascriptInterface\n        public<\/span> String<\/span> getContacts(<\/span>)<\/span>\n        {<\/span>\n            String<\/span> jsonResponse =<\/span> null<\/span>;<\/span>\n            \/\/call Android APIs to get contacts<\/span>\n            \/\/serialize to JSON and assign to jsonResponse<\/span>\n\n            return<\/span> jsonResponse;<\/span>\n        }<\/span>\n}<\/span><\/pre>\n
    Also when running this code with the latest SDK and emulator, I had to sometimes call webView.setWebChromeClient(new WebChromeClient()) after enabling JavaScript in the WebView. Otherwise I observed that JavaScript code on the HTML page was not getting executed. However I observed that this behavior was inconsistent.<\/p>\n
    public<\/span> void onStart() {<\/span>\n        super<\/span>.<\/span>onStart(<\/span>)<\/span>;<\/span>\n\n        WebView webView =<\/span>  (<\/span>WebView)<\/span>findViewById(<\/span>R.<\/span>id.<\/span>webView1)<\/span>;<\/span>\n\n        \/\/enable JavaScript<\/span>\n        webView.<\/span>getSettings(<\/span>)<\/span>.<\/span>setJavaScriptEnabled(<\/span>true<\/span>)<\/span>;<\/span>\n        webView.<\/span>setWebChromeClient(<\/span>new<\/span> WebChromeClient(<\/span>)<\/span>)<\/span>;<\/span>\n\n        webView.<\/span>loadUrl(<\/span>\"file:\/\/\/android_asset\/index.html\"<\/span>)<\/span>;<\/span>\n}<\/span><\/pre>\n","protected":false},"excerpt":{"rendered":"
    I created my first two Android applications completely using Android APIs. However I realized that I can build better user interface quickly using HTML, JavaScript and CSS. Android SDK provides WebView controls which is a browser control. So I started looking for ways to make WebView render local HTML files. Most APIs of WebView are … <\/p>\n
    Continue reading “Creating Android Applications with HTML User Interface”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[3,1],"tags":[2],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-w","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/32"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}