How to add a Progress in XWalkView

Question

I use XWalkView to load webpage, like this:

<org.xwalk.core.XWalkView android:id="@+id/webview"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
</org.xwalk.core.XWalkView>

Activity

XWalkView mXWalkView = (XWalkView) findViewById(R.id.webview);
mXWalkView.load("http://xxxxxxxx", null);

for detail about implementing XWalkView refer to my this post.

But now, for the page have too many content, it will call 4~5 seconds to finshing loading. This will results the app page with blank. I want to add the loading progress for XWalkView. For XWalkView has very little demo, I really didn't know where to start.

Any help will be appreciated. Thansk!

Edited: After I try according @Srihari's answer, another weired issue come out. THe progress shows well, and when it finished 100%, it disappeard. But it jump out with 100% again, very soon after page finish loading, and never gone.

the activity:

class ResourceClient extends XWalkResourceClient {
    public ResourceClient(XWalkView xwalkView) {
        super(xwalkView);
    }

    public void onLoadStarted(XWalkView view, String url) {
        mProgress = (ProgressBar) findViewById(R.id.progressBar);
        mProgress.setVisibility(View.VISIBLE);
        super.onLoadStarted(view, url);
        Log.d("INFO", "Load Started:" + url);
    }

    public void onLoadFinished(XWalkView view, String url) {
        super.onLoadFinished(view, url);
        Log.d("INFO", "Load Finished:" + url);
        bottomBar = (BottomBar) findViewById(R.id.bottomBar);
        mProgress = (ProgressBar) findViewById(R.id.progressBar);
        mProgress.setVisibility(View.GONE);
    }

    public void onProgressChanged(XWalkView view, int progressInPercent) {
        super.onProgressChanged(view, progressInPercent);
        Log.d("INFO", "Loading Progress:" + progressInPercent);
        mProgress = (ProgressBar) findViewById(R.id.progressBar);
        mProgress.setProgress(progressInPercent);
    }

the xml

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_marginTop="50dp" />

Answer 1

before i fix my problem i go to make umrah in makkah i try 2 day to fix problem after umrah i take 2 minute and fix my problem my god is help me

pls Do not remove this talk all we have from god

you need to Prayer to God and will you get all what you want

this my MainActivity

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.View;
import android.webkit.ValueCallback;
import android.widget.FrameLayout;
import android.widget.ProgressBar;

import org.xwalk.core.XWalkPreferences;
import org.xwalk.core.XWalkResourceClient;
import org.xwalk.core.XWalkUIClient;
import org.xwalk.core.XWalkView;

import static com.github.crazyorr.embeddedcrosswalk.R.string.url;
public class MainActivity extends AppCompatActivity {

    private XWalkView mXWalkView;
    private FrameLayout frameLayout;
    private SwipeRefreshLayout swipe;
    private ProgressBar progressBar;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        frameLayout = (FrameLayout) findViewById(R.id.framelayout);
        progressBar = (ProgressBar) findViewById(R.id.ProgressBar);
        swipe= (SwipeRefreshLayout) findViewById(R.id.swipe);
        swipe.setColorSchemeResources(R.color.orange, R.color.green, R.color.blue, R.color.purple);
        swipe.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {

                @Override
                public void onRefresh() 
                {mXWalkView.reload(url);}
        });

            loadweb();
        }


      public void loadweb(){

        mXWalkView = (XWalkView) findViewById(R.id.webview);
        mXWalkView.setResourceClient(new ResourceClient(mXWalkView));
          mXWalkView.setUIClient(new XWalkUIClient(mXWalkView) {
              @Override
              public void onPageLoadStarted(XWalkView view, String url) {
                  frameLayout.setVisibility(View.VISIBLE);
                  progressBar.setVisibility(ProgressBar.VISIBLE);
              }

              @Override
              public void onPageLoadStopped(XWalkView view, String url, XWalkUIClient.LoadStatus status) {
                  progressBar.setVisibility(view.GONE);
                  swipe.setRefreshing(false);
              }
          });
        XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);
        mXWalkView.getSettings().setJavaScriptEnabled(true);
        mXWalkView.loadUrl("https://www.google.com.sa");
      }


      class ResourceClient extends XWalkResourceClient {

        public ResourceClient(XWalkView xwalkView) {
            super(xwalkView);
        }

         public void onProgressChanged(XWalkView view, int progressInPercent){

             frameLayout.setVisibility(View.VISIBLE);
             progressBar.setProgress(progressInPercent);


             if (progressInPercent == 100){
                 frameLayout.setVisibility(View.GONE);
             }
             super.onProgressChanged(view, progressInPercent);



         }


      }





      @Override
      public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
      }

      @Override
      public void onBackPressed() {
        mXWalkView.evaluateJavascript("onBackPressed()", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(final String value) {
                if (!Boolean.valueOf(value)) {
                    MainActivity.super.onBackPressed();
                }

            }
        });
      }
    }

