YouTube Videos List in Sketchware

Improved app on this topic

To display a list of YouTube Videos on a page, we can create multiple WebViews programmatically and add them to a Linear vertical in a ScrollView. Follow the steps given below.

1. In VIEW area of main.xml add a ScrollView with padding 0. Inside ScrollView add a LinearV linear1.

2. Add a Map List urlList, and a Number variable n.

3. Add a RequestNetwork component rn.
This will add INTERNET permissions in AndroidManifest.xml.

4. In onCreate event:
a. Add items to the list with key 'url'.

Here add the videos in html iframe codes.
<iframe width=100% height=100% src="" frameborder="0" allowfullscreen>

Note that video URL should be as shown above: VIDEO ID)

b. Then use a repeat block. Repeat for length of List urlList.

c. Inside repeat block, use an add source directly block and put following codes.
// Create a WebView programmatically.
WebView webView = new WebView(MainActivity.this);
// Create new LayoutParams, set it's margins and set it as LayoutParams of WebView.
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, (int)getDip(200));
lp.setMargins(0, 16, 0, 16);

// For WebView enable JavaScript and add WebViewClient and WebChromeClient.
webView.setWebViewClient(new WebViewClient());

webView.setWebChromeClient(new CustomWebClient());
// In WebView load url by getting data from urlList, and add WebView to linear1.
webView.loadUrl("data:text/html, " + urlList.get((int)n).get("url").toString());


d. After this, inside repeat block, use Number variable n increase 1.

5. Create a more block extra.

6. In the more block extra, use an add source directly blocks and put codes to define a new WebChromeClient class with name CustomWebClient. This will enable fullscreen mode for the YouTube videos.

public class CustomWebClient extends WebChromeClient {
private View mCustomView;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
protected FrameLayout frame;

// Initially mOriginalOrientation is set to Landscape
private int mOriginalOrientation =;
private int mOriginalSystemUiVisibility;

// Constructor for CustomWebClient
public CustomWebClient() {}

public Bitmap getDefaultVideoPoster() {
if (MainActivity.this == null) {
return null; }
return BitmapFactory.decodeResource(MainActivity.this.getApplicationContext().getResources(), 2130837573); }

public void onShowCustomView(View paramView, WebChromeClient.CustomViewCallback viewCallback) {
if (this.mCustomView != null) {
return; }
this.mCustomView = paramView;
this.mOriginalSystemUiVisibility = MainActivity.this.getWindow().getDecorView().getSystemUiVisibility();
// When CustomView is shown screen orientation changes to mOriginalOrientation (Landscape).
// After that mOriginalOrientation is set to portrait.
this.mOriginalOrientation =;
this.mCustomViewCallback = viewCallback; ((FrameLayout)MainActivity.this.getWindow().getDecorView()).addView(this.mCustomView, new FrameLayout.LayoutParams(-1, -1)); MainActivity.this.getWindow().getDecorView().setSystemUiVisibility(3846);

public void onHideCustomView() {
this.mCustomView = null;
// When CustomView is hidden, screen orientation is set to mOriginalOrientation (portrait).
// After that mOriginalOrientation is set to landscape.
this.mOriginalOrientation =; this.mCustomViewCallback.onCustomViewHidden();
this.mCustomViewCallback = null;


7. Save and run the project.


Popular posts from this blog

Simple car racing android game in Sketchware

Enable Fullscreen for Youtube videos in WebView

Creating a Drawing View in Sketchware

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware