Site icon Coding is Love

Complete guide to webviews in android activity

Arjun Mahishi

Android development for web developers

Introduction

Android development has a bigger buzz than web development these days. Most businesses require a website and an Android app that goes with it. But some developers find it difficult to keep their skills up to date in both the fields. Because both of them require a different set of skills.

So, in today’s market, web developers need to be able to make mobile applications as well. Sometimes it’s not enough to just make mobile responsive websites. If you are a web app developer and you want an easy way into Android development, this post is for you.

In this post, we are going to use a CSS framework called Material Design Lite (MDL) by Google. This lets us make web pages with an android app like UI/UX. Also, one the Android side, we will be implementing a view called WebView. WebView lets us render web pages inside of the Android app.

What is MDL?

MDL stands for material design lite. For those of you who don’t know, the material design is a set of guideline followed worldwide for designing UI/UX. It was introduced by Google. Most of the Android apps use material design guidelines for their apps.

So, MDL is a CSS framework as mentioned earlier. It lets us add a material look and feel to our web apps. This makes the web apps look like native Android apps.

What is WebView?

WebView is a class within the Android SDK that allows us to deliver web pages within the app itself. It is not as powerful as a web browser but it has the basic functionalities one. Implementing WebViews in Android is fairly simple.

Requirements

  1. Android Studio
  2. Server to host the web app (Apache/Django/Nginx/etc)

A summary of what we will do

We are going to make a responsive web app using the MDL CSS framework. This web app will look exactly how a typical Android app will. With an action bar, a floating action button etc. Then we will serve this web app through an HTTP server.

Then we will make a simple android app by copy pasting code. Through this app, we will open the web app that we made. And finally, we will have an app that looks exactly like a typical native Android app. Now enough talk, let get into the code.

Setup things on the Android side

We will finish up everything on the Android side first. Because, once that’s done, we won’t have to open it up again. We can just keep making changed to the web app for future updates. Also, this app can be used as a boilerplate for other apps that you will be developing.

  1. Open android studio and start a new project
  2. Choose empty activity to begin with
  3. When the project is loaded and the indexing is completed, open your activity_main.xml file in the layout under resources.
  4. Replace the existing code with the following code 
    <?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" />
  5. Open the MainActivity.java file and paste the following code inside the onCreate function 
    WebView myWebView;
String URL = "http://<Server IP address>/";
myWebView = (WebView) findViewById(R.id.webview);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setLoadsImagesAutomatically(true);
myWebView.getSettings().setAppCacheEnabled(true); // Disable while debugging
myWebView.loadUrl(URL);

    We will come back to the server IP address part later.

  6. On the class declaration statement, change “extends AppCompatActivity” to “extends Activity”
  7. Open the AndroidManifest.xml file which is inside the manifest folder, and paste the following line of code inside the manifest tag. 
    <uses-permission android:name="android.permission.INTERNET" />

The android part is done for now. We just need to paste the IP address of the server once we make one.

Setup things on the web side

We are going to make a very simple single page web app. And we will be using SimpleHTTPServer as our HTTP server. It is a python based HTTP server. But feel free to use whichever HTTP server you want. I am choosing this because it is very simple to use.

  1. Create a new project directory anywhere
  2. Create an index.html file inside that directory
  3. Put all the necessary HTML tags in the index.html except the body tag.
  4. Inside the head tag, paste the following code 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  5. Now, paste the following code below the head section. This code is basically the skeleton upon which the web app will be built. 
    

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  
<header class="mdl-layout__header">
    
<div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Title</span>
    </div>

  </header>

  
<div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    
<nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>

  </div>

  <main class="mdl-layout__content">
    
<div class="page-content">
      <body>


      </body>
    </div>

  </main>
</div>
  6. The above code has a body tag in between. All your UI/UX related components should go inside that tag.
  7. Rest of the things are done normally as far as the HTML and CSS are concerned
  8. Now we will host this index.html file on our server.
  9. If you want to use the same server that I am going to use, make sure you have python installed. Click here for help.
  10. Go into your project directory and open the command prompt/terminal there. On Windows, you can hold the shift key and right-click on an empty space and select “open command window here”. If you are using Linux,
    then you probably know how to do it.
  11. In the command prompt/terminal, type the command 
    python -m SimpleHTTPServer
  12. Now your web app will be accessible to anyone connected to your network.
  13. Open the web page in your browser by typing in “http://localhost:8000/” or whichever address you hosted it on. You should be able to see the web page that you just created.

Putting them together

  1. Check the IP address of your computer on the network that you are connected to. By either executing “ipconfig” or “ifconfig” based on your OS.
  2. Once you know your IP address on the network, go back to the android studio.
  3. In the MainActivity.java, replace with your IP address. (You will need to add a port number for some servers. For example, if used SimpleHTTPServer, you have to add “:8000” to the IP address.)
  4. Now, connect your phone to your computer with a data cable. And make sure developer options is enabled.
  5. Go into developer options in your phone and turn on USB debugging.
  6. Go back to android studio and click on the Run button (it is a green play button on the toolbar)
  7. Select the device that you have connected and run the configuration

If you followed the steps correctly, the app will be launched on your phone. And the web app will look like with was built natively. You can make further changes to the web app and the changes will automatically be reflected on the android app.

I  hope this guide helps you as a web developer in buildingAndroid apps with the same confidence building web apps. If you run into any problem please reach out in the comments below.

Resources

Exit mobile version