Set Animated .Gif as Background Android

Set Animated .GIF As Background Android

As Martin says, Android does not support GIFs. As a workaround, Android offers Animation List/AnimationDrawable. You will need to convert the GIF into individual frames [.png files]. I use GIMP for the conversion

This GIF can be broken down into its frames:

Save them as frame01.png, frame02.png, and so on, and create an animation-list XML file, say, progress_animation.xml

<animation-list android:id="@+id/selected" android:oneshot="false">
<item android:drawable="@drawable/frame01" android:duration="50" />
<item android:drawable="@drawable/frame02" android:duration="50" />
<item android:drawable="@drawable/frame03" android:duration="50" />
....
<item android:drawable="@drawable/frameN" android:duration="50" />

To begin the animation, you need to cast the image to an AnimationDrawable, and call start() on it

AnimationDrawable progressAnimation = (AnimationDrawable) yourImageView.getBackground();
progressAnimation.start();

Is it possible to set an animated gif file as live wallpaper in android?

This is the basic wallpaper service (as supplied in the Live Wallpaper Tutorial) hacked to display an animated gif.

First - create a project & set up your manifest as a Live wallpaper.

Then - download a gif, like this one

   

Save that gif in res/raw/nyan.gif in your project.

Create a live wallpaper service, like shown in this example.

public class NyanNyanService extends WallpaperService {
    static final String TAG = "NYAN";
    static final Handler mNyanHandler = new Handler();

    /**
     * @see android.service.wallpaper.WallpaperService#onCreate()
     */
    @Override
    public void onCreate() {
        super.onCreate();
    }

    /**
     * @see android.service.wallpaper.WallpaperService#onCreateEngine()
     */
    @Override
    public Engine onCreateEngine() {
        try {
            return new NyanEngine();
        } catch (IOException e) {
            Log.w(TAG, "Error creating NyanEngine", e);
            stopSelf();
            return null;
        }
    }

    class NyanEngine extends Engine {
        private final Movie mNyan;
        private final int mNyanDuration;
        private final Runnable mNyanNyan;
        float mScaleX;
        float mScaleY;
        int mWhen;
        long mStart;

        NyanEngine() throws IOException {
            InputStream is = getResources().openRawResource(R.raw.nyan);
            if (is != null) {
                try {
                    mNyan = Movie.decodeStream(is);
                    mNyanDuration = mNyan.duration();
                } finally {
                    is.close();
                }
            } else {
                throw new IOException("Unable to open R.raw.nyan");
            }

            mWhen = -1;
            mNyanNyan = new Runnable() {
                public void run() {
                    nyan();
                }
            };
        }

        @Override
        public void onDestroy() {
            super.onDestroy();
            mNyanHandler.removeCallbacks(mNyanNyan);
        }

        @Override
        public void onVisibilityChanged(boolean visible) {
            super.onVisibilityChanged(visible);
            if (visible) {
                nyan();
            } else {
                mNyanHandler.removeCallbacks(mNyanNyan);
            }
        }

        @Override
        public void onSurfaceChanged(SurfaceHolder holder, int format, int width, int height) {
            super.onSurfaceChanged(holder, format, width, height);
            mScaleX = width / (1f * mNyan.width());
            mScaleY = height / (1f * mNyan.height());
            nyan();
        }

        @Override
        public void onOffsetsChanged(float xOffset, float yOffset, float xOffsetStep,
                float yOffsetStep, int xPixelOffset, int yPixelOffset) {
            super.onOffsetsChanged(xOffset, yOffset, xOffsetStep, yOffsetStep, xPixelOffset, yPixelOffset);
            nyan();
        }

        void nyan() {
            tick();
            SurfaceHolder surfaceHolder = getSurfaceHolder();
            Canvas canvas = null;
            try {
                canvas = surfaceHolder.lockCanvas();
                if (canvas != null) {
                    nyanNyan(canvas);
                }
            } finally {
                if (canvas != null) {
                    surfaceHolder.unlockCanvasAndPost(canvas);
                }
            }
            mNyanHandler.removeCallbacks(mNyanNyan);
            if (isVisible()) {
                mNyanHandler.postDelayed(mNyanNyan, 1000L/25L);
            }
        }

