Home App Building Tutorials Learn How You Can Convert Website To Android App Using Android Studio

Learn How You Can Convert Website To Android App Using Android Studio

713
0
SHARE

Learn How You Can Convert Website To Android App Using Android Studio

Today, I will Tell You How To convert Website to the Android app using the Android Studio. You can also convert any website into the Android application by following this method. Therefore, you need an android studio to make the Android mobile application. We will use Webview method in our java main activity to view the web into the android application. You can Also Watch My YouTube Video How To Convert Any Website Using Android Studio

Convert Website In-App Using Android Studio

First of all, You need an android studio to make the application. If you don’t have the android studio, So please download and install on your computer. Open your android studio and click on the new project.

Click on Next button and select the empty activity. Now, Your empty project is open in the android studio.

Step: 1  AndroidManifest.xml

Now, you will see the Manifest folder at the top of the left side in the android studio.  Open App> manifests >androidmanifest.xml. There you need put the following codes, copy and paste

1. <uses-permission android:name="android.permission.INTERNET" /> 
                      above the application directory code
                      
               2.        android:debuggable="true"

Seems like given screenshot

 

Step: 2    activity_main.xml in the android studio:

The second step is to change activity_ main.xml file code. Therefore, we need to all code of this file. Delete all of this code and paste a new code given below.

 

activity_main.xml code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
 tools:context="">

<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/webView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:visibility="gone"
/>

<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_centerInParent="true"
/>
</RelativeLayout>

after pasting new code, please put there your own java main activity for directory path

the path wouldbe same as your package name you can find your package in androidmanifest on the start copy that package name and in the end of the package name write .MainActivity after writing .MainActivity a popup will appear just select that

Now it will look like this

tools:context=”pk.a63news.a63news.MainActivity”>

Step: 3  MainActivity.java  in Android Studio

Finally, this our last step to complete our android mobile app project. So, please change all MainActivity.java else your package name. Copy and paste this code in MainActivity.java below your package. The new code is given

MainActivity.java : 

import android.content.Intent;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.graphics.Bitmap;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    String ShowOrHideWebViewInitialUse = "show";
    private WebView webview ;
    private ProgressBar spinner;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webview =(WebView)findViewById(R.id.webView);
        spinner = (ProgressBar)findViewById(R.id.progressBar1);
        webview.setWebViewClient(new CustomWebViewClient());

        webview.getSettings().setJavaScriptEnabled(true);
        webview.getSettings().setDomStorageEnabled(true);
        webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
        webview.loadUrl("https://63news.pk");

    }

    // This allows for a splash screen
    // (and hide elements once the page loads)
    private class CustomWebViewClient extends WebViewClient {

        @Override
        public void onPageStarted(WebView webview, String url, Bitmap favicon) {

            // only make it invisible the FIRST time the app is run
            if (ShowOrHideWebViewInitialUse.equals("show")) {
                webview.setVisibility(webview.INVISIBLE);
            }
        }

        @Override
        public void onPageFinished(WebView view, String url) {

            ShowOrHideWebViewInitialUse = "hide";
            spinner.setVisibility(View.GONE);

            view.setVisibility(webview.VISIBLE);
            super.onPageFinished(view, url);

        }
    }

    @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);
    }
}

and dont forget to replace our website address with your own

webview.loadUrl(“https://63news.pk”);

in my case on line no.33

Seems like

Step.4 Select a App icon

To Select Your App icon

Goto App> res> mipmap right click on mipmap a option menu will popup select new> image Asset

To Select Your App icon in Android Studio
To Select Your App icon in Android Studio

Select your logo from image path resize and adjust it and then click on Next >

see screenshot

Select your logo for app
Select your logo for app

on next page do nothing just click on fininsh

logo is selected

Congratulation Your App is Created

So, Friends our project how to convert web into android mobile application using Android Studio is completed. Therefore, go to the build option in the android studio and build your app APK and install it on your mobile to test it. because some time app does not work properly on android emulator due to the google respiratory.

How to Build Apk
How to Build Apk

if you like our Tutorial Please share it With your friends and dont forget to subscribe our Youtube Channel

LEAVE A REPLY

Please enter your comment!
Please enter your name here