How To Convert Your Website Into An Android App

Share

Splash Screen For Android Studio

Converting your website into an app using Android Studio can be quiet simple, allowing for you to progress it further with more complicated features as you see fit.

I will itemise the steps (starting with the bare essentials that are required) so that you can take this guide as far as you like, depending on what you are trying to achieve.

In this guide I will walk you through:

  • Setting up a web-view which will be responsible for displaying your website as an app
  • Check if user is connected to the internet
  • Updating the native back button on Android phone to go back in the web view
  • Swipe down to refresh
  • Add a progress bar
  • Add a splash screen on startup whilst website is loading
  • Sending push notifications using Firebase

Requirements:

  • Android Studio
  • Google Developer Account (if you are going to your app to the app store – costs $25)
  • Internet Connection
  • Firebase account (free Google account, only if you want to send push notifications)
Before we begin, if you have no interest in understanding how this works, you can simply download this quick guide that will just give you the necessary copy paste info you need to get it done in less than 5 minutes.

Getting Started

(Skip this if you know how to get an Android Studio project started)

If you haven’t already, you must download Android Studio for this guide, download it here.

Once downloaded, start a new project.

Your Application name will of course be the name of your app, as it will appear in a user’s phone.

Company domain should be your website, if you don’t have a website you could use example.com but if you are planning on uploading to the app store you will run into issues.

Project location, doesn’t really matter just pick somwhere convenient.

Android Studio will automatically make your Package name a reverse of your domain and your app name.
This will give your app a unique identity which is required for uploading to the app store so just leave it as whatever is produced automatically.

Click next.

(p.s. i’ve changed the skin on my Android Studio to be this dark theme, so yours may look brighter.)

Creating A project in android studio

Now it will ask you to select your SDK version.

This corresponds to the Android version people are running, so if you build your app on an old version it will be compatible with many devices however lack in extra features and security.

This is a whole other topic for discussion on selecting the right SDK/API so for the purpose of this guide I am going to use API 21: Android 5.0 (Lollipop).

I only set my project for phone and tablet.

Now click next.

Selecting Android SDK

On the next screen, select Empty Activity and then click next.

Empty Activity In Android Studio

Now it will ask you about the Activity Name and Layout Name, for simplicity leave these as is.

Click finish.

Your project is ready to start!

At this point Android Studio will start booting up your project – this may take a little while.

Whilst we are working on this project you will need a device to test progress on.

If you have an Android device, you can get it set up to run your app while you are testing by using this method.

Alternatively, if you don’t have an Android device you can use a virtual device in Android Studio, this simulates an android mobile device to see how your app will function on a mobile device.

To set up your android emulator click on the green arrow in the top right of your dashboard and then click on Create New Virtual Device.

Creating virtual device in android studio

You will be given a list of Android devices, pick any really, I just pick the Pixel because I have one.

After you have picked a device, click next in the bottom right.

Now it will ask you what system image you want, this is representative of the operating system. I just download the latest one so that I know it’s compatible with my selected SDK.

There will be a link next to the operating system name that says download.

Download this.

**important** When selecting a system image, make sure that in the Target it says (Google APIs), this is required if you want to test push notifications on your emulator.

Download Emulator OS Android Studio

After this has downloaded the relevant operating system will not have a download button next to it anymore and you will be able to select next in the bottom right of the screen.

Leave the settings on the next page as is and click finish.

You should now have a virtual device available for booting on, test this by clicking OK.

It will basically boot exactly like a normal phone would, so this could take some time.

If you find that it will not boot, in the bottom right of Android Studio is an Event log.

Android studio will report any errors in there and then it’s just a matter of Googling the error. There are an infinite amount of things that could be an issue here depending on your OS config so it’s best to check there. For example you will see in mine that I had a HAX module version error. Simple Google fixed it pretty quickly.

Android Studio Phone Emulator

1. How To Set Up A Web View In Android Studio To Convert Your Website Into An App

