user5626329
user5626329

Reputation:

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

To test, I downloaded the following image and put my drawable folder and I could see this as ImageView in the center of my activity when I use glide.

enter image description here

But when I try to setBackground, either it becomes static image or gives errors

  setContentView(R.layout.activity_main);
    ImageView ivImg = new ImageView(this);//to hold 

         RelativeLayout r = (RelativeLayout) findViewById(R.id.middleRlayout);//the layout of activityt

            ivImg = (ImageView) findViewById(R.id.middle);//middle is id of img


            Glide.with(this)
                    .load(R.drawable.giphy)
                    .asGif()
                    .crossFade()
                    .placeholder(R.drawable.giphy);

            if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) {
                //noinspection deprecation
                r.setBackgroundDrawable(R.drawable.giphy);
            } else {
                r.setBackground(ivImg);
            }

I edited my code for Mauker's answer:

        RelativeLayout r = (RelativeLayout) findViewById(R.id.middler);
        ImageView ivImg = new ImageView(this);
        ivImg = (ImageView) findViewById(R.id.middle);
        GlideDrawableImageViewTarget imageViewTarget = new       GlideDrawableImageViewTarget(ivImg);
        Glide.with(this)
                .load(R.drawable.giphy)
                .crossFade()
                .placeholder(R.drawable.giphy)
                .into(imageViewTarget);

        if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) {
            //noinspection deprecation
            r.setBackgroundDrawable(R.drawable.giphy);
        } else {
            r.setBackground(imageViewTarget);
        }

my load and placeholder is same? and setbackground doesnot accept as paramter.

Upvotes: 1

Views: 2980

Answers (1)

Mauker
Mauker

Reputation: 11497

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:

enter image description here

Upvotes: 1

Related Questions