i hop this help you

Answer 2

Show progress bar onCreate of that activity or fragment.

xWalkView.setResourceClient(new XWalkResourceClient(xWalkView){
    @Override
    public void onLoadFinished(XWalkView view, String url) {
        super.onLoadFinished(view, url);
        // Stop your progress bar here
    }
});

Hope this may help you..

Answer 3

I found the weired behivour in my question is caused by the dynamic content in my page. For there are is stlloader with my page, so I implement xwalkview load progress and the stlloader load progress.

Xwalkview load progress:

class ResourceClient extends XWalkResourceClient {
    public ResourceClient(XWalkView xwalkView) {
        super(xwalkView);
    }

    public void onLoadStarted(XWalkView view, String url) {
        mProgress = (ProgressBar) findViewById(R.id.progressBar);
        mProgress.setVisibility(View.VISIBLE);
        super.onLoadStarted(view, url);
        Log.d("INFO", "Load Started:" + url);
    }

    public void onLoadFinished(XWalkView view, String url) {
        super.onLoadFinished(view, url);
        Log.d("INFO", "Load Finished:" + url);
        bottomBar = (BottomBar) findViewById(R.id.bottomBar);
        mProgress = (ProgressBar) findViewById(R.id.progressBar);
        mProgress.setVisibility(View.GONE);
    }

    public void onProgressChanged(XWalkView view, int progressInPercent) {
        super.onProgressChanged(view, progressInPercent);
        Log.d("INFO", "Loading Progress:" + progressInPercent);
        mProgress = (ProgressBar) findViewById(R.id.progressBar);
        mProgress.setProgress(progressInPercent);
    }

the stlloader load progress:

      var loader = new THREE.STLLoader(manager);
      loader.load( "{{ $modelfilepath }}", function ( geometry ) {
          var meshMaterial = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
          if (geometry.hasColors) {
              meshMaterial = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors });
          }
          centerOffset = geometry.center();
          var mesh = new THREE.Mesh( geometry, meshMaterial );
          tV.z = (-geometry.boundingBox.min.z + geometry.boundingBox.max.z)/2;
          mesh.matrix.elements[14] = tV.z;
          mesh.castShadow = true;
          mesh.receiveShadow = true;
          mesh.matrixAutoUpdate = false;

          boundBox.setFromObject(mesh);
          if(!isFillin(boundBox.min, boundBox.max, machineLength))
          {
              mesh.material.color.setHex(0xff0000);
          }

          stlMesh = mesh;
          scene.add( mesh );
          objects.push(mesh);
          showPosition(0, 0, tV.z);
      }, function(progressItem) {
          $('#loaderstatus').html("Loading... " + (Math.round(progressItem.loaded / progressItem.total *100)) + "%");
      }, function(){

      });

Answer 4

I fixed my problem, which was in activity_main:

<org.xwalk.core.XWalkView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <FrameLayout
            android:id="@+id/framelayout"
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:background="@android:color/transparent"
            android:visibility="visible"></FrameLayout>

        <ProgressBar
            android:id="@+id/ProgressBar"
            style="@android:style/Widget.DeviceDefault.Light.ProgressBar.Large"
            android:layout_width="match_parent"
            android:layout_height="4dp"
            android:layout_gravity="top"
            android:layout_marginTop="3dp"
            android:background="@android:color/transparent"
            android:progress="10"
            android:progressDrawable="@drawable/custom_progress" />
    </org.xwalk.core.XWalkView>