Vimeo Video Thumbnail in an ImageView

Question

I am developing an Android app which should display a list of video thumbnails in RecyclerView. A new activity will then play the video for selected thumbnail. How do I set com.vimeo.networking.model.Picture to Android ImageView?

My code:

mVimeoClient.fetchNetworkContent(VIDEO_URI, new ModelCallback<VideoList>(VideoList.class) {
           @Override
           public void success(VideoList videoList) {
                ArrayList<Video> videoArrayList = videoList.data;
               Video video = videoArrayList.get(0);
               ArrayList<com.vimeo.networking.model.Picture> arrayListPics = video.pictures.sizes;
               // imageView.setImageDrawable((Drawable) pictureAL.get(0));
               imageView.setImageBitmap( (Bitmap) arrayListPics.get(0));
           }
           @Override
           public void failure(VimeoError error) {
           }
        });
}

The setImageBitmap() And setImageDrawable() throws

java.lang.ClassCastException

@NileshRathod Hi, sorry for the typo. it is com.vimeo.networking.model.Picture — Sandeep Yohans, Jul 04 '18 at 12:12
What is this line doing? ArrayList arrayListPics = video.pictures.sizes; — Ejaz Ahmad, Jul 04 '18 at 12:16
@EjazAhmad Hi, video.pictures.sizes returns a ArrayList of com.vimeo.networking.model.Picture of all sizes. — Sandeep Yohans, Jul 04 '18 at 12:22

score 3 · Answer 1 · answered Jul 05 '18 at 14:59

The Picture object (the one returned from arrayListPics.get(0)) in the vimeo-networking library isn't a Bitmap and therefore can't be cast to one. The Picture object has a field on it called mLink which can be access via Picture#getLink(). This will return a URI string which you then can set on your ImageView.

The simplest code you could use to get this working is:

    // The ImageView you want to put the thumbnail in
    ImageView yourImageView = <insert your ImageView here>;
    // The video whose thumbnail you want
    Video yourVideo = <insert your Video here>;
    // The collection of `Picture` objects associated with this video.
    // Each `Picture` in this "collection" is a different size
    PictureCollection yourVideosPictures = yourVideo.getPictures();
    // Get the first thumbnail/picture from this collection (not recommended)
    Picture videoThumbnailPicture = yourVideosPictures.getPictures().get(0);
    // The URI to the image of the thumbnail
    String videoThumbnailUri = videoThumbnailPicture.getLink();
    // Convert the String URI to an actual URI object
    final Uri uri = Uri.parse(videoThumbnailUri);
    yourImageView.setImageURI(uri);

I say this is the simplest because there are more things you should do when setting an image uri. One thing is you should base the Picture your grab from yourVideosPictures based on the width of your ImageView so that you're not needlessly pulling down a larger image than you need.

You should also probably not just set the image URI directly onto yourImageView, but instead you should use some image caching library (or some caching implementation).

I'd suggest looking into Picasso, Glide, or Fresco. Or just google "Image caching on Android".

score 2 · Answer 2 · answered Jul 06 '18 at 12:53

Here's a solution using Glide 4.x.

First of all, import the lib on your project:

implementation 'com.github.bumptech.glide:glide:4.6.1'

Since the Pictures class contains an Uri as the others stated, you can use Glide to download the image for you effortlessly as follows.

// Get your ImageView
ImageView iv = findViewById(R.id.your_image_view);
// Get your thumbnails
ArrayList<com.vimeo.networking.model.Picture> arrayListPics = video.pictures.sizes;
// Load them using Glide
Glide.with(this) // Assuming "this" is your Activity, but you can also use any context here
        .load(arrayListPics.get(0).getLink())
        .into(iv);

That way it won't matter where is the thumbnail located (Network, file, resources), Glide will load it for you.

You can also apply some transformations or use placeholders by using Glide's RequestOptions class. Read more on how to use it here.

score 1 · Answer 3 · answered Jul 04 '18 at 12:14

Please user Picasso library to load image in Image-view.

In gradle

implementation 'com.squareup.picasso:picasso:2.71828'

in your adapter class

mVimeoClient.fetchNetworkContent(VIDEO_URI, new ModelCallback<VideoList>(VideoList.class) {
           @Override
           public void success(VideoList videoList) {
                ArrayList<Video> videoArrayList = videoList.data;
               Video video = videoArrayList.get(0);
               ArrayList<Pictures> arrayListPics = video.pictures.sizes;


Picasso.get().load(arrayListPics.get(0).getpath).into(view);
           }
           @Override
           public void failure(VimeoError error) {
           }
        });
}

The problem isn't the image caching library, it's the way JoeYo is trying to get the path to the image. — Kyle Venn, Jul 10 '18 at 14:47

Vimeo Video Thumbnail in an ImageView

3 Answers3