How to make Progress Bar Spinner while fragment load its images (with Glide)?

Question

I'm using ViewPager in my app, it's contains 7 fragments. Each fragment contains many images. I want to display loading spinner while the fragment load the images with Glide (The images are not from the internet! there is no need in downloading). It's take about half a second to load the images and it seems there is a lag. So I want to know how to display the Spinner Progress Bar.

MainActivity.java :

  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);
    if (isRTL())
        viewPager.setCurrentItem(7);

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
        tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
    }
    tabLayout.setupWithViewPager(viewPager);
}

 public static boolean isRTL() {
    return isRTL(Locale.getDefault());
}

public static boolean isRTL(Locale locale) {
    final int directionality = Character.getDirectionality(locale.getDisplayName().charAt(0));
    return directionality == Character.DIRECTIONALITY_RIGHT_TO_LEFT ||
            directionality == Character.DIRECTIONALITY_RIGHT_TO_LEFT_ARABIC;
}

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

    if (isRTL()) {
        // The view has RTL layout
        adapter.addFragment(new S7(), getString(R.string.stage7));
        adapter.addFragment(new S6(), getString(R.string.stage6));
        adapter.addFragment(new S5(), getString(R.string.stage5));
        adapter.addFragment(new S4(), getString(R.string.stage4));
        adapter.addFragment(new S3(), getString(R.string.stage3));
        adapter.addFragment(new S2(), getString(R.string.stage2));
        adapter.addFragment(new S1(), getString(R.string.stage1));
        adapter.addFragment(new Intro(), getString(R.string.Introduction));
    } else {
        // The view has LTR layout
        adapter.addFragment(new Intro(), getString(R.string.Introduction));
        adapter.addFragment(new S1(), getString(R.string.stage1));
        adapter.addFragment(new S2(), getString(R.string.stage2));
        adapter.addFragment(new S3(), getString(R.string.stage3));
        adapter.addFragment(new S4(), getString(R.string.stage4));
        adapter.addFragment(new S5(), getString(R.string.stage5));
        adapter.addFragment(new S6(), getString(R.string.stage6));
        adapter.addFragment(new S7(), getString(R.string.stage7));
    }
    viewPager.setAdapter(adapter);
}

class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}

Fragment:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.bumptech.glide.Glide;


public class Intro extends Fragment {

public Intro() {
    // Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, final ViewGroup container,
                         Bundle savedInstanceState) {

     View rootView = inflater.inflate(R.layout.fragment_intro, container, false);

     ImageView image1 = (ImageView)rootView.findViewById(R.id.imageView_S0P1);
     ImageView image2 = (ImageView)rootView.findViewById(R.id.imageView_S0P2);
     ImageView image3 = (ImageView)rootView.findViewById(R.id.imageView_S0P3);
     ImageView image4 = (ImageView)rootView.findViewById(R.id.imageView_S0P4);
     ImageView image5 = (ImageView)rootView.findViewById(R.id.imageView_S0P5);
     ImageView image6 = (ImageView)rootView.findViewById(R.id.imageView_S0P6);
     ImageView image7 = (ImageView)rootView.findViewById(R.id.imageView_S0P7);
     ImageView image8 = (ImageView)rootView.findViewById(R.id.imageView_S0P8);
     ImageView image9 = (ImageView)rootView.findViewById(R.id.imageView_S0P9);
     ImageView image10 = (ImageView)rootView.findViewById(R.id.imageView_S0P10);
     ImageView image11 = (ImageView)rootView.findViewById(R.id.imageView_S0P11);
     ImageView image12 = (ImageView)rootView.findViewById(R.id.imageView_S0P12);
     ImageView image13 = (ImageView)rootView.findViewById(R.id.imageView_S0P13);


    if (image1.getDrawable()==null) {
        Glide.with(rootView.getContext()).load(R.drawable.s0p1).asBitmap().into(image1);
        Glide.with(rootView.getContext()).load(R.drawable.s0p2).asBitmap().into(image2);
        Glide.with(rootView.getContext()).load(R.drawable.s0p3).asBitmap().into(image3);
        Glide.with(rootView.getContext()).load(R.drawable.s0p4).asBitmap().into(image4);
        Glide.with(rootView.getContext()).load(R.drawable.s0p5).asBitmap().into(image5);
        Glide.with(rootView.getContext()).load(R.drawable.s0p6).asBitmap().into(image6);
        Glide.with(rootView.getContext()).load(R.drawable.s0p7).asBitmap().into(image7);
        Glide.with(rootView.getContext()).load(R.drawable.s0p8).asBitmap().into(image8);
        Glide.with(rootView.getContext()).load(R.drawable.s0p9).asBitmap().into(image9);
        Glide.with(rootView.getContext()).load(R.drawable.s0p10).asBitmap().into(image10);
        Glide.with(rootView.getContext()).load(R.drawable.s0p11).asBitmap().into(image11);
        Glide.with(rootView.getContext()).load(R.drawable.s0p12).asBitmap().into(image12);
        Glide.with(rootView.getContext()).load(R.drawable.s0p13).asBitmap().into(image13);
    }

                // Inflate the layout for this fragment
        return rootView;
 }
}

Fragment.xml :

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="appinventor.ai_itiel_maimon.Rubiks_cube.Intro">

 <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:paddingBottom="@dimen/banner_ad_height"
     android:orientation="vertical">

     <ProgressBar
         android:id="@+id/progress_bar"
         android:layout_width="40dp"
         android:layout_height="40dp"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P1"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P2"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P3"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P4"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P5"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P6"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P7"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P8"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P9"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P10"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P11"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P12"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P13"
         android:contentDescription="@string/image_description"/>

 </LinearLayout>

