Convert Your Website Into An Effective Android Web app In Just 15 Minutes

 

Building separate mobile apps to retain the customers are quite normal. But, how about converting your whole website into an efficient android web app in just few minutes?

 

With fewer efforts, you can save the time, resources and development cost too.

 

Is not it Simple?

 

Easy – Peasy right!

 

Let’s get into the process of converting website into  android web app.

 

We can achieve this all by using a simple factor called Web view.

 

If you think how this web view will help us? Here you can see the transformation.

 

 

 

Related image

 

 

Let me address it with a familiar sample.

 

In Facebook, when we click on any third party link, it will never take us to the browser. Instead the third party site will get loaded in Facebook itself.

 

As you can see this concept, entirely it’s done with the help of Web view.

 

Similarly, I will show you how we can implement this process on our website.

 

For the complete reference, I have attached the full source code at the end of this blog, So later you can use it to examine more.

 

Let’s focus on the steps involved in it.

 

Step 1: Header customization & Design

 


<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

 

Above code used to create a toolbar and also to customize the header part which includes toolbar size and title etc.

 

Step 2: Web view

 

In below code, we are trying to show the website as a web app for android.

 

Simultaneously, we can view multiple sites in a single app by splitting the screen view.  At the same time, we can modify the layout’s size also.

 


<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

 

I have added a web view section pointing to specific web id. If you like to add more sites, you can add few more web view section by defining appropriate web id’s that would help you to carry multiple sites on the same screen.

 

Coding

Step 1: Defining variables

 


private String URL;
private WebView webView;

 

The above code is used to define the variables

Step 2: Integrating Design and id Declaration

 


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
webView = (WebView) findViewById(R.id.webView);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Android Web View");

 

Now we are integrating design part into Java class by declaring the id of design view.

 

Also, I had set the title for the toolbar.

Step 3: URL Specification

 


url = "http://www.beta.agiratech.com/";

 

Consequently, we need to define the website address which we want to convert and the website must have the multi-resolution support.

 

Step 4: Defining Properties And Customizing Web View

 


webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);

}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
webView.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);

}
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);

}
});

 

Additionally, we are defining the properties of web view in above code. Likewise, we can customize the structure of web view.

 

Step 5: Configuring web view

 

webView.clearCache(true);

// To clear the cache of the website in our app.

 

webView.clearHistory();

// To clear the web history

 

webView.getSettings().setJavaScriptEnabled(true);

//To enable the javascript in web view

 

webView.loadUrl(url);

// Used to load the website url in webview and loading url deals the significant action here.

 

Step 6: Project Configuration

 

// Use the below code to set the internet permission in the Manifest file.

 

<uses-permission android:name=”android.permission.INTERNET” />

 

Source code:

 

Here is the manifest file of android to configure the overall application.

manifest.xml:


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.archigupta.androidwebapp">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme.NoActionBar">
<activity
android:name=".WebViewActivity"
android:label="@string/title_activity_web_view">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

 

activity_web_view.xml:

 

XML file which is used to design the screen. In this layout, I have created the app bar layout for toolbar and the required web view.

 


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

Activity:


WebViewAcivity.java

package com.example.archigupta.androidwebapp;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
public class WebViewActivity extends AppCompatActivity {
private String url;
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Android Web View");
url = "http://www.facebook.com/";
webView = (WebView) findViewById(R.id.webView);
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);

}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
webView.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);

}
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);

}
});
webView.clearCache(true);
webView.clearHistory();
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(url);
}
}

 

 

As we know that mobile usage got tremendous increase in worldwide by providing best user experience. So customer’s are seeking for the effective mobile based services which makes them focused without distraction.

Start now, Meet the diverse needs of your customers by converting your website into an effective Android web app.