Build a Simple Web Browser in Android Studio
Watch how it works
Web browsers are used to access the contents of a web page, they are software applications for accessing information on the World Wide Web, today we’d be looking at how to create a very simple web browser app with back, forward, refresh (You can do away with the refresh button and use SwipeRefreshLayout), stop and home buttons.
Tools you’d need
- Android studio
- Internet connection
Open Android Studio and create a project.
Permissions
First we need to add some permissions, we’d be adding the following permissions
- Internet permission
- Access network state permission and
- Access WiFi state permission
Open AndroidManifest.xml file and add the permissions at the top of the manifest file
These permissions will allow us to use the internet and check the network state (whether the device has an active internet connection or not).
The interface
The interface of our browser app will be very simple as stated earlier, open the activity_main.xml file and add the following codes
You’d get some error(s) because you’d need to import the vector assets i used in the code, to do this right click on the res directory → New → Vector Assets, you’ll see a window like the one below
Click on the little dark Android icon, on the next screen, search and select your vector assets, then click OK → OK → Finish, your vector assets will be saved inside your drawable folder, expand your drawable folder to see them.
Hint: Rename the assets to match the ones in the code
If you’ve done everything right, your preview pane should look like this
Lets go add some functionality!
The MainActivity file
Before you open the MainActivity.java file, lets enable import on the fly, this will help import the classes automatically when you paste the code i’d be providing you with, click on File → Settings → Editor → General → Auto Import , check the Add unambiguous imports on the fly and click OK.
Now open the MainActivity.java file and add the following codes
You’d get some errors, to fix them change the package name at the top back to that of the project you are working on, then some classes we haven’t created yet will be red and showing some errors, just ignore them for now and proceed, we’d be creating those classes next and the errors should disappear.
The WebViewClient
One of the things the WebViewClient enables us to do is to override Android’s default behavior of opening the links inside our WebView on external applications (other web browsers). We need to override this behavior and set the WebViewClient on our WebView so links open within our WebView/loaded inside our app . We do this by calling the setWebViewClient on the webView, the code for that is already available in the MainActivity.java file above.
Now create a new Java class and call it MyWebViewClient and add the following codes
Determining the network state ( whether a user’s device has an active internet connection)
We want to be able to detect if the user has an active internet connection, if there is internet connection we would load the URL, else we’d let them know something is wrong with their internet connection, for this tutorial i used a toast message to notify the user to check their internet connection, you can design a 404 error page and send the user to the 404 page if there is no internet connection, i’d be using a toast message for this tutorial.
Create a Java class called NetworkState and add the following codes
The connectionAvailable method of this class was used in the MainActivity.java file above to check when the user’s device has an active internet connection and to perform an appropriate action in each state.
And that is all for the SimpleWebBrowser, you can now run your Android project and see it work.
The project is available here on Github.
Obviously there are lots of improvements that can still be done to this app, the project is on github, check it out and drop your contribs!.
Cheers
