Display video thumbnails in firebase chat

To upload and display video thumbnail in a firebase based chat in Sketchware, follow the steps given below.

1. On the chat page add a file picker to pick files (mime type */*).

2. Add an ImageView imageview1 for picking files.

3. In imageview1 onClick event use file picker to pick files.

4. Create a String variable path.

5. In file picker onFilesPicked event, set String path to the path of the file selected.

6. In the event of button1 onClick (send button), if String path is not empty, upload the file to Firebase storage.

7. Add a String variable thumb_String.

8. In the event Firebase storage onUpload success, if the file selected is a video, create thumbnail from the path, convert it to base64 String, and send the url of the video (using key "attachment") and the thumbnail in String form (using key "thumbnail")
 to firebaseDb.
The code used here is:
Bitmap bitmap =ThumbnailUtils.createVideoThumbnail(path, android.provider.MediaStore.Video.Thumbnails.FULL_SCREEN_KIND);

java.io.ByteArrayOutputStream stream = new java.io.ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);

byte[] byteArray = stream.toByteArray();

thumb_String = android.util.Base64.encodeToString(byteArray, android.util.Base64.DEFAULT);

9. In the event onChildAdded, get the data to a List Map map1, and set it as CustomView data for ListView.

10. In the CustomView of the ListView, add an ImageView thumbs.

11. In onBindCustomView, if the List Map map1 contains key 'attachment', and the value of key 'attachment' contains .mp4 or .3gp,
then if the List Map contains key 'thumbnail', get the thumbnail and display it in ImageView 'thumbs' using following code.
byte[] imageBytes = android.util.Base64.decode(
map1.get(_position).get("thumbnail").toString(), android.util.Base64.DEFAULT);

Bitmap decodedImage = BitmapFactory.decodeByteArray(imageBytes, 0, imageBytes.length);


Else if the key 'thumbnail' is not there, display a custom image as image of ImageView thumbs. See image below.

Add onClick block for ImageView thumbs. Here use Intent to move to activity containing VideoView. See image below.

12. Save and run the project.


  1. Thank you Mr Sanjeev Kumar.Your my number 1 sketchware mentor(guider)

  2. Please make tutorials with sketchware Revolution. It has a lot of new widgets, events, components. Also it supports making custom blocks with sk block manager ! These items help everyone & save us from using source code.

    1. Sketchware Revolution : https://drive.google.com/file/d/1-5L-fliJEPB3P2JhrOXPvG5XE9WTY95j/view

    2. sk block manager :
    3. Sketchware Gold :

  3. Not work bhai 😢😢😢 invalid character

  4. Dear Mr San Sanjeev Kumar sir
    Can u show me add source directly from send button ?
    I did what you say but one error it only
    Help me sir 😥😥😥


Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

A Flash Light App in Sketchware

Admob rewarded video Ads in Sketchware

Simple car racing android game in Sketchware

Firebase auth in Sketchware for Login Activity