How to fetch website content and put it in the way we want into the android app layout?

Question

Its weird kind of question being asked from me, but curiosity is the best teacher and I eagerly wants to know and develop such kind of android app.

My background in the android app development is not that great but right now I am using WebView for an website which is responsive its working well but its taking too much time to load and not providing that much convenience to the user. Here's the code that I have:

MainActivity

package com.testWebview.deep;

import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    private WebView webview;
    private ProgressDialog progress;

    public void runTask(){
        ConnectivityManager connec = (ConnectivityManager)getSystemService(Context.CONNECTIVITY_SERVICE);
        if(connec!=null && (connec.getNetworkInfo(ConnectivityManager.TYPE_WIFI).getState() == NetworkInfo.State.CONNECTED) || (connec.getNetworkInfo(ConnectivityManager.TYPE_MOBILE).getState() == NetworkInfo.State.CONNECTED)){
            webview = (WebView)findViewById(R.id.MainWebView);
            WebSettings webSettings = webview.getSettings();
            webSettings.setJavaScriptEnabled(true);
            webSettings.setLoadsImagesAutomatically(true);
            webSettings.setLoadWithOverviewMode(true);
            webSettings.setDomStorageEnabled(true);
            webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
            webSettings.setAllowFileAccess(true);
            webSettings.setBuiltInZoomControls(true);
            webSettings.setUseWideViewPort(true);
            loadingC();
            webview.setWebViewClient(new WebViewClient(){

                @Override
                public void onPageStarted(WebView view, String url,Bitmap favicon){
                    if(!progress.isShowing()){
                        loadingC();
                    }

                }
                @Override
                public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                    if(progress.isShowing()){progress.dismiss();}
                    checkConnection();
                    webview.loadUrl("file:///android_asset/error.html");
                }

                @Override
                public void onPageFinished(WebView view, String url) {
                    if(progress.isShowing()) {
                        progress.dismiss();
                    }
                }
            });
            webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
            webview.setScrollbarFadingEnabled(false);
            webview.setLayerType(View.LAYER_TYPE_HARDWARE, null);
            webview.loadUrl("http://www.bharatcoupons.com/");
        }
        else{
            checkConnection();
        }
    }

    public void checkConnection(){
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("Error");
        builder.setMessage("Please make sure your connected to internet!");
        builder.setCancelable(false);
        builder.setPositiveButton("retry", new DialogInterface.OnClickListener() {

            public void onClick(DialogInterface dialog, int which) {
                runTask();
            }

        });
        builder.show();
    }

    public void loadingC(){
        progress = ProgressDialog.show(this, "Loading", "Please wait for a moment...");
    }

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

    @Override
    public void onBackPressed(){
        if(webview.canGoBack()){
            webview.goBack();
        }else{
            super.onBackPressed();
        }
    }

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

    private class MyAppWebViewClient extends WebViewClient{

    }
}

MyAppWebViewClient

package com.testWebview.deep;

import android.content.Intent;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.net.Uri;

public class MyAppWebViewClient extends WebViewClient{

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url){
        if(Uri.parse(url).getHost().endsWith("bharatcoupons.com")){
            return false;
        }
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        view.getContext().startActivity(intent);
        return true;
    }

}

The above code working fine with webview but its kind of slow and not professional way of developing an android app. Now what I want to do is fetch the website content and put it into the app frame that I want. I will show you an example that will elaborate you all that I wanted to do.

Suppose my website is like this :

What kind of approach should I follow or methods, tricks to make my app like this:

As per my knowledge its not an webview showing directly the website content into the app. On swapping left or right it will show you the next item. The whole website into this app but not using WebView

They have made such framework that is fetching the content from website and putting it into the app. and I want to do that.

I don't want code but from where should I start, What kind of approach or technique should I use to achieve that.

The reference website and app I am taking for educational purpose only no other intention behind it

Thanks in advance!

Answer 1

Approach 1:

Use a responsive website that will automatically fit the mobile/tab screen.

Approach 2:

Parse the web documents like images and text then show it in ImageView or other UI contents.

For HTML parsing you can use a 3rd party library like JSOUP

Best Approach:

Now a days almost all companies/online services use an API for communication between the web and other platforms. It keeps all data aligned and flexible since all information are coming from a same source. Create a RESTful API for your web service. Make call to the API and fetch data in a JSON format. Later parse the info and show it it in a view.

e.g. to get the infromation of a specific product,

http://your_address/shopping/v1/get_product_info

The result in JSON format could be something like this,

{
    "error": false,
    "name": "ETC Solid Men's Polo Neck -Tshirt",
    "description": "Your pruduct description",
    "images": [
        {
            "preview1": "http://yoururl.com/images/preview1"
        },
        {
            "preview2": "http://yoururl.com/images/preview2"
        },
        {
            "preview3": "http://yoururl.com/images/preview3"
        },
        {
            "preview4": "http://yoururl.com/images/preview4"
        }
    ]
}