8/18/2017 How to Convert Website to Android App Using Android Studio - The Crazy Programmer

How to Convert Website to Android App Using

Android Studio
In this tutorial you will learn how to convert website to android app using Android Studio.

Before reading this tutorial I hope that you already have basic knowledge of Android App
Development. Otherwise you won’t be able to understand anything.

What I will do here is simply open the website in webview with a loading bar so that it will look like
we are using an android app.

By using this method you can convert website or wordpress blog into android application. You can
follow this link to see an example app that I have created using this process.

Note: Make sure the website for which you want to create app is responsive, otherwise the app
will not look proper.

If you want to integrate admob and google analytics in your app then you can follow below
tutorials.

Also Read: Android Google Analytics Integration Tutorial

Also Read: Android AdMob Tutorial

http://www.thecrazyprogrammer.com/2017/08/convert-website-android-app.html 1/5
8/18/2017 How to Convert Website to Android App Using Android Studio - The Crazy Programmer

How to Convert Website to Android App

Create an android studio project with the website name.

Add internet access permission to AndroidManifest.xml file.

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

Add following code in activity_main.xml file. Here I have added a horizontal progress bar with a
webview.

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.myudaipurcity.MainActivity">
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="5dp"
android:progressDrawable="@drawable/bg_progress_bar_webview" />

<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/progressBar"
/>
</RelativeLayout>

http://www.thecrazyprogrammer.com/2017/08/convert-website-android-app.html 2/5
8/18/2017 How to Convert Website to Android App Using Android Studio - The Crazy Programmer

Create an xml file inside drawable folder and add following code in it. It is a custom background
for progress bar. You can change the color by changing color code in res/values/color.xml file.

bg_progress_bar_webview.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item
android:id="@android:id/background"
android:drawable="@color/colorAccent"/>
<item android:id="@android:id/secondaryProgress">
<scale
android:drawable="@color/colorPrimary"
android:scaleWidth="100%" />
</item>

<item android:id="@android:id/progress">
<scale
android:drawable="@color/colorPrimary"
android:scaleWidth="100%" />
</item>

</layer-list>

Add following code in MainActivity.java file. The code is self explanatory, I have added
comments where ever required.

package com.thecrazyprogrammer;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
public class MainActivity extends Activity {
WebView webView;
ProgressBar progressBar;
String URL = "http://www.thecrazyprogrammer.com/";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

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

webView = (WebView)findViewById(R.id.webView);

webView.getSettings().setJavaScriptEnabled(true);
//loading progressbar
webView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress)
{
progressBar.setProgress(progress);
if (progress == 100) {
progressBar.setVisibility(View.GONE);

} else {
http://www.thecrazyprogrammer.com/2017/08/convert-website-android-app.html 3/5
8/18/2017 How to Convert Website to Android App Using Android Studio - The Crazy Programmer

} else {
progressBar.setVisibility(View.VISIBLE);
}
}
});
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
{
view.loadUrl(url);
return true;
}
});

webView.loadUrl(URL);
}

//enabling back button to go to previous page

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (event.getAction() == KeyEvent.ACTION_DOWN) {
switch (keyCode) {
case KeyEvent.KEYCODE_BACK:
if (webView.canGoBack()) {
webView.goBack();
} else {
finish();
}
return true;
}
}
return super.onKeyDown(keyCode, event);
}
}

Finally save and run the project. Below is a screenshot how the app will look like.

http://www.thecrazyprogrammer.com/2017/08/convert-website-android-app.html 4/5
8/18/2017 How to Convert Website to Android App Using Android Studio - The Crazy Programmer

Comment below if you have queries related to above tutorial for how to convert website to android
application.

You May Also Like:

Android AdMob Tutorial

Android Hello World Example – Build First Android App
Android Google Maps API Tutorial – Getting Started
Android JSON Parsing From URL Example
Android Google Analytics Integration Tutorial

h +1 1 s Tweet j Share
1 f Share b Pin q o
Stumble 2
SHARES

Category: Android Tutorial

http://www.thecrazyprogrammer.com/2017/08/convert-website-android-app.html 5/5