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)


Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

A Flash Light App in Sketchware

In Sketchware: How to create a calculator for any simple formula?

Firebase auth in Sketchware for Login Activity

Simple car racing android game in Sketchware