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.
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
Activity_main.xml is located under res -> layout
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
AndroidMainfest.xml is located under manifest
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:
MainActivity.java is located under java -> [YOUR_PACKAGE_NAME]
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:
YOUR_PACKAGE_NAME -> app -> src -> main
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
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.
