Tutorial for displaying a website in an Andriod app using a Webview component
Why read this?
There are two types of mobile phone apps: “Native” and “Hybrid.”
“Native” will run a little smoother, but you need to know how to write code specific for each operating system (Android vs iOS). If you’re a web developer, you’ll need to learn two new languages.
“Hybrid” allows you to display a webpage (HTML, CSS, JavaScript) in an app “shell”. It won’t run as smooth, but it’ll get you up-and-running much faster. This is the approach I take when testing a “Minimum Viable Product” or “Proof of Concept.”
We’re going to create a “hybrid” mobile app by displaying a website, using the WebView component, in an Android app.
I have a (responsive) webpage that I want to be downloaded as an app. This article is for the Android version; I’ve written this in the past (as well an iOS version), but the instructions tend to vary over time, so I wanted to provide an up-to-date tutorial (as of April 2017).
After starting the new project in Android Studio:
On the “Configure your new project” screen, enter in the application name and company domain. The “package name” will pre-populate, reversing what you entered (which is normal)
When you hit “Next,” you’ll see a screen about “form factor.” I left it as “Phone and Tablet” (at the time of writing, the recommended minimum SDK was API15: Android 4.0.3, which reaches 97.4% of all Android devices).
On the next screen for “Add an Activity to Mobile”, select “Empty Activity”
For “Customize the Activity,” you can leave the defaults as they are, and hit “Finish”.
After a moment, you’ll see screen saying that it’s “building Gradle project info”. This might take a few minutes. Close the “Tip of the Day” if it appears, and wait another few minutes (or for me, several minutes), until you see the screen below:
or if you’ve used Android Studio in the past, it may look like this:
Go ahead and run this immediately to ensure that it works by hitting the green “play” button at the top center.
I recommend using a real Android device, as opposed to a “Virtual Device” (emulator), as that will take much longer to load. The “Select Deployment Target” window will appear, and select the your device from the Connected Devices screen.
You may have to enable settings on your phone for this to happen.
My Android device is a little old, and I didn’t have one of the newer versions of the operating system on it. I did NOT do the “Instant Run”, but it still loaded up pretty fast.
This article from the official documentation will help running your app on a real Android device.
Extra steps I had to do to get it to run on an actual device per the official documentation
- In AndroidManifest.xml, add in:
in the <application> tag
2) Enable “Developer Mode” on your phone (Settings >> About >> tap “Build Number” seven times. Go back and you’ll see “Developer Options” is now there)
3) Download a driver, if needed. I’m on a Windows machine, so I had to use this the link found in the article to download the driver.
So now I have a working app on my phone!
Let’s make the WebView now.
There are 3 files to update:
1 of 3: AndroidManifest.xml
We need to add a “uses-permission” for the user to access the Internet. Put it as a child to the <manifest> tag (I just put it above the <application> tag)
2 of 3: MainActivity.java
Update your version to look like (changing your package name on line 1) -
- Import android.webkit.WebView and android.webkit.WebViewClient (lines 5 and 6)
- Add private WebView webview ; (line 10)
- Add in the content related to the webview (lines 17–23)
- Note: line 22 removes the “bounce” effect on the web browser
3 of 3: activity_main.xml
- Remove the TextView code that was there by default, and put in the WebView code (lines 9–18) above
- Update your package name on line 7
Go ahead and run the app with the green “play” button — it should work!
Let’s add some additional basic functionality
We already disabled the “bounce” effect (when you drag a webpage too far), but there are some other things you’ll want to do to make it seem like a native app.
Remove the “action bar”
I didn’t want the “action bar” (at the very top on the screen, that defaults to the app name).
In older API versions, where this was NOT included in MainActivity.java
import android.support.v7.app.AppCompatActivity;And the class MainActivity did NOT extend AppCompatActivity, but rather simply “Activity”
…. I could update the “theme” in AndroidManifest.xml code, line 14, to:
android:theme="@android:style/Theme.NoTitleBar"However this didn’t work when recreating the sample for this tutorial. Incase You might want android.support.v7.app.AppCompatActivity the trick is to edit “styles.xml” (found in app >> res >> values)
In there, I changed the parent style to:
Theme.AppCompat.NoActionBar
Other Tips
App Icon
Be sure to update your app icons. I found it easiest to navigate to app >> src >> main >> res >> all the folders that start with “mipmap-…” . Open up the folder, and replace the icons in there with your app icon (changing the size, in pixels, and using the same name).
There are websites that will resize the icon for you. Check out https://jgilfelt.github.io/AndroidAssetStudio/icons-launcher.html and https://makeappicon.com
Use SSL
When developing for Apple, the URL has to be SSL. This is not required for Android though. Planning ahead, you should display the SSL version (in both versions), so be sure to display the SSL version here.
Splash/Loading screen
I wrote a separate article on creating the splash/loading screen. This is especially helpful if you’re using Heroku and are on the “free” plan where your dynos sleep after inactivity.
When you’re all done…
Be sure to turn off the “debuggable” mode!
By the way, if you’re displaying a PHP-based application in your hybrid app, check out my book on PHP programming, geared toward intermediate web developers.
