web to android app

Converting a web-based application to a mobile app can be a great way to increase user engagement and expand your audience. While there are different ways to go about it, here are some general steps to consider when converting a web application to a mobile app.

Assess your current web application:

Before starting the conversion process, take a step back and evaluate your current web application. Analyze your website’s features, layout, functionality, and user interface, and determine which of them will be applicable for the mobile app version. Consider what mobile platforms you want to target, as this can impact the development process. In our case the web application is https://portfolio-9774b.web.app/ .

Choose a development approach:

There are several approaches to convert a web application into a mobile app, including building a native app, using hybrid development, or creating a progressive web app (PWA). Each approach has its benefits and drawbacks, so it’s important to choose the one that best aligns with your business goals, budget, and timeline. Here we are using web view inside the application.

1. Web View in android application:

WebView is an Android class that allows developers to display web pages within their applications. WebView is essentially a view that is used to display web pages or web content in an Android app. It provides a platform for developers to integrate web-based content into their native apps without the need for the user to open a separate web browser.

Here are some key features of WebView in Android:

1. Rendering: WebView uses the native rendering engine of the Android device to display web content. This ensures that web pages are displayed consistently across different devices.
2. Customization: WebView provides several options for customization, including the ability to set the user agent string, enable/disable JavaScript, and add custom headers to HTTP requests.
3. Interaction: WebView supports user interaction with web content, including clicking links, entering text into forms, and submitting forms.
4. Integration: WebView can be easily integrated into an Android application, allowing developers to display web content within their app without requiring the user to switch to a web browser.

Here’s how to use WebView in an Android app:

1. Add WebView to the layout: To use WebView in an Android app, you need to add it to the layout file. You can do this by adding the following code to your layout file:

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

2. Load a web page: After adding the WebView to the layout, you can load a web page by calling the loadUrl() method on the WebView object. This method accepts a URL as a parameter and loads the web page in the WebView.

  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(myurl);//myurl="https://portfolio-9774b.web.app/"

    }

3. Customization: WebView provides several customization options, such as enabling/disabling JavaScript and setting custom headers for HTTP requests. These options can be set by calling the appropriate methods on the WebView object.

 public void tryAgain(View v){

        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(myurl);
    }

In summary, WebView is a powerful tool for developers to integrate web-based content into their native Android apps. By using WebView, developers can provide a seamless user experience and enhance the functionality of their apps.

mainactivity.java

package com.gsjacademy.webtoapp;


import android.content.DialogInterface;
import android.net.http.SslError;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.SslErrorHandler;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.graphics.Bitmap;
import android.view.View;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    String ShowOrHideWebViewInitialUse = "show";
    private WebView webview ;
    private ProgressBar spinner;
    String myurl = "https://portfolio-9774b.web.app/"; //Change this  to your website hostname

    @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(myurl);

    }


    /**
    * This allows for a splash screen
    *  Hide elements once the page loads
    * Show custom error page
    * Resolve issue with SSL certificate
    **/

    private class CustomWebViewClient extends WebViewClient {

        // Handle SSL issue
        @Override
        public void onReceivedSslError(WebView view, final SslErrorHandler handler, SslError error) {

            final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

            builder.setMessage(R.string.notification_error_ssl_cert_invalid);

            builder.setPositiveButton("continue", new DialogInterface.OnClickListener() {

                @Override
                public void onClick(DialogInterface dialog, int which) {

                    handler.proceed();
                }
            });

            builder.setNegativeButton("cancel", new DialogInterface.OnClickListener() {

                @Override
                public void onClick(DialogInterface dialog, int which) {

                    handler.cancel();
                }
            });

            final AlertDialog dialog = builder.create();

            dialog.show();
        }

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

        }

        // Show custom error page
        @Override
        public void onReceivedError(WebView view, int errorCode,
                                    String description, String failingUrl) {
            myurl = view.getUrl();
            setContentView(R.layout.error);
            super.onReceivedError(view, errorCode, description, failingUrl);
        }


    }

    @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 {

                        final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

                        builder.setMessage(R.string.exit_app);

                        builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {

                                finish();
                            }
                        });

                        builder.setNegativeButton("No", new DialogInterface.OnClickListener(){
                            @Override
                            public void onClick(DialogInterface dialog, int which) {

                                // Do nothing
                            }
                        });

                        final AlertDialog dialog = builder.create();

                        dialog.show();
                    }
                    return true;
            }

        }
        return super.onKeyDown(keyCode, event);
    }

    /* Retry Loading the page */

    public void tryAgain(View v){

        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(myurl);
    }
}

Note: Just change the url in the MainActivity.java to your website hostname then you are good to go.

Deploy and monitor: After you’ve thoroughly tested your mobile app, it’s time to deploy it to the app stores. Keep in mind that both Apple and Google have their own set of guidelines for app submission, so make sure to follow them carefully. Once your app is live, monitor it closely for user feedback, performance issues, and bugs.

In conclusion, converting a web application to a mobile app requires a thoughtful approach and careful planning. By adapting to the mobile environment, incorporating mobile features, and testing extensively, you can create a mobile app that engages users and helps your business grow.

Source Code Download

Download App from Play Store