Creating the webview that loads your website into the app container comprises of two parts.

  1. Creating the webview layout (XML) 
  2. Adding the functionality that loads the URL (JAVA)

First of all, to create the container that will load the webview, in your folder structure on the left panel, open app > res > layout > activity_main.xml by double clicking on it.

There are two view options here, we want to use the text view as pictured below.

Creating a web view container in android studio

We want to get rid of the text in the middle of the app and replace it with our webview container.

Copy paste this webview in place of the text container.

Webview code

Now we are going to make it listen to your URL.

On the left bar, go to app > java > **top folder corresponding to your domain name** > MainActivity

Now, we are going to store your url as a string and initialize the webview.

Add the following bits of code into your java file that you are missing, or copy everything and just change the package back to what it was originally and set the websiteURL to correspond to the website you want your app to be.

Make sure you change your websiteURL to suit what you want.

Consider adding a UTM tracking code here to see what traffic is going through your app in Google Analytics.

Now, it is just about working we just need to grant internet permission to the app.

Go to app > manifests > AndroidManifest.xml

Directly under the <manifest …….. > add the below <uses-permission android:name=”android.permission.INTERNET” /> code.

My final manifest code looks like this

Now if you run your app you should have a super basic webview app, congratulations!

Android Studio Webview App

In the next step we will change the colours and set your icon app icon.

2. Change The App Icon & Colours For Your Web View App

By default, Android Studio will give you three basic colour variables setup already.

To find these, go to app > res > values > colors.xml

Naturally, set these to the colours that would suit your website.

After setting these colours up and re-running my app, you will see the impact this has had.

Changing App Colours In Your Webview App

Now I don’t like the look of the action bar because I have a menu on my website and I don’t really add anything there on the app – don’t remove this if you have some ideas of what you will add there but if you want to remove the action bar up the top.

Go to app > res > values > styles.xml

Change the style name parent to the following

No Action Bar In Webview App

Now that we’ve gotten rid of the action bar, we will set the icon for your app.

If you look at the app icon i’ve circled below, this is the default Android app icon so we will change this.

Default Android Icon

These icons are based on something called adaptive icons, which is rather than being a static image file, it’s an image (your logo) combined with some XML to set colours and styling and then what this means is that Android and Google can resize or shape the icon depending on whether it’s in a home screen or on the play store etc.

Fortunately, Android Studio offers a really easy way to generate your icon.

We will use the Image Asset Studio to create these from within Android Studio.

Go to app > res > right click on res > new > Image Asset

Creating Icons In ANdroid Studio

This is fairly self explanatory.

Don’t change the Name it will warn you that this icon name already exists and will be overwritten, this is good, this will overwrite the default Android icon.

If you move down to Foreground Layer you can set your icon image (if you have one) by navigating to your image using the Path.

Make sure your icon is on a transparent layer here because we will set the background colour in background layer.

You can resize your icon using the resize slider down the bottom.

Move over to Background Layer and simply select the colour you want.

Super simple, when your done designing your new icon click next to finish up.

Overwriting Existing Icons In Android Studio

It will show you where you are overwriting existing icons, that’s fine.

Click finish and now you should have your own icon set for your app now.

Creating A New App Icon In Android Studio

3. Check Whether A User Is Connected To The Internet In Android Studio

If a user tries to open your app without an internet connection – of course it won’t work as you need internet to view your webview app.

They will receive an error message that will be very confusing, so it’s best we handle this programatically.

It will basically say

  • If user is connected to internet > go to app.
  • If user isn’t connected then print a notification saying so.

Go to app > manifests > AndroidManifest.xml  and add the following line under the internet permission line.

Your manifest should now be looking something like this

Now go to the java file for your main activity app > java > **url** MainActivity.java

Now we are going to do two things here.

  1. Set up an if/else statement that checks if the person is connected to the internet, if not displays an error message and if they are then proceeds to load the webview.
  2. Set up another class that does the actual checking of the network.

Below is the new java file

If you are going to do a full copy paste of the text below remember to update your package and websiteURL.

