How a Designer Built a Web-Based Android App Using WebView
Building apps can be much easier that it look. In this article, I’ll be sharing how easy it is to a build web-based Android app by using my very own app as an example.
About the app
The app is for personal use to provide quick access to inspiring quotes from books that I’ve read in past. When I read any book, I write down things that amaze me. It’s a habit I’ve developed over the years. Since starting, I’ve created a huge collection and browsing it always fascinates me. The problem was that these quotes were listed in plain text in a note taking app. So I started thinking how to make it organized and improve my experience browsing it. So I started thinking about building a mobile app.
Android
In Android, there’s a WebView component that helps to build web-based apps really quickly. Basically, WebView displays any website in way that makes it look like a native app.
What happens in the background is that WebView displays any given website in a Chrome window withJavascript support and access to all browser actions. Initialization of WebView, which is a core part of the whole app is shown on the following image. As you can see, it contains only a few lines.
You can also see that it handles caching and splash screens which are shown while page loads. I wanted to include a natively-built splash screen that can be displayed immediately after app launches and waits for a response from the website. Anyway, the page itself loads quickly.
Website
The page is hosted on Github Pages. Github provides free hosting for repositories with pretty good response times. You can create repository and push the code which will be displayed as the website after you enable Github Pages in settings. Unfortunately, there is no backend support, what limits you to use simple HTML/JS pages.
Let’s get to the website that is displayed in Android app. All books are stored in HTML format in their own files. These are small files and considering Github limitations it doesn’t hurt to read and paste them into index.html when page is loading.
The layout consists from a list of book titles. Behind each title, there’s content of each book that is hidden by CSS class. Navigation between books is handled in Javascript which hides and shows elements. When you click on the book title, its content appears, whereas another titles fade out. When you click on the back arrow, the book disappears and another titles fade in.
Maintenance
What if I want to add another book into collection? Maintaining content is absolutely painless. All I need to do is to modify website; when I’m finished pushing it to Github, soon after, I can see the changes on my phone.
Conclusion
By writing this article I wanted to show that making your own app can be simple even without deep knowledge of developing for Android. If you are interested, I can share more details and code samples.
This article was written by Marek Sivák, Lead Designer at Pathship, a company which is revolutionizing employee learning and development.
