Asynchronous image loading & GIFs

Guide for asynchronous image loading and the usage of GIFs

You may want to load images asynchronously to not block the main thread. (You must do that for GIFs) This guide will cover how to do that. We will use the image loading library Glide for that.

In the following sample we will assume that image1 a .png file is and image2 a .gif file is.

Firstly we will create our IntroductionBuilder like usually:

new IntroductionBuilder(this).withSlides(generateSlides()).introduceMyself();

private List<Slide> generateSlides() {
    List<Slide> result = new ArrayList<>();

    result.add(new Slide().withTitle("Title").withDescription("Description").
            withColorResource(R.color.green));
    result.add(new Slide().withTitle("Gif").withDescription("This is a Gif")
            .withColorResource(R.color.indigo));

    return result;
}

Notice something? We didn't add images to the Slides, as we will load them later on:

new IntroductionBuilder(this).withSlides(generateSlides())
                .withOnSlideListener(new OnSlideListener() {
                    @Override
                    protected void onSlideInit(int position, TextView title,
                                               ImageView image, TextView description) {
                        switch (position) {
                            case 0:
                                Glide.with(image.getContext()).load(R.drawable.image1).into(image);
                                break;
                            case 1:
                                Glide.with(image.getContext()).load(R.drawable.image2).into(image);
                                break;
                        }
                    }
                }).introduceMyself();

You don't need to specify that you will load a GIF. Glide will do that automatically for you. Note: At the moment only Glide supports GIF decoding, if you use an other image loading library or do that yourself, GIFs won't be recognized automatically.