Next Previous with Android Listview and JSON data

Question

I want to develop an MCQ app with PHP rest API. How to show Questions in ListView one by one with Next and Previous button click.

My JSON data is as follows which retrieved by PHP API from my live server

[{
    "id": 1,
    "title": "Apple MacBook ",
    "shortdesc": "13.3 inch, Silver",
    "rating": 4.7,
    "price": 56990,
    "image": "https:\/\/www.laptopmag.com\/images\/uploads\/4427\/g\/apple-macbook-air-13inch-w-g03.jpg",
    "mid": 1
}, {
    "id": 2,
    "title": "Dell Inspiron",
    "shortdesc": "14 inch, Gray",
    "rating": 4.3,
    "price": 60990,
    "image": "https:\/\/www.laptopmag.com\/images\/uploads\/4442\/g\/dell-inspiron-15-7000-w-g02.jpg",
    "mid": 1
}, {
    "id": 3,
    "title": "Microsoft Surface ",
    "shortdesc": "12.3 inch, Silver",
    "rating": 4.2,
    "price": 54999,
    "image": "https:\/\/images-na.ssl-images-amazon.com\/images\/I\/41JOpEMJsDL.jpg",
    "mid": 1
}, {
    "id": 5,
    "title": "Computer Two",
    "shortdesc": "This is second computer",
    "rating": 5,
    "price": 34000,
    "image": "image 2",
    "mid": 1
}]

My Java Method, which is called on button click for first time only.

 private void getQuestions (final String subject_id) { 
    String tag_string_req = "req_login";
    StringRequest strReq = new StringRequest(Request.Method.POST,
            AppConfig.URL_GET_ALL_PRODUCTS_API, new Response.Listener<String>() {
        @Override
        public void onResponse(String response) {
          try {
              JSONArray array = new JSONArray(response);

                for (int i = 0; i < array.length(); i++) {
                    JSONObject Obj = array.getJSONObject(i);
                    Questions questions = new Questions(Obj.getString("title"), Obj.getString("shortdesc"));
                    QuestionsList.add(questions);
                }

                ListViewAdapter adapter = new ListViewAdapter(QuestionsList,ShowSubjects.this);
                //adapter.refreshQuestionsList(QuestionsList);
                listView.setAdapter(adapter);


            } catch (JSONException e) {
                // JSON error
                e.printStackTrace();
                Toast.makeText(getApplicationContext(), "Json error: " + e.getMessage(), Toast.LENGTH_LONG).show();
            }

        }
    }, new Response.ErrorListener() {

        @Override
        public void onErrorResponse(VolleyError error) {
            Log.e(TAG, "Login Error: " + error.getMessage());
            Toast.makeText(getApplicationContext(),
                    error.getMessage(), Toast.LENGTH_LONG).show();
            // hideDialog();
        }
    }) {

        @Override
        protected Map<String, String> getParams() {
            // Posting parameters to login url
            Map<String, String> params = new HashMap<String, String>();
            params.put("proID", subject_id);

            return params;
        }

    };
    // Adding request to request queue
    AppController.getInstance().addToRequestQueue(strReq, tag_string_req);
}

My Design

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ShowSubjects">

    <EditText
        android:id="@+id/editText"
        android:layout_width="116dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.152"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="155dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="Get Questions"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ListView
        android:id="@+id/productList"
        android:layout_width="0dp"
        android:layout_height="329dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="76dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:visibility="gone"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="17dp"
        android:layout_marginBottom="38dp"
        android:text="Next"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/btnPrev"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="38dp"
        android:text="Prev"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

This is my ListViewAdaptor

public class ListViewAdapter extends ArrayAdapter<Questions> {

    //the Questions list that will be displayed
    private List<Questions> QuestionsList;

    //the context object
    private Context mCtx;

    //here we are getting the Questionslist and context
    //so while creating the object of this adapter class we need to give Questionslist and context
    public ListViewAdapter(List<Questions> QuestionsList, Context mCtx) {
        super(mCtx, R.layout.list_items, QuestionsList);
        this.QuestionsList = QuestionsList;
        this.mCtx = mCtx;
    }


    //this method will return the list item
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //getting the layoutinflater
        LayoutInflater inflater = LayoutInflater.from(mCtx);

        //creating a view with our xml layout
        View listViewItem = inflater.inflate(R.layout.list_items, null, true);

        //getting text views
        TextView textViewName = listViewItem.findViewById(R.id.textViewName);
        TextView textViewImageUrl = listViewItem.findViewById(R.id.textViewImageUrl);

        //Getting the Questions for the specified position
        Questions Quest = QuestionsList.get(position);

        //setting Questions values to textviews
        textViewName.setText(Quest.getQuestion());
        textViewImageUrl.setText(Quest.getOption1());

        //returning the listitem
        return listViewItem;
    }

    public void refreshQuestionsList(List<Questions> QuestionsList) {
        this.QuestionsList.clear();
        this.QuestionsList.addAll(QuestionsList);
        notifyDataSetChanged();
    }
}

How to show data on next and previous button.

Answer 1

I can not write the code. I can give a suggestion how to implement it because I have some experience working with the same kind of project.

1. Parse the data in a List
2. Create a ListActivity and a DetailActivity
3. When an item is clicked open DetailActivity and show the Current item.

How to show data in DetailActivity?

You can start DetailActivity by passing an object of the list item using intent.
A much simpler approach would be if you make the List static so that it can be accessed with all the activity. In this approach, you will just have to pass the index value of the item(int) when you start the detail Activity.

Advantage of this approach

1. It will come handy when moving to next and previous item from Detail Activity you could have a method which shows Item in the detail Activity.
2. You will not have to implement your Model class with Parceable or Serilizable interface.

How to navigate to previous and next item in DetailActivity?

Create a method to show the current question.

displayQuestion(int index);

When next button is clicked, do

displayQuestion(index++);

and for previous

dispalyQuestion(index--);

You can look at this project . You may find some relevant information