How to display multiple number of TextViews inside each row in ListView?

Question

I am creating a Help page in which I have a set of questions and answers. These questions and answers have different styles. Here is the xml file, which describes the layout of a question & answer set:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:layout_gravity="center">
    <TextView
            android:text="@string/Help_first_question"
            android:id="@+id/text1"
            android:padding="5dip"
            android:background="#e0f3ff"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
    <LinearLayout
            android:id="@+id/panel1"
            android:visibility="gone"
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
        <TextView
                android:layout_margin="2dip"
                android:text="@string/Help_first_answer"
                android:padding="5dip"
                android:background="#FFFFFF"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"/>
    </LinearLayout>
</LinearLayout>

I want to display multiple questions and answers within a listView, whereby each row contains a set of the question and the answer. My listview looks like :

    <ListView xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/listview"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" >  
    </ListView>

so it will look like :

first row  :  Q
              A
second row :  Q
              A
third row  :  Q
              A 

What is the best approach for achieving this?

Solution 1

create custom adapter and use the below layout to achieve your goal

<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView" />

</LinearLayout>

Solution 2

You need to implement a custom ListAdapter implementing all of the abstract methods.

Let's create a QuestionAndAnswerListAdapter, which you can make your ListView by setting it up in onCreate:

public void onCreate(Bundle savedInstanceState) {
    super(savedInstanceState);
    setContentView(R.layout.listview);

    QuestionsAndAnswersListAdapter adapter = new QuestionsAndAnswersListAdapter(data);

    ListView listView = (ListView) findViewById(R.id.listview);
    listView.setAdapter(adapter);
}

The adapter itself would look something like this:

public QuestionsAndAnswersListAdapter implements ListAdapter {
    private QuestionAndAnswer[] data;

    public QuestionsAndAnswersListAdapter(QuestionAndAnswer[] data) {
        this.data = data;
    }

    public View getView(int position, View view, ViewGroup parent) {
        if(view == null) {
            //Only creates new view when recycling isn't possible
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.question_and_answer_list_item, null);
        }

        QuestionAndAnswer thisQA = data[position];

        TextView questionView = (TextView) view.findViewById(R.id.text1);
        questionView.setText(thisQA.question);

        TextView answerView = (TextView) view.findViewById(R.id.answer);
        answerView.setText(thisQA.answer);

        return view;
    }

    // ...
}

getView is really the central method to get right. The rest of the methods you need to implement to live up to the ListAdapter interface are pretty straight-forward. Check the reference to see exactly what they are.