Now it will gracefully tell them they are not connected to internet before loading the webview, if they click okay it will exit the app.

If they are connected, there will be no issues.

Check Internet Connection Android Web View

4. Setting The Native Back Button To Go Back In A Web View App

By default, the back button on an Android device will not do anything within your app, so we are going to set it up so that it goes back if available in the webview and then if they try to go back from their first position it will ask if they want to exit the app.

This is a pretty simple one, go to your MainActivity.java by going app > java > domain > MainActivity.java and add the following into your MainActivity class.

Run the emulator and check that it is working as intended.

Try going back from the first position to see if the dialog box appears.

Below is what your MainActivity.java should now be looking like – with the exception of the few differences you will have based on your app name/url etc.

Are you sure you want to exit android studio webview app

Next we are going to add swipe down functionality to refresh a URL.

5. Swipe Down To Refresh In A Web View App In Android Studio

If you’ve ever used chrome or a variety of other browsers in mobile or even most native apps, you would be pretty used to pulling down to refresh a page.

We can add this functionality to our webview app by firstly

  • Editing our layout.xml to have a swipe container
  • Editing our MainActivity.java to listen to the swipe and refresh the current URL on swipe

Go to your activity_main.xml in app > res > layout

Overwrite your <webview /> code with the following, it’s simply a swipe box wrapping around the webview.

Now head back over to your MainActivity.java (app > java > domain > MainActivity.java) so that we can add the functionality.

Declare the following just under your private WebView webview

The SwipeRefreshLayout will be red and complaining about an issue, if you hit ALT + Enter it will import the class up the top of the java file for you

If you can’t do that, just copy paste the previous import into your list of other imports.

** If you are finding anything is flagged red in your java file with a tooltip on it, you can click on it and hit ALT + Enter and Android Studio will show you recommendations on how to fix the issue.

Now, within the OnCreate method we will add the following swipefresh info, make it the last part of the method just before the final closing bracket.

I have included my entire OnCreate  method thus far, you will find the swipe to refresh info at the end of this method.

Now, the page will refresh but there will be a constantly spinning wheel on the refreshed page.

Refresh Wheel Android Studio

To stop this, we will create a super simple part that says once this page has finished loading get rid of the swipe refresh.

Update your WebViewClientDemo with this new OnPageFinished section that will stop the wheel from refresh once a page is finished loading.

Below is my java file thus far.

6. How To Add A Progress Bar To Your Web View App In Android Studio

I found it user friendly to add a horizontal progress bar as most people are used to seeing how long something is going to take to load.

For this, just as before, we will be editing our activity_main.xml layout and our MainActivity.java

To add the progress bar to our layout, go to app > res > layout > activity_main.xml (if you haven’t already noticed this, each tab will stay open until you close it so you don’t have to keep navigating on the left. I’ve just been mentioning it in case anyone gets lost.

Now, after your closing </android.support.v4.widget.SwipeRefreshLayout> we are going to add the progress bar code, copy the following immediately after.

I’ve got it set to be at 20% already so that you can see it in your layout sample.

It will of course use your accent colour as the loading colour.

Horizontal Progress Bar Android Studio

That’s it for the layout, now head back over to your java file (app > java > domain > MainActivity.java) and in the OnCreate method we will initialize our progress bar and set the max to 100.

Copy the following into the end of your on create method, after the closing ); of the swiperefreshlayout

As previously mentioned, they will be red with errors so you will need to click on the (ProgressBar) and hit ALT + Enter to import the ProgressBar class.

You will also need to declare ProgressBar up the top under your MainActivity class, copy the following under your SwipeRefreshLayout

As previously mentioned, they will be red with errors so you will need to click on the (ProgressBar) and hit ALT + Enter to import the ProgressBar class.

Under your webview settings at the end of the network check we will add a WebChromeClient, update your settings to correspond to the below (just adding the last line)

Now we are going to update our WebViewClient and add a WebChromeClient.

