Search code examples
androidhorizontal-scrollinghorizontalscrollview

Dynamic horizontal scroll view in Android


I want this : I am building a few screens where I will have questions like

1.The capital of India is
a. Delhi
b. Bangalore
c. Chennai

2. Are you sure?
a. Yes
b. No

Now how I want this is in one screen I want question 1, and on swiping (horizontal scroll) I should see question 2. And the options have to be radio buttons. As a Android noob I am aware I have to use Horizontal scroll, but I may have 100 such questions in a sqlite file: how do I do this dynamically? Once I call the activity, the 100 questions have to be read from the file, and I should have 100 such scrollable screens. Help, I am not able to find much on this on the android dev site, or here.


Solution

  • As mentioned the best option is to listen to the swipe gesture and replace the data in the view. I.e you dont need to create multiple views as such for each question. Here is what i would have done: Create a view where the xml will be more or less like (please note i skipped including the mandetory attributes like layoutheight and layoutwidth, u need to use them in the xml)

    <LinearLayout
      android:orientation="vertical">
       <TextView
          android:id="+@id/questiontext"/>
       <RadioGroup
          android:id="+@/answersgroup"/>
    </LinearLayout>
    

    Now in the activity:

    1. Implement the touch listener and write code to detect the swipe. (the above answer by ali.chousein contains the perfect link to get a good reference on how to).
    2. On initial load set the first question to the view:

      QandA_CustomDataObject dataItem = questionArr.get(0);
      ((TextView)findViewById(R.id.questiontext)).setText(dataItem.question);
      int answearrsize = dataItem.answers.size();
      RadioGroup rg = ((RadioGroup)findViewById(R.id.answersgroup));
      for(int i=0;i<answearrsize;i++) //Dynamically create the radio buttons
      {
          AnswerObj ao = dataItem.get(0).answers.get(i);
          RadioButton rb = new RadioButton(this);
          rb.setText(ao.text);
          rb.setTag(ao.isCorrectAnswer); //A string saying TRUE or FALSE
          rg.addView(rb);
      }
      
    3. Now on the code part after you have performed the gesture validation for right swipe or left swipe

      //Lets say you ++ or -- a variable named currentQuestionNumber based on the swipe direction)
      QandA_CustomDataObject dataItem = questionArr.get(currentQuestionNumber);
      ((TextView)findViewById(R.id.questiontext)).setText(dataItem.question);
      int answearrsize = dataItem.answers.size();
      RadioGroup rg = ((RadioGroup)findViewById(R.id.answersgroup));
      rg.removeAllViews(); //Clears away the last questions answer options
      for(int i=0;i<answearrsize;i++) //Dynamically create the radio buttons
      {
          AnswerObj ao = dataItem.get(0).answers.get(i);
          RadioButton rb = new RadioButton(this);
          rb.setText(ao.text);
          rb.setTag(ao.isCorrectAnswer); //A string saying TRUE or FALSE
          rg.addView(rb);
      }         
      

    Now there are couple of alternative ways of doing this. Using adapters, list views etc etc. I arbitararely named all the data structure classes, but I hope you get the point.. its more of a way to handle moving from one question to another using the same Activity(Screen) that I wanted to point you out.