How do i display a ListView with a header below another ListView all in Tab1 of TabHost?

Question

I'm trying to put a ListView below another ListView in the first tab using tabhost.

The reason i want it like this is because i want to divide a list of trading cards by type so i guess creating sections or whatever.

Here is my .xml:

<?xml version="1.0" encoding="utf-8"?>
<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" >

    <TextView
        android:id="@+id/banlistdate"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:text="Banlist Date: March, 2013"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#FFFFFF" />

    <TabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/banlistdate" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal" >

                    <ListView
                        android:id="@+id/fLV1"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:background="#FF8B53"
                        tools:listheader="@layout/banlist_header_effectmonsters" >
                    </ListView>

                    <ListView
                        android:id="@+id/fLV2"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:background="#a086b7"
                        tools:listheader="@layout/banlist_header_fusionmonsters" >
                    </ListView>
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >

                    <ListView
                        android:id="@+id/flv3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1" >
                    </ListView>
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >

                    <ListView
                        android:id="@+id/listView1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1" >
                    </ListView>
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

Here is my the main java file to start the tabs and setup the ListViews:

package cybertech.productions.yugiohlibrary;

import java.util.ArrayList;
import java.util.Arrays;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class Banlist extends Activity implements OnClickListener {

    TabHost th;

    Initializers initialMngr;

    ArrayAdapter<String> listAdapter;
    ListView forbiddenEMListView, forbiddenFListView;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.banlist);
        th = (TabHost) findViewById(R.id.tabhost);
        th.setup();
        TabSpec specs = th.newTabSpec("tag1");
        specs.setContent(R.id.tab1);
        specs.setIndicator("Forbidden");
        th.addTab(specs);
        specs = th.newTabSpec("tag2");
        specs.setContent(R.id.tab2);
        specs.setIndicator("Semi-Limited");
        th.addTab(specs);
        specs = th.newTabSpec("tag3");
        specs.setContent(R.id.tab3);
        specs.setIndicator("Limited");
        th.addTab(specs);

        th.setCurrentTab(0);

        // #BEGIN: Tab 1 ListViews
        //Setup the "forbidden" ListView(s);

        // ListView 1: Effect Monsters
        forbiddenEMListView = (ListView) findViewById(R.id.fLV1);
        ArrayList<String> forbiddenEMList = new ArrayList<String>();
        forbiddenEMList.addAll(Arrays.asList(initialMngr.forbiddenEM));
        listAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, forbiddenEMList);
        View effectMon_header = View.inflate(this, R.layout.banlist_header_effectmonsters, null);
        forbiddenEMListView.addHeaderView(effectMon_header);
        forbiddenEMListView.setAdapter(listAdapter);

        // ListView 2: Fusion Monsters
        forbiddenFListView = (ListView) findViewById(R.id.fLV2);
        ArrayList<String> forbiddenFList = new ArrayList<String>();
        forbiddenFList.addAll(Arrays.asList(initialMngr.forbiddenF));
        listAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, forbiddenFList);
        View fusion_header = View.inflate(this, R.layout.banlist_header_fusionmonsters, null);
        forbiddenFListView.addHeaderView(fusion_header);
        forbiddenFListView.setAdapter(listAdapter);
        // #END: Tab 1 ListViews
    }

    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub

    }

}

Thanks for any help.

Answer 1

You want to use an ExpandableListView. Use the group views to label the different categories or sections. Since you are using Arrays to back your lists, SimpleExpandableListAdapter should fit the bill nicely.