How to fetch images on ViewPager from server

Question

I want to implement one app for image showing where images will come from server side and there will be maximum 4 images suppose that there are only one or two image on server then the pager will shown extra page or slider like this image.

public class BlankActivity extends FragmentActivity implements View.OnClickListener{ 
public static final String KEY_PIC = "pic";
public static final String KEY_PIC1 = "pic1";
public static final String KEY_PIC2 = "pic2";
public static final String KEY_PIC3 = "pic3";
public static final String JSON_ARRAY = "result";
String url1="https://www.maangal.com/photos/large_";
public String pic0="";
public String pic1="";
public String pic2="";
public String pic3="";
public String p0="";
public String p1="";
public String p2="";
public String p3="";
private ArrayList<String> ImagesArray = new ArrayList<>();
CustomTextView context; 

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_blank);
    mPager = (ViewPager) findViewById(R.id.pager);  
    getData();

for slider call init function.

  private void init( String p0,String p1,String p2,String p3) {
        this.p0 = p0;
        this.p1 = p1;
        this.p2 = p2;
        this.p3 = p3;

    String[] IMAGES={p0,p1,p2,p3};
    for(int i=0;i<IMAGES.length;i++) {
        ImagesArray.add(IMAGES[i]);
        if (p0.equalsIgnoreCase("https://www.maangal.com/photos/large_"))
        {        Log.e("pic**********", url1 + IMAGES[i]);
            mPager.setVisibility(View.GONE);

    }
        else  Log.e("pic_______________", url1 + IMAGES[i]);

    }
    mPager = (ViewPager) findViewById(R.id.pager);
    mPager.setAdapter(new SlidingImage_Adapter(BlankActivity.this,ImagesArray));
    CirclePageIndicator indicator = (CirclePageIndicator) findViewById(R.id.indicator);
    indicator.setViewPager(mPager);
    final float density = getResources().getDisplayMetrics().density;
    //Set circle indicator radius
    indicator.setRadius(5 * density);
    NUM_PAGES = IMAGES.length;

    indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageSelected(int position) {
            currentPage = position;
        }
        @Override
        public void onPageScrolled(int pos, float arg1, int arg2) {
        }
        @Override
        public void onPageScrollStateChanged(int pos) {
        }
    });
}

getData function where I used Volley response to fetch the images from server

 private void getData() {
    tv21.setText(getIntent().getExtras().getString("id"));
    id = tv21.getText().toString().trim();

    Bundle extras = getIntent().getExtras();
    if (extras != null) {
        id = extras.getString("ID");
        strGender = extras.getString("gender");
    } else {
        // handle case
    }
    String detailsURL ="https://www.maangal.com/maangal_mobile/details2.php?id="+id+"&gender="+strGender+"&curr_user_id="+current_Id;
    StringRequest stringRequest = new StringRequest(Request.Method.POST,detailsURL, new Response.Listener<String>() {
        @Override
        public void onResponse(String response) {
                showJSON(response);
        }
    },
            new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    Toast.makeText(BlankActivity.this,error.getMessage().toString(),Toast.LENGTH_LONG).show();
                }
            });

    RequestQueue requestQueue = Volley.newRequestQueue(BlankActivity.this);
    requestQueue.add(stringRequest);
}

