Android Studio Picasso gif loading image for placeholder

Question

How can I display the gif loading image in my Picasso placeholder?

i want to use gif in this part the code

imageView = (ImageView) rootView.findViewById(R.id.imageView);
Picasso.with(getActivity()).load("http://joehamirbalabadan.com/android/android/imghome/index1.png").placeholder(R.drawable.indexloading).into(imageView);
imageView3 = (ImageView) rootView.findViewById(R.id.imageView3);
Picasso.with(getActivity()).load("http://joehamirbalabadan.com/android/android/imghome/index3.png").placeholder(R.drawable.indexloading).into(imageView3);

please check and improve my code..

HomeFragment.java

package com.example.administrator.mosbeau;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ProgressBar;

import com.squareup.picasso.Picasso;

/**
 * Created by Administrator on 9/7/2015.
 */
public class HomeFragment extends Fragment {

    public static HomeFragment newInstance() {
        HomeFragment fragment = new HomeFragment();
        return fragment;
    }

    public HomeFragment () {
    }

    Boolean InternetAvailable = false;
    Seocnd detectconnection;

    ImageView imageView, imageView3;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.homelayout, container, false);

        detectconnection = new Seocnd(getActivity());
        InternetAvailable = detectconnection.InternetConnecting();
        if (InternetAvailable) {

            imageView = (ImageView) rootView.findViewById(R.id.imageView);
            Picasso.with(getActivity()).load("http://joehamirbalabadan.com/android/android/imghome/index1.png").placeholder(R.drawable.indexloading).into(imageView);

            imageView3 = (ImageView) rootView.findViewById(R.id.imageView3);
            Picasso.with(getActivity()).load("http://joehamirbalabadan.com/android/android/imghome/index3.png").placeholder(R.drawable.indexloading).into(imageView3);


        } else {
            NointernetFragment fragment = new NointernetFragment();
            FragmentManager fragmentManager = getFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.container, fragment)
                    .commit();
        }

        return rootView;
    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        ((MainActivity) activity).onSectionAttached(1);
    }

}

homelayout.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:fillViewport="false"
    android:background="#fffff1f1">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="#fffff1f1"
    android:padding="10dp">



    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@drawable/index1"
        android:layout_alignParentEnd="false"
        android:layout_alignParentStart="false"
        android:layout_alignParentTop="false"
        android:layout_alignParentLeft="false"
        android:layout_alignParentRight="false"
        android:layout_alignWithParentIfMissing="false"
        android:adjustViewBounds="true"
        android:layout_marginBottom="10dp"
        android:layout_centerHorizontal="true"
        android:background="#ffffffff" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:src="@drawable/index2"
        android:layout_below="@+id/imageView"
        android:adjustViewBounds="true"
        android:layout_marginBottom="10dp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView3"
        android:src="@drawable/index3"
        android:layout_below="@+id/imageView2"
        android:layout_alignParentBottom="true"
        android:adjustViewBounds="true"
        android:background="#ffffffff"
        android:layout_centerHorizontal="true" />

</RelativeLayout>
</ScrollView>

Answer 1

From what I know, Android doesn't have inbuilt support for GIF. So ImageView doesn't support GIF by default.

I would suggest you to use Glide library for image loading, and caching since it provides support for GIF. Glide is similar to Picasso, and is sometimes considered better than Picasso. The methods used are also similar to Picasso, except that it has a asGif() method which can load image into ImageView as GIF.

Glide.with(context)
    .load(imageUrl)
    .asGif()
    .placeholder(R.drawable.loading_gif)
    .into(imageView);

If you are so keen on using Picasso itself, then you might have to look into this stackoverflow post

Answer 2

picaso is for imageviews , you can show your GIF file in a webView , but u cant use that webview in picaso for sure.

Answer 3

I am not sure about Picasso. But ION library has inbuilt GIF support. https://github.com/koush/ion

Answer 4

I do it with Glide, you put the url with extension gif and it works

  Glide.with(getApplicationContext()).load("http://URL/estado2.gif").into(imageView);