-->

Display loading page over WebView while loading

To display a page with a text and image over the WebView while it is loading, follow the steps given below.

1. Create a new project in Sketchware.

2. In main.xml, add a LinearV linear1.
* Inside linear1 add a WebView webview1. Set height of webview1 to wrap_content.
* Below webview1 add another LinearV linear2.
* For linear1 set padding to 0.
* Inside linear2 add ImageView imageview1, and a TextView textview1.
* For linear2 set gravity to center_horizontal, center_vertical, and alpha to 0.5.
* For webview1 change height to match_parent.

3. Switch On AppCompat and Design.

4. In MainActivity.java, create a more block extra. In this more block declare a RelativeLayout rl and a SwipeRefreshLayout srl, using following codes.
}

RelativeLayout rl;
androidx.swiperefreshlayout.widget.SwipeRefreshLayout srl;

{

5. In onCreate event use following codes and blocks.
a. In an add source directly block put following codes:
rl = new RelativeLayout(this);
RelativeLayout.LayoutParams lparams = new RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
rl.setLayoutParams(lparams);

linear1.removeAllViews(); linear1.addView(rl);

srl = new androidx.swiperefreshlayout.widget.SwipeRefreshLayout(this);

rl.addView(srl);
rl.addView(linear2);

srl.addView(webview1);

srl.setOnRefreshListener( new androidx.swiperefreshlayout.widget.SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {

b. In webview1 load webview1 getURL, and make linear2 VISIBLE.

c. In an add source directly block put following codes.
}});

d. For webview1 set Cache mode to LOAD_CACHE ELSE NETWORK.

e. In webview1, load the desired url and make linear2 VISIBLE.

6. In onBackPressed event, if webview1 can go back use webview1 goBack block and make linear2 VISIBLE, else Finish Activity. See image below.

7. In webview1 onPageStarted event, make linear2 VISIBLE.

8. In webview1 onPageFinished event, make linear2 GONE, and for SwipeRefreshLayout set refreshing to false. See image below.
The code used here is
srl.setRefreshing(false);

9. Save and the project.