(Android) ListView: Load 5 items at a time, when scroll down

Question

So I made an sliding tabs app that loads json into a listview. My question is how would I implement something that would only load 5 listview items in the beginning and would load another 5 when you scroll down? (Instead of loading all of the listview items in the beginning)

I have search the web and I can't really understand how to do this. Any suggestions or ideas will be appreciated.

This is some of my code. These classes is where I think the code would go: I used SlidingTabLayout & strip from the android developer site.

CustomListAdapter code:

public class CustomListAdapter extends BaseAdapter {
private Activity activity;
private LayoutInflater inflater;
private List<Tanga> tangasItems;
ImageLoader imageLoader = AppController.getInstance().getImageLoader();

public CustomListAdapter(Activity activity, List<Tanga> movieItems) {
    this.activity = activity;
    this.tangasItems = movieItems;
}

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

@Override
public Object getItem(int location) {
    return tangasItems.get(location);
}

@Override
public long getItemId(int position) {
    return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    if (inflater == null)
        inflater = (LayoutInflater) activity
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    if (convertView == null)
        convertView = inflater.inflate(R.layout.list_row, null);

    TextView name = (TextView) convertView.findViewById(R.id.name);

    // getting movie data for the row
    Tanga m = tangasItems.get(position);

    // title
    name.setText(m.getName());

    return convertView;
}

}

Fragment:

public class Tab1 extends Fragment {
private static final String url = "website.json";
private List<Tanga> tangaList = new ArrayList<Tanga>();
private ListView listView;
private CustomListAdapter adapter;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

public void onActivityCreated (Bundle savedInstanceState){
    super.onActivityCreated(savedInstanceState);

    listView = (ListView) getView().findViewById(R.id.list);
    adapter = new CustomListAdapter(getActivity(), tangaList);
    listView.setAdapter(adapter);
    JsonArrayRequest movieReq = new JsonArrayRequest(url,
            new Response.Listener<JSONArray>() {
                @Override
                public void onResponse(JSONArray response) {
                    // Parsing json
                    for (int i = 0; i < response.length(); i++) {
                        try {

                            JSONObject obj = response.getJSONObject(i);
                            Tanga movie = new Tanga();

                            //name
                            String name = obj.getString("name");
                            movie.setName(name);


                            // adding movie to movies array
                            tangaList.add(movie);

                        } catch (JSONException e) {
                            e.printStackTrace();
                        }
                    }

                    // notifying list adapter about data changes
                    // so that it renders the list view with updated data
                    adapter.notifyDataSetChanged();
                }
            }, new Response.ErrorListener() {
        @Override
        public void onErrorResponse(VolleyError error) {
            VolleyLog.d("Error: ");

        }
    });

    // Adding request to request queue
    AppController.getInstance().addToRequestQueue(movieReq);

}


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

    return v;
}
}

Tanga Code: (model)

public class Tanga {
private String name;

public Tanga() {
}

public Tanga(String name) {
    this.name = name;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

}

Answer 1

There are multiple ways you could handle this, the simplest way would be to create another ArrayList of type Tanga , let's suppose it's name is tangaList2 . What you have to do is in your for loop write this code.

public void onResponse(JSONArray response) {
                // Parsing json
                for (int i = 0; i < response.length(); i++) {
                    try {

                        JSONObject obj = response.getJSONObject(i);
                        Tanga movie = new Tanga();

                        //name
                        String name = obj.getString("name");
                        movie.setName(name);


                        // adding movie to movies array
                        if(i < 5) {
                        tangaList.add(movie);
                        }
                        else { 
                        tangaList2.add(movie);
                        }
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                }

                // notifying list adapter about data changes
                // so that it renders the list view with updated data
                adapter.notifyDataSetChanged();
            }

Now after this you should also implement the onScrollListener in your Fragment:

     listView.setOnScrollListener(new AbsListView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {

        }

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if ((++firstVisibleItem) + visibleItemCount > totalItemCount)     {
        for(int i = 0; i < 5  && tangaList2.size() > 0; i++){
         tangaList.add(tangaList2.get(0));
         tangaList2.remove(0);
        }
        }
        }
    });