30025

Easiest way to encapsulate a HTML5 webpage into an android app?

We have developed a large web-based, responsive HTML5 data visualization that works nicely on PCs as well as on mobile devices. There's one thing though that is a bit annoying (on mobile devices), which is the fact that you always see some parts of the browser and therefore never get a clean fullscreen user experience.

We don't want to throw away the benefits of a platform-independant web-based HTML5 application, of course, but nevertheless we thought of offering an additional Android "app" to our customers, whose only purpose is to show our web application in fullscreen, without any title bars or menus etc. This would be just as functional and easy-to-work-with as our web app in a browser, but it would be a kind of polished version of it. I'm not an Android developer, but I see many many Android apps out there that are basically just a container for a browser window (webview?).

Although it's tempting to take a look at android development, I wonder if there is a tool or some kind of generator that produces such a pseudo-app by just giving a URL and maybe an icon? That would be perfect and totally sufficient for our purpose (and probably for others, too).

Update: Danilo recommended PhoneGap, which is great, but it might be a little bit over the top in my case as I only need to show a frameless browser window and do not need to run a web server with a node app on the phone itself.

Answer1:

How to start a basic project that loads a simple HTML page.

If you create a new project choice for Empty Activity

First you will need to define your layout. You need to add a Webview layout to your Activity_main.xml

<strong>Activity_main.xml is located under res -> layout</strong>

This your Webview layout:

<WebView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/webView" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" />

The parent layout-tag needs to be <RelativeLayout

The second thing you need to do is to define what permissions you need you can do this in the AndroidManifest.xml

<strong>AndroidMainfest.xml is located under manifest</strong>

You need to add this permission:

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

If you forgot these permission it will give you an error because he can't find the webpage even its a local file this permission is needed.

One problem with webview is that if you rotate your phone your activity will be restarted. That is not user-friendly so will lock the view to portrait. So what we need to do is this:

<activity android:name=".MainActivity" android:configChanges="orientation" android:screenOrientation="portrait">

So your AndroidManifest will look something like this:

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="YOUR_PACKAGE_NAME"> <uses-permission android:name="android.permission.INTERNET"/> <application android:allowBackup="false" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:configChanges="orientation" android:screenOrientation="portrait"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <!-- ATTENTION: This data URL was auto-generated. We recommend that you use the HTTP scheme. TODO: Change the host or pathPrefix as necessary. --> <data android:host="[ENTER-YOUR-HTTP-HOST-HERE]" android:pathPrefix="/main" android:scheme="http" /> </intent-filter> </activity> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> </application>

Now will add the java code to the MainActivity to load the webpage we want:

<strong>MainActivity.java is located under java -> [YOUR_PACKAGE_NAME]</strong>

The first line we will define our class:

public class MainActivity extends Activity

There in will we write some functions, the first function is to create the webview.

We declare a private var Webview. To write less code.

private WebView view; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); view = (WebView) this.findViewById(R.id.webView); view.getSettings().setJavaScriptEnabled(true); view.getSettings().setAllowFileAccess(true); view.getSettings().setDomStorageEnabled(true); view.setWebViewClient(new MyBrowser() {}); view.loadUrl("HERE_YOUR_LINK"); view.setWebChromeClient(new WebChromeClient() {}); }

If you want to load a local file the link will be something like this:

view.loadUrl("file:///android_asset/www/index.html");

If you want to load a website like google it will be:

view.loadUrl("https://www.google.com/");

Later on I will say where you need to locate your local HTML files that you want to load.

If you have something on your site like a link mailto:. It think you would like if people click on that it will open the Gmail app or an other email app. You can do that by creating a OverrideUrlLoading methode.

private class MyBrowser extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url){ if (url.startsWith("tel:") || url.startsWith("sms:") || url.startsWith("smsto:") || url.startsWith("mailto:") || url.startsWith("mms:") || url.startsWith("mmsto:") || url.startsWith("market:") || url.startsWith("https://youtu")){ Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); startActivity(intent); return true; } else { view.loadUrl(url); return true; } } }

Like you can say I have also add url.startsWith("https://youtu"). I have personally because I find it user-friendly that you link to a Youtube video it will open in the Youtube app because people can then view it in full screen.

The only function we need is what do to if people click back on their phone.

public boolean onKeyDown(int keyCode, KeyEvent event) { if ((keyCode == KeyEvent.KEYCODE_BACK) && view.canGoBack()) { view.goBack(); //method goback() return true; } return super.onKeyDown(keyCode, event); }

You need to add those lines to your build.gradle:

compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support.constraint:constraint-layout:1.0.2' compile 'com.google.gms:google-services:3.1.0'

So it will look something like this:

//here is so more code in the file dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support.constraint:constraint-layout:1.0.2' compile 'com.google.gms:google-services:3.1.0' testCompile 'junit:junit:4.12' } apply plugin: 'com.google.gms.google-services'

If you want to load local files instead of a website that is also possible. But where do I need to place them?

You need to create a map called assets.

Where will that map be located. Go to your file-explore on your PC navigate to this:

<strong>YOUR_PACKAGE_NAME -> app -> src -> main</strong>

In that folder you will create a map assets and there in a map www there in you will paste your files

If you have any questions please respond

Answer2:

I suggest you to check some existing webview based framework, for instance:

Adobe Phonegap

It will help you to generate an app that is compatible with different devices and platforms (including iOS). You can easily find documentation online, e.g., to make it fullscreen.

Recommend

  • Django FilteredSelectMultiple not rendering on page
  • AGI script executes without error , but no results generated
  • Posting to Facebook page from Facebook application without login to facebook
  • Restric user access to table using Sql Server 2008
  • Access DB - Operation must use updateable query
  • What to use instead of window.location.href in chrome extension?
  • How to reset Cassandra superuser, when Cassandra does not know 'cassandra' default user?
  • PHP Check If require_once() Content Is Empty
  • Detect which app has been launched in android
  • Applying SUPEE-6788, it removes static block on home page
  • How to check the permission whether a friend allow me to post on his wall or not using php sdk
  • How to do a pull request from my current state
  • Test-Path / System.IO.Directory::Exists not working as expected
  • Do stored procedures have the ability to delete a file from the OS?
  • What do getresuid() and setresuid() do?
  • Django RESTful API error “type object 'User' has no attribute '_meta'”
  • Gitlab - Google compute engine Continuous delivery
  • Can't access Facebook campaigns
  • How to upload files in php using html
  • Granting permissions to Azure Active Directory Web Application automatically
  • Angular2 - Template reference inside NgSwitch
  • Git describe fails to return most recent annotated tag
  • How to add a focus style to an editable ComboBox in WPF
  • Web.config system.webserver errors
  • Force show.bind execution
  • NSScanner Loop Question
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Disable Enter in editText android
  • Ajax Loaded meta Tags
  • Get one-time binding to work for ng-if
  • Volley JsonObjectRequest send headers in GET Request
  • Importing jscolor library in angular 2
  • Linking SubReports Without LinkChild/LinkMaster
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?