YouTube Videos List in Sketchware

Improved app on this topic
https://www.sketchwarehelp.com/2020/03/create-list-of-youtube-videos-with.html?m=1

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.
<html>
<iframe width=100% height=100% src="https://www.youtube.com/embed/abIuko6FM3M" frameborder="0" allowfullscreen>
</iframe>
</html>

Note that video URL should be as shown above:
https://www.youtube.com/embed/( 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);
webView.setLayoutParams(lp);

// For WebView enable JavaScript and add WebViewClient and WebChromeClient.
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
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());

linear1.addView(webView);

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 = android.content.pm.ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
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) {
onHideCustomView();
return; }
this.mCustomView = paramView;
this.mOriginalSystemUiVisibility = MainActivity.this.getWindow().getDecorView().getSystemUiVisibility();
// When CustomView is shown screen orientation changes to mOriginalOrientation (Landscape).
MainActivity.this.setRequestedOrientation(this.mOriginalOrientation);
// After that mOriginalOrientation is set to portrait.
this.mOriginalOrientation = android.content.pm.ActivityInfo.SCREEN_ORIENTATION_PORTRAIT;
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() {
((FrameLayout)MainActivity.this.getWindow().getDecorView()).removeView(this.mCustomView);
this.mCustomView = null;
MainActivity.this.getWindow().getDecorView().setSystemUiVisibility(this.mOriginalSystemUiVisibility);
// When CustomView is hidden, screen orientation is set to mOriginalOrientation (portrait).
MainActivity.this.setRequestedOrientation(this.mOriginalOrientation);
// After that mOriginalOrientation is set to landscape.
this.mOriginalOrientation = android.content.pm.ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE; this.mCustomViewCallback.onCustomViewHidden();
this.mCustomViewCallback = null;
}
}

{

7. Save and run the project.

Comments

Popular posts from this blog

Create Music Player app in Sketchware

A Flash Light App in Sketchware

Admob rewarded video Ads in Sketchware

Firebase auth in Sketchware for Login Activity

Simple car racing android game in Sketchware