Below is my updated copy which includes everything you will need to make your progress bar work.

It basically moves the bar according to what % of the page has been loaded and then gets rid of it once it hits 100%.

Horizontal Progress Bar Active

Here is my full java file so far in case i’ve missed anything.

7. Add A Splash Screen To Your Web View App Whilst Web View Loads Android Studio

Straight up, full credit for this splash screen goes to Elvis Chidera for this awesome article on splash screens.

I’d recommend reading this there’s some interesting points on the different ways to approach splash screens, but for this tutorial i’ve used the one that made the most sense to me.

For this, put together a logo/image you would like to have on the splash screen.

It will basically be an XML file with a background and a logo, but once it’s all set up you can change it up to appear however you would.

To begin, go to app > res > values > styles.xml and add the following lines after the closing </style> tag.

Now Android will get upset because it is not referencing anything.

On the left sidebar, go to app > res > drawable, right click the drawable folder and go new > Drawable resource file and name it launch_screen and click ok.

Creating a launch screen in Android Studio

Now copy paste the following code into your launch_screen.xml.

You can update your background colour by changing the @color/colorPrimaryDark part.

You can easily set it to one of your earlier predefined colour or you can just set a hex colour if you want something custom.

You must now add your logo image with the name “logo” to the folder drawable.

I just right clicked the drawable folder (app > res > drawable) and went  > show in explorer  which opened the folder it was located in.

I then copy pasted my logo with the name “logo” into this folder.

Now, all that’s left is to set this style on the launch, to do this we need to go to app > manifests > AndroidManifest.xml and change the android:theme to now reference AppTheme.Launcher.

Below is what my Android Manifest currently looks like.

Now when I boot up the app, while it’s loading itself into the phone it will present this splash screen.

Splash Screen For Android Studio

8. How To Set Up Push Notifications In Android Studio Using Firebase

To complete this step, you will need to sign up for a Google service called Firebase.

Firebase is a web and mobile application development platform, it has a product called Google Cloud Messaging which we will use to power our push notifications.

So head over to Firebase and click sign up, login to your Google account and click Add Project to get started.

Name your project with relevance – I named mine ChristopherWD app and click continue.

Signing Up To Firebase

As soon as Firebase loads you will have an option to Add an app to get started.

Click on the Android icon.

