Creating your Webview App : Part 1

Before this, Read : Introduction to webview app

Now Lets start creating the webview app to convert the website to an android app.

After creating a new project, Select build.gradle (Module:app) from the project tree. And add the below line in the dependencies section.

compile 'com.google.android.gms:play-services:7.8.0'

After adding the line, Gradle may ask you to Sync the new dependency. Click on Sync Now if asked. and wait for the synchronization process to complete.

Now Select MainActivity.java and Delete all the code Except the first line. That is your app package name. In my case it is

package webview.sample.com.webviewapp;

Copy the below code and paste it in your MainActivity.java below the package name.


	import android.app.Activity;
	import android.app.AlertDialog;
	import android.content.DialogInterface;
	import android.graphics.Bitmap;
	import android.os.Bundle;
	import android.view.KeyEvent;
	import android.view.Menu;
	import android.view.MenuItem;
	import android.view.View;
	import android.webkit.WebSettings;
	import android.webkit.WebView;
	import android.webkit.WebViewClient;
	import android.widget.ProgressBar;

	import com.google.android.gms.ads.AdRequest;
	import com.google.android.gms.ads.AdView;

	public class MainActivity extends Activity {

	private WebView mWebView;
	ProgressBar progressBar;


	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);



	setContentView(R.layout.activity_main);

	mWebView = (WebView) findViewById(R.id.activity_main_webview);

	progressBar = (ProgressBar) findViewById(R.id.progressBar1);

	WebSettings webSettings = mWebView.getSettings();
	webSettings.setJavaScriptEnabled(true);
	mWebView.loadUrl("http://sh.st/bDVX5");
	mWebView.setWebViewClient(new HelloWebViewClient());

	AdView mAdView = (AdView) findViewById(R.id.adView);
	AdRequest adRequest = new AdRequest.Builder().build();
	mAdView.loadAd(adRequest);
	}

	private class HelloWebViewClient extends WebViewClient{


	@Override
	public void onPageStarted(WebView view, String url, Bitmap favicon) {
	// TODO Auto-generated method stub
	super.onPageStarted(view, url, favicon);

	findViewById(R.id.progressBar1).setVisibility(View.VISIBLE);

	}

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

	@Override
	public void onPageFinished(WebView view, String url) {
	// TODO Auto-generated method stub
	super.onPageFinished(view, url);

	findViewById(R.id.progressBar1).setVisibility(View.GONE);

	progressBar.setVisibility(view.GONE);
	}

	}


	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event)
	{ //if back key is pressed
	if((keyCode == KeyEvent.KEYCODE_BACK)&& mWebView.canGoBack())
	{
	mWebView.goBack();
	return true;

	}

	return super.onKeyDown(keyCode, event);

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
	// Inflate the menu; this adds items to the action bar if it is present.
	getMenuInflater().inflate(R.menu.menu_main, menu);
	return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
	// Handle action bar item clicks here. The action bar will
	// automatically handle clicks on the Home/Up button, so long
	// as you specify a parent activity in AndroidManifest.xml.
	int id = item.getItemId();

	//noinspection SimplifiableIfStatement
	if (id == R.id.action_settings) {
	return true;
	}

	return super.onOptionsItemSelected(item);
	}

	public void onBackPressed() {
	AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(
	MainActivity.this);

	// set title
	alertDialogBuilder.setTitle("Exit");

	// set dialog message
	alertDialogBuilder
	.setMessage("Do you really want to exit?")
	.setCancelable(false)
	.setPositiveButton("Yes",new DialogInterface.OnClickListener() {
	public void onClick(DialogInterface dialog,int id) {
	// if this button is clicked, close
	// current activity
	MainActivity.this.finish();
	}
	})
	.setNegativeButton("No",new DialogInterface.OnClickListener() {
	public void onClick(DialogInterface dialog,int id) {
	// if this button is clicked, just close
	// the dialog box and do nothing
	dialog.cancel();
	}
	});

	// create alert dialog
	AlertDialog alertDialog = alertDialogBuilder.create();

	// show it
	alertDialog.show();
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

After that, In Line 39, Change the Url with the website you want to use in the app. That is

mWebView.loadUrl("http://sh.st/bDVX5");

Change the URL after http://

Now, Open activity_main.xml , Delete the whole code and paste the below code in it.

	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:ads="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
	android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

	<ProgressBar
	android:layout_height="wrap_content"
	android:layout_width="wrap_content"
	android:layout_gravity="center_vertical\|center_horizontal"
	android:id="@+id/progressBar1"
	android:layout_below="@+id/activity_main_webview"
	android:layout_centerHorizontal="true"
	android:layout_marginTop="131dp" />


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

	<com.google.android.gms.ads.AdView
	android:id="@+id/adView"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerHorizontal="true"
	android:layout_alignParentBottom="true"
	ads:adSize="BANNER"
	ads:adUnitId="@string/banner_ad_unit_id">
	</com.google.android.gms.ads.AdView>

	</RelativeLayout>