Create list of YouTube videos with thumbnails and titles

To display a list of YouTube Videos on a page, we can follow the steps given below.

1. In VIEW area of main.xml add a ListView listview1.

2. Create a Custom View custom.xml. Here add an ImageView imageview1 and TextView textview1.

3. For listview1 select custom.xml as CustomView.

4. Add a RequestNetwork component rn.

Also add an Intent component i.

5. Create a String List idlist, a Map List videoList, a Number variable n, and a Map variable map.

6. In onCreate event:
a. Add id of YouTube videos to idlist.

Note that in video URL  
the video id is dPHreMHHoGY.

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

c. Inside repeat block, use RequestNetwork method GET for url
and get at n of idlist
* See image above.

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

7. Add RequestNetwork onResponse method. Here, Get the response to map variable. Add the map to videoList and display videoList in ListView listview1.

8. Create a new page video.xml. Here add a WebView webview1.

9. Add ListView onBindCustomView event.
Here display thumbnail in imageview1 using key 'thumbnail_url' of videoList, and display title in textview1 using key 'title' of videoList.

Add imageview1 onClick Block. Here use intent to move to VideoActivity. Save value of key 'html' of videoList to Intent put extra using key 'video'.

10. In onCreate, of use WebView loadUrl block.

a.Create a String variable iframe.

b. Set iframe to Activity get extra key 'video' with replace all width="480" with width=100%.
Then replace all height="270" with height=100%.
Make sure of no extra spaces in between.

c. WebView webview1 loadUrl join data:text/html, and iframe.

d. Then use an add source directly block and put following code.
webview1.setWebChromeClient(new CustomWebClient());
This is required for enabling fullscreen mode for the video.

11. Create a More Block extra and in that put following code in an add source directly block.
}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 (VideoActivity.this == null) {
return null; }
return BitmapFactory.decodeResource(VideoActivity.this.getApplicationContext().getResources(), 2130837573); }

public void onShowCustomView(View paramView, WebChromeClient.CustomViewCallback viewCallback) {
if (this.mCustomView != null) {
return; }
this.mCustomView = paramView;
this.mOriginalSystemUiVisibility = VideoActivity.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)VideoActivity.this.getWindow().getDecorView()).addView(this.mCustomView, new FrameLayout.LayoutParams(-1, -1)); VideoActivity.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;


12. Save and run the project.

The response we get by using RequestNetwork GET method on url for a video in above format is a json String whose value is like:
{"provider_url":"https:\/\/\/","thumbnail_url":"https:\/\/\/vi\/9mrPHO-nkVE\/hqdefault.jpg","type":"video","height":270,"thumbnail_height":360,"width":480,"provider_name":"YouTube","version":"1.0","html":"\u003ciframe width=\"480\" height=\"270\" src=\"https:\/\/\/embed\/9mrPHO-nkVE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen\u003e\u003c\/iframe\u003e","author_name":"Channel 4 News","title":"Coronavirus \u2018worse than a bomb\u2019 on Italy, says doctor coordinating response","author_url":"https:\/\/\/user\/Channel4News","thumbnail_width":480}


  1. Thank you very much sir.
    आपने मेरा काम आसान कर दिया।
    बहुत बहुत शुक्रिया 😊🤝

    U are a true friend.

  2. Sir,
    Please make a tutorial for e-commerce app, programming for seller,buyer,cart and order

    1. My dear brother, can you be your WhatsApp number?

    2. My whatsapp no. +918434023633
      I also want to learn to develop e-commerce app.

  3. Sir plzz video Bnao ham is app me apne Thumbnail kaise use karen plzz

  4. If you want to get streams of the most varied types, then you need to take a look at the Kodi Addons. With this Kodi plugin, it is possible to watch TV shows, cartoons, sports and even music.

  5. Nice content you can see the content. Today we will know How To Learn app programming. And how to become an app programmer will be discussed in detail, let's get started.

  6. The GX series LED display board for advertisement provides the best cost performance and maintains high-quality requirements. Its cabinet size drawings aid in minimizing the amount of processing and hardware components in each cabinet, lowering manufacturing costs. led display manufacturer


Post a Comment

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