        void tick() {
            if (mWhen == -1L) {
                mWhen = 0;
                mStart = SystemClock.uptimeMillis();
            } else {
                long mDiff = SystemClock.uptimeMillis() - mStart;
                mWhen = (int) (mDiff % mNyanDuration);
            }
        }

        void nyanNyan(Canvas canvas) {
            canvas.save();
            canvas.scale(mScaleX, mScaleY);
            mNyan.setTime(mWhen);
            mNyan.draw(canvas, 0, 0);
            canvas.restore();
        }
    }
}

This will basically scale the nyan-nyan cat to fit the screen and animate it perpetually.

A Live wallpaper manifest looks sort-of-like this (this example does not contain a configuration activity):

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="your.nyan.nyan.package"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk android:minSdkVersion="10" />
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/application_nyan" > 
        <service 
            android:label="@string/wallpaper_nyan"
            android:name=".NyanNyanService"
            android:permission="android.permission.BIND_WALLPAPER">
            <intent-filter>
                <action android:name="android.service.wallpaper.WallpaperService" />
            </intent-filter>
            <meta-data android:name="android.service.wallpaper" android:resource="@xml/nyan" />
        </service>
    </application>
</manifest>

The AndroidManifest.xml has a reference to a file in res/xml, in this case named "nyan.xml":

<?xml version="1.0" encoding="utf-8"?>
<wallpaper xmlns:android="http://schemas.android.com/apk/res/android" />

Android how to set background of relative layout as gif with glide

Try to use Glide's GlideDrawableImageViewTarget.

It'll look something like this:

ImageView ivImg = findViewById(R.id.imageView); 
GlideDrawableImageViewTarget ivTarget = new GlideDrawableImageViewTarget(ivImg);
Glide.with(this)
    .load(R.drawable.giphy) // The image you want to load
    .crossFade()
    .placeholder(R.raw.sample_gif) // The placeholder GIF.
    .into(ivTarget);

EDIT: Ok, I've misread your question and saw that you want to set the RelativeLayout background. My first thought is... you can't set an animated GIF as the background, since the Drawable represents a "still image". You can check this question for more information on that matter. You can also check this related issue on Glide's issue tracker for more info.

---

Second edit: One possible way of solving your problem is to combine the code above, with the layout below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <!-- Use this ImageView to load your background image-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/gray"/>

    <!-- Place the rest of your UI elements here, on this inner RelativeLayout. Like the sample below -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin">

        <TextView
            android:id="@+id/tv_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="My sample text"
            android:textColor="#ffffff"
            android:layout_centerHorizontal="true" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Click me!"
            android:layout_below="@+id/tv_text"
            android:layout_centerHorizontal="true" />

    </RelativeLayout>
</RelativeLayout>

Your screen will look something like this:

Set GIF on Background of button

I have implemented this in my application a day ago.Although this tutorial is >about ImageView you can easily convert the code to your advantage.

First of all, it depends on your desire.

1: Repeatedly continue to play the Gif (It is easy)

2: Play only once similar to Facebook app "Like" button (Some work is required)

---

Include this library to your gradle.build

compile 'pl.droidsonroids.gif:android-gif-drawable:1.2.8'

---

GifImageView gifImageView;

GifDrawable gifDrawable;

---

Define this variable:

gifImageView = findViewById(R.id.splashGif);

<pl.droidsonroids.gif.GifImageView        android:id="@+id/splashGif"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:background="#FFFDFF"        />

Display Animated GIF

Android actually can decode and display animated GIFs, using android.graphics.Movie class.

This is not too much documented, but is in SDK Reference. Moreover, it is used in Samples in ApiDemos in BitmapDecode example with some animated flag.

---

Related Topics