How To Fit Content Of Gif Animation In View And In Live Wallpaper?

Background I have a small live wallpaper app, that I want to add support for it to show GIF animations. For this, I've found various solutions. There is the solution of showing a G

Solution 1:

If you have Glide in your project, You can easily load Gifs, as it provides drawing GIFs to your ImageViews and does support many scaling options (like center or a given width and ...).

Glide.with(context)
    .load(imageUrl or resourceId)
    .asGif()
    .fitCenter() //or other scaling options as you like.into(imageView);

Solution 2:

OK I think I got how to scale the content. Not sure though why the app still crashes upon orientation change sometimes, and why the app doesn't show the preview right away sometimes.

Project is available here.

For center-inside, the code is:

privatefundraw() {
        if (!isVisible)
            returnval canvas = holder!!.lockCanvas() ?: return
        canvas.save()
        //center-insideval scale = Math.min(canvas.width.toFloat() / movie.width().toFloat(), canvas.height.toFloat() / movie.height().toFloat());
        val x = (canvas.width.toFloat() / 2f) - (movie.width().toFloat() / 2f) * scale;
        val y = (canvas.height.toFloat() / 2f) - (movie.height().toFloat() / 2f) * scale;
        canvas.translate(x, y)
        canvas.scale(scale, scale)
        movie.draw(canvas, 0f, 0f)
        canvas.restore()
        holder!!.unlockCanvasAndPost(canvas)
        movie.setTime((System.currentTimeMillis() % movie.duration()).toInt())
        handler.removeCallbacks(drawGIF)
        handler.postDelayed(drawGIF, frameDuration.toLong())
    }

For center-crop, the code is:

privatefundraw() {
        if (!isVisible)
            returnval canvas = holder!!.lockCanvas() ?: return
        canvas.save()
        //center cropval scale = Math.max(canvas.width.toFloat() / movie.width().toFloat(), canvas.height.toFloat() / movie.height().toFloat());
        val x = (canvas.width.toFloat() / 2f) - (movie.width().toFloat() / 2f) * scale;
        val y = (canvas.height.toFloat() / 2f) - (movie.height().toFloat() / 2f) * scale;
        canvas.translate(x, y)
        canvas.scale(scale, scale)
        movie.draw(canvas, 0f, 0f)
        canvas.restore()
        holder!!.unlockCanvasAndPost(canvas)
        movie.setTime((System.currentTimeMillis() % movie.duration()).toInt())
        handler.removeCallbacks(drawGIF)
        handler.postDelayed(drawGIF, frameDuration.toLong())
    }

for fit-center, I can use this:

valcanvasWidth= canvas.width.toFloat()
                    valcanvasHeight= canvas.height.toFloat()
                    valbitmapWidth= curBitmap.width.toFloat()
                    valbitmapHeight= curBitmap.height.toFloat()
                    valscaleX= canvasWidth / bitmapWidth
                    valscaleY= canvasHeight / bitmapHeightscale=if (scaleX * curBitmap.height > canvas.height) scaleY elsescaleXx= (canvasWidth / 2f) - (bitmapWidth / 2f) * scaley= (canvasHeight / 2f) - (bitmapHeight / 2f) * scale
                    ...

Solution 3:

Change the width and the height of the movie:

Add this code in onDraw method before movie.draw

canvas.scale((float)this.getWidth() / (float)movie.width(),(float)this.getHeight() /      (float)movie.height());

or

canvas.scale(1.9f, 1.21f); //this changes according to screen size

Scale to fill and scale to fit:

There's already a good answer on that:

https://stackoverflow.com/a/38898699/5675325