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.
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 android web app.
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 android web 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.
And if you are looking forward to more technical blogs about web development and mobile app development follow Agira Technologies a fast growing IT company, exploring upcoming technologies and exposing everything to help the right people at right time. For more queries always reach us. We love to hear from you!