Enter your Android package name as in your app, this can be found at the top of your MainActivity.java (app > java > domain > MainActivity.java (or it will be the domain in the folder structure you just opened).

Give your app whatever nickname feels relevant, and don’t worry about the Debug Signing Certificate for this.

Once you click continue, it will let you download google-services.json and advise you of where to put it.

It’s under a slightly different app folder structure, which I will show you how to access it.

Download google-services.json and pop it on the desktop for now.

Now, if you head over to Android Studio, on the left bar, just above the usual app folder is a dropdown named Android, select this and change it to ‘project’.

Installing google-services

Now your folder structure will look more like the one seen on the Firebase website, right click on app > show in explorer and then open the app folder. Drag the google-services.json file into this folder and now it should appear in your folder hierarchy.

Firebase google-services installed

Finally, if you go back to the Firebase website and click next it will ask you to modify two different build.gradle files.

  • The first one (labeled no.1 in the picture below) is for the Project-level build.gradle, you only need to add the one line as outlined in the Firebase guide under the dependencies.

  • The second one (labeled no.2 in the picture below) is for the App-level build.gradle, when you open this the tab in Android studio will say app.
    If you follow the instructions in Firebase you are simply adding the implementation under the dependencies’ and then apply plugin at the very end.
    We are also going to add an extra implementation to allow us to use the messaging service.

Adding google-services plugin to the app

Project-level build.gradle

App-level build.gradle

If it doesn’t do it automatically, Android Studio will alert you that your gradle file is out of sync, confirm that you want it to sync up.

Now once this sync has completed, run your emulator to boot up the App with Firebase installed.

If all is well, when you click next on the Firebase webite steps, it should detect a communication with your app.

Firebase successfully installed

Continue into the Firebase console, there’s some cool stuff in there but for now we are done here.

We will return here shortly to grab some info so don’t exit it just yet.

Now we need to set the app up to receive and display push notifications.

Change the folder structure back to normal on the left panel by clicking on the project dropdown and changing it back to Android.

Now we are going to create two new java files to help handle the Firebase messaging.

Go to app > java > domain where your MainActivity.java is stored.

Rather than open MainActivity, right click the domain folder > new > Java Class and name it MyFirebaseMessagingService and continue.

Copy the following code into your new java file (but remember to replace the package with your own app package name).

Now do the exact same thing again to make a new java file app > java > domain > right click > new > Java Class and this time name it MyFireBaseInstanceIDService.

Copy the following content, again replacing the package name with your own.

Now we are going to add these services into our Android Manifest (app > manifests > AndroidManifest.xml)

Here’s a full copy paste of my new AndroidManifest.xml with the two services added down toward the bottom.

You can copy this but be mindful of some of the app-specific names.

If you’ve done everything correctly so far you shouldn’t have any errors popping up and you should still have a bootable emulator.

The last thing we need to do is work these changes into our MainActivity.java file, all the background work is done!

Go to app > java > domain > MainActivity.java > MainActivity

In the onCreate method, just under the setContentView(R.layout.activity_main); we are going to add the following:

The FirebaseMessaging class will get upset so this will need to be imported by either clicking on the red text and hitting ALT + Enter or adding the following line into your list of imports

Now we’re all done setting up!

Let’s head back over to Firebase.

To send push notifications go to the left panel > Grow > Cloud Messaging > click on send your first message.

Firebase Cloud Messaging

The message title is of course the heading on your push notification and the message is the body.

Push notification title and message

With the target, just select your app package name and click next.

Scheduling, now or scheduled whichever suits.

Conversion events are more or less irrelevant except for first_open naturally. I don’t usual set a conversion event.

In additional options however we’ve added a neat feature.

In our java files, we’ve set it up so that if you set a url here, it will change the webview url when the user clicks on the push notification.

To do this, the key to use is ‘url’, and then you set whatever url you want the user to end up on.

This is great for promoting new content or sales.

Changing url in webview via push notification

Click publish. Pat yourself on the back.

Android Push Notifications

For this part I started testing on my actual phone, the Android Studio emulators are often buggy when it comes to push notifications. Also, it’s a chance to see what your app feel and acts like on a real phone.

If you don’t have an Android device you can test on and you must use the Android Studio emulator, you must make sure that you select the Google API’s in your virtual device manager (as previously mentioned) and have a Google Play store account active.

If you have any issues, either shoot me an email at chris@christopherwd.com or post a comment in the section below!

Happy programming!


Share

7
Leave a Reply

avatar
5 Comment threads
2 Thread replies
6 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
Abdul ShakurismailMikeChristopher DaviesMark Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Le Roux
Guest
Le Roux

Hi Christopher.

Really great and helpful article.
I just have one question, would this app pass all the requirements to be accepted into the Play Store?

Mark
Guest
Mark

How to integrate facebook login or google login?

Mike
Guest
Mike

Hi! Very good tutorial but can you create a tutorial for app based in website but not with same menu? add buttons and other thing to make an app more pretty and make a good UI for android users.

ismail
Guest
ismail

Hello Christopher
Thank you for your explanation , it is amazing

but i have two questions if you can offer some help

1 – how can i add timer to the splash screen to make it hold longer , lets say for 5 seconds for example .
2 – the Firebase dose not send notifications , giving some warning that ( FirebaseInstanceIdService) and (onTokenRefresh ) have been deprecated, how can solve this issue

Regards

Abdul Shakur
Guest

Hello Chris, I really think your tutorials is a very cool one. I followed your tutorial and now I have an app for my music site.. The only issue I have is that, I’m unable to download songs from the site on the webview, I’m still new to android studio, please can you help me with your code,