How To Convert A Website Into Android App Using Visual Studio

WebView Android App: Convert Website Into App Tutorial In Android Studio

Have you ever tried converting any website into Android App? If not then let me tell you it is very easy and you will need to use WebView for doing that.

You just need the follow the tutorial step by step and application will be ready to go. An element used for that is Webview, add this element to your XML(layout) file or you can also add it in java class.

Also for the good reader we have added Bonus Tip at the end of tutorial to improve look of your WebView App.

Download-Code

Application Using Webview In Android Studio
Step 1: The first step is to take a responsive website that you want to convert in android app important point to note is that it should be a responsive(mobile friendly) website. Here we are using our own Abhiandroid.com to convert into android application using WebView which is Mobile responsive site.

Step 2: Create a new project in Android Studio and name it WebViewApp.

Step 3: Open res -> layout -> activity_main.xml (or) main.xml, create the application interface and add webview element to it.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/activity_main"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context="com.example.webviewapp.MainActivity">    <WebView         android:id="@+id/webview"         android:layout_width="match_parent"         android:layout_height="match_parent" /> </RelativeLayout>

Step 4: Open src -> package -> MainActivity.java. Here firstly declare a webview variable, make JavaScript enable and load the URL of the website. See the whole code below.

Important Note: You can replace our url in below code with any other url you want to convert it into Android App.

package com.example.webviewapp;  import android.support.v7.app.AppCompatActivity; import android.os.Bundle;         import android.webkit.WebSettings;         import android.webkit.WebView;         import android.webkit.WebViewClient;  public class MainActivity extends AppCompatActivity {     private WebView mywebView;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         mywebView = (WebView) findViewById(R.id.webview);         WebSettings webSettings= mywebView.getSettings();         webSettings.setJavaScriptEnabled(true);         mywebView.loadUrl("https://abhiandroid.com/");     } }

Step 5: Open AndroidManifest.xml file and add internet permission to it just after the package name. It is required because the App will load data directly from the website.

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

Adding Internet Permission In Android Studio
Step 6: After adding the permissions the application is complete but when you run you will find that it will open the links in browser not in application itself. Solution for this is add this line of code in your MainActivity.java class.

          mywebView.setWebViewClient(new WebViewClient());

Step 7: Now to add back buttons to the application to need to add following code to your MainActivity.java class.

          public void onBackPressed() {         if(mywebView.canGoBack())         {             mywebView.goBack();         }          else{             super.onBackPressed();         }     }

Step 8: Further if you want to remove the additional padding in the app, open activity_main.xml and in the layouts remove the padding(bottom, top, right, left). Here's the final code.
activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/activity_main"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context="com.example.webviewapp.MainActivity">  // WebView Element     <WebView         android:id="@+id/webview"         android:layout_width="match_parent"         android:layout_height="match_parent" /> </RelativeLayout>

MainActivity.java complete code:

package com.example.webviewapp;  import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient;  public class MainActivity extends AppCompatActivity {     private WebView mywebView;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         mywebView = (WebView) findViewById(R.id.webview);         WebSettings webSettings= mywebView.getSettings();         webSettings.setJavaScriptEnabled(true);         mywebView.loadUrl("https://abhiandroid.com/");         // Line of Code for opening links in app         mywebView.setWebViewClient(new WebViewClient());     }      //Code For Back Button @Override     public void onBackPressed() {         if(mywebView.canGoBack())         {             mywebView.goBack();         }          else         {             super.onBackPressed();         }     } }

Bonus Tip For WebView App: In addition if you want to remove the default action bar, see in image the blue top header. You just need to make a little change in styles.xml file.
Action Bar In Android Studio
app -> res -> values -> styles.xml
Just change theme as NoActionBar. Below code will do

          <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Output:

Now run the App and you will see WebView App of AbhiAndroid website. You can simply replace the url with any website url you want to convert into Android App.