</ScrollView>

Where do i put the ProgressBar and how?

Thank you very much!!!

http://stackoverflow.com/a/32883051/5148289 check my answer here.. i have used `picasso` but it still can be done by `Glide` — V-rund Puro-hit, Jun 10 '16 at 12:42

score 1 · Answer 1 · answered Jun 10 '16 at 12:45

1

try this,

You XML Layout.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">


    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerInParent="true" />
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageview"
        android:scaleType="centerCrop"
        />
</RelativeLayout>

And Using Glide.

Glide.with(mActivity).load("Your Image Path").asBitmap().listener(new RequestListener<String, GlideDrawable>() {
            @Override
            public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                return false;
            }

            @Override
            public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                progress_bar.setVisibility(View.GONE);

                return false;
            }
        }).into(imageView);

answered Jun 10 '16 at 12:45

Pradeep Gupta

1,770
1
9
23

But I have more than one image so where am I should put it? – Itiel Maimon Jun 10 '16 at 13:12
And I can't initialize the ProgressBar – Itiel Maimon Jun 10 '16 at 13:21
can you share your XML layout.so that i can get some idea – Pradeep Gupta Jun 10 '16 at 13:58
OK I just did @Pradeep Gupta – Itiel Maimon Jun 10 '16 at 16:19
instead of using number of images in XMl why don't you try with listview in XML? – Pradeep Gupta Jun 13 '16 at 05:30
Because it's very simple that way. Why should I use listview? – Itiel Maimon Jun 13 '16 at 07:17
you have multiple same view in which you have to show images only.Instead of using multiple ImageView and take the ID's of each ImgaView it is better to take Listview . And you can properly show the Progress bar for Image before Loading. – Pradeep Gupta Jun 13 '16 at 07:22
take a look on this you will get idea http://theopentutorials.com/tutorials/android/listview/android-custom-listview-with-image-and-text-using-arrayadapter/ – Pradeep Gupta Jun 13 '16 at 08:17
I prefer to use the multiple imageViews instead of listView. How I can make the spinner with my code? – Itiel Maimon Jun 13 '16 at 08:21
use the above layout for custom Adapter. – Pradeep Gupta Jun 13 '16 at 08:38
@ItielMaimon Actually the right solution is using gridview or listview and use your custom adapter. But if you want to do your way, you should use multiple progress bar associated to every image for indicating that all image has been loaded or no. – ikhsanudinhakim Jun 15 '16 at 07:29
@ikhsan But how do I associate the Progress Bar to the images? Can you wirte the code please? – Itiel Maimon Jun 15 '16 at 16:22
@ItielMaimon i just show the code. Not good solution but it may match your problem. – ikhsanudinhakim Jun 16 '16 at 02:54

score 1 · Accepted Answer · answered Jun 16 '16 at 02:52

This is just trivial solution. You can associate your image with progress bar like this (wrapped by RelativeLayot).

    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="appinventor.ai_itiel_maimon.Rubiks_cube.Intro">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="@dimen/banner_ad_height"
            android:orientation="vertical">
            <!-- IMAGE 1 -->
            <RelativeLayout
                android:layout_width="match_parent"                                  
                android:layout_height="wrap_content">
                <ProgressBar
                     android:id="@+id/pb1"
                     android:layout_width="40dp"
                     android:layout_height="40dp"
                     android:layout_centerInParent="true" />
                <ImageView
                     android:id="@+id/imageView_S0P1"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:adjustViewBounds="true" 
                     android:layout_centerInParent="true"  
                     android:scaleType="centerCrop" />
             </RelativeLayout>

            <!-- IMAGE 2 -->
            <RelativeLayout
                android:layout_width="match_parent"                                  
                android:layout_height="wrap_content">
                <ProgressBar
                     android:id="@+id/pb2"
                     android:layout_width="40dp"
                     android:layout_height="40dp"
                     android:layout_centerInParent="true" />
                <ImageView
                     android:id="@+id/imageView_S0P2"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:adjustViewBounds="true" 
                     android:layout_centerInParent="true"   
                     android:scaleType="centerCrop" />
             </RelativeLayout>

             ......... and so on .....

        </LinearLayout>
    </ScrollView>

And it would be helpful to create helper class with static method look like this. This helps you when you have a changes on Glide cofiguration.

public class ImageLoader{

   public static showImage(ImageView imageView, ProgressBar progressBar){
         Glide.with(mActivity).load(imagePath).asBitmap().listener(new RequestListener<String, GlideDrawable>() {

             @Override
             public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                //handle error
                return false;
             } 

             @Override
             public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                 progressBar.setVisibility(View.GONE);
               return false;
             }
         }).into(imageView);
     }
}

And call that method on your activity to show each image.

ImageView image1 = (ImageView)rootView.findViewById(R.id.imageView_S0P1);
ProgressBar pb1 = (ProgressBar)rootView.findViewById(R.id.pb1);

ImageLoader.showImage(image1, pb1);
ImageLoader.showImage(image2, pb2);
... and so on....

Thank you!! but I want to display only one Progress Bar not for each image, so how can I do it?. — Itiel Maimon, Jun 17 '16 at 13:33

How to make Progress Bar Spinner while fragment load its images (with Glide)?

2 Answers2