private void showJSON(String response){
try {
        JSONObject jsonObject = new JSONObject(response);
        JSONArray result = jsonObject.getJSONArray(Config.JSON_ARRAY);
        JSONObject userData = result.getJSONObject(0);

        pic0 = userData.getString(KEY_PIC);
        pic1 = userData.getString(KEY_PIC1);
        pic2 = userData.getString(KEY_PIC2);
        pic3 = userData.getString(KEY_PIC3);

        init(url1+pic0,url1+pic1,url1+pic2,url1+pic3);
 }

SlidingImage_Adapter pager adapter

public class SlidingImage_Adapter extends PagerAdapter {
private ArrayList<String> IMAGES;
private LayoutInflater layoutInflater;
private Context context;
ProgressBar progressBar;
private ImageLoader imageLoader;

SessionManager session;
public String str_gender;

public SlidingImage_Adapter(Context context, ArrayList<String> IMAGES) {
    this.context = context;
    this.IMAGES=IMAGES;
    for(int i=0;i<IMAGES.size();i++)
        layoutInflater = LayoutInflater.from(context);
}

@Override
public Object instantiateItem(ViewGroup view, int position) {
    layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View item_view = layoutInflater.inflate(R.layout.screen_slide_fragment, view, false);
    ImageView imageView = (ImageView) item_view.findViewById(R.id.image);
    progressBar=(ProgressBar)item_view.findViewById(R.id.progressBar);

    // Session class instance
    session = new SessionManager(context);
    // get user data from session
    HashMap<String, String> user = session.getUserDetails();
    str_gender = user.get(SessionManager.KEY_GENDER);

    if(str_gender.equalsIgnoreCase("Female")){
        Picasso.with(context)
            .load(IMAGES.get(position))
            .error(R.drawable.girl)
            .placeholder(R.drawable.girl)
            .fit()
            .into(imageView);
            view.addView(item_view);
    }
    else{
        Picasso.with(context)
                .load(IMAGES.get(position))
                .error(R.drawable.boy)
                .placeholder(R.drawable.boy)
                .into(imageView);
        view.addView(item_view);
    }
    return item_view;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView((View) object);
}

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


@Override
public boolean isViewFromObject(View view, Object object) {
    return view.equals(object);

}

@Override
public void restoreState(Parcelable state, ClassLoader loader) {
}

@Override
public Parcelable saveState(){
    return null;
  }
 }

There is no error. I need when there is only 1 or 2 images on server they will show on pager when I will move slider so it will not move to empty slider — Vikas Godiyal, Sep 27 '17 at 05:50
Please try to upload smaller images, while you are asking question. makes your question more readable — Rohit Singh, Sep 27 '17 at 05:52

Kuls · Accepted Answer · 2017-09-29T11:53:09.633

1

You need to check if other URLs are blank then you don't need to add into Array of Image. Change your code with below code and check.

 String[] IMAGES={p0,p1,p2,p3};
 for(int i=0;i<IMAGES.length;i++) {
      if(!IMAGES[i].isEmpty()) {
           ImagesArray.add(IMAGES[i]);
      }
      if (p0.equalsIgnoreCase("https://www.maangal.com/photos/large_"))
      {
            Log.e("pic**********", url1 + IMAGES[i]);
            mPager.setVisibility(View.GONE);
       }
  }

edited Sep 29 '17 at 11:53

answered Sep 27 '17 at 05:49

Kuls

2,047
21
39

In this code if p0 have no image then the pager is gone and if p0 have image then it will shown on pager but rest of 3 have blank which is not shown – Vikas Godiyal Sep 27 '17 at 05:58
Rest are blank because it does not have URL. So other will not be displayed. Now what you want to do further? – Kuls Sep 27 '17 at 06:02
I need the pager should not go to blank URLs – Vikas Godiyal Sep 27 '17 at 06:07
Slider of pages is created as per the size of Array you are passing to adapter. If you don't want to show URLs then you need to remove that slider page. Else you can show any other images over there. Can you upload adapter class as well ? – Kuls Sep 27 '17 at 06:15
There is no extra adapter I used only ImagesArray adapter – Vikas Godiyal Sep 27 '17 at 06:21
You have used SlidingImage_Adapter class in your application as you written in your code. – Kuls Sep 27 '17 at 06:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/155387/discussion-between-kulsdroid-and-vikas-godiyal). – Kuls Sep 27 '17 at 06:44
Hello @KulsDroid can you tell me how to add by default image if there is no images on server or ArrayList – Vikas Godiyal Sep 29 '17 at 06:07
Use Image rendering library to load image. You can use Glide and Picasso where you can add placeholder. If image could not be loaded then it will show placeholder image. – Kuls Sep 29 '17 at 06:09
Ya I have used Picasso but there is one problem if there is no images on server then the pager shown all page with default image – Vikas Godiyal Sep 29 '17 at 06:13

score 0 · Answer 2 · answered Sep 28 '17 at 04:41

I have done it, if there is images then the array will ImagesArray.add(url1 + IMAGES[i]); and if there is no images nothing will add on arrayList

String[] IMAGES = {p0, p1, p2, p3};
    for (int i = 0; i < IMAGES.length; i++) {
        if (IMAGES[i].equalsIgnoreCase("") || IMAGES[i].equalsIgnoreCase("nophoto.jpg") || IMAGES[i].equalsIgnoreCase("https://www.maangal.com/photos/large_")) {
            Log.e("piccc-----------", IMAGES[i]);
        } else {
            ImagesArray.add(url1 + IMAGES[i]);
            Log.e("else", url1 + IMAGES[i]);
        }
    }

How to fetch images on ViewPager from server

2 Answers2

Linked