androidlistviewandroid-tabhostsegmentedcontrol

ListView with three options on same activity


I have a list View and now I am trying to set up tab view for this list view.

Now sometime there are 3 options, sometimes 2 and sometimes 1. As you can see here

enter image description here

And when a tab is clicked I will reload my list view with new data depending on which item in the tab bar was clicked. But this is similar data, so it will be in the same list view and I want to use the same xml layout. But currently I am unable to do this, I can't see to get it working it.

Here is what I have so

 myTabHost =(TabHost) findViewById(R.id.TabHost01);
    myTabHost.setup();

    TabHost.TabSpec spec1 = myTabHost.newTabSpec("First Tab");
    spec1.setIndicator("First Tab", getResources().getDrawable(android.R.drawable.ic_menu_add));
    spec1.setContent(R.id.tab1);
    myTabHost.addTab(spec1);

    myTabHost.addTab(myTabHost.newTabSpec("Second Tab").
            setIndicator("Second Tab", getResources().getDrawable(android.R.drawable.ic_menu_edit)).setContent(R.id.tab2));

This is setting it up for 2 tab, and then in the xml I have

<include
                android:id="@+id/tab1"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                layout="@layout/item_list_view">


            </include>

            <include
                android:id="@+id/tab2"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                layout="@layout/test">


            </include>

But I want to use the same layout instead of different ones and just reload the data but when I set the tabs .setContent to the same id it doesn't work?

So the basic question is how do I use the same xml for more than one tab, and just load different data in the list view?

The tab bar will be filled with text not images if that matters. Have looked at some tutorals on this but aren't helpful for my situation https://www.youtube.com/watch?v=OeNC_sShJXs https://www.youtube.com/watch?v=1-u3toC6ctY

So I need some help setting this up.

Thanks for the help in advance :)


Solution

  • As I understand it, this question involves two parts:

    1. Creating tabs programmatically.
    2. Sharing the same content view between tabs.

    For the first part, you can put an "empty" TabHost in your layout, and then call addTab() later, depending on the tabs you want to show. For example, the layout file would be just:

    <?xml version="1.0" encoding="utf-8"?>
    <TabHost
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/TabHost01"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <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="0dp"
                android:layout_weight="1">
            </FrameLayout>
        </LinearLayout>
    </TabHost>
    

    And then, in onCreate():

    TabHost tabHost = (TabHost)findViewById(R.id.TabHost01);
    tabHost.setup();
    tabHost.addTab(tabHost.newTabSpec(...));
    tabHost.addTab(tabHost.newTabSpec(...));
    

    Where each TabHost.TabSpec specifies the indicator and content of each tab.

    Now, as to the second part, you need a single ListView widget and change its data as the user switches tabs. This is actually pretty easy, since the TabHost can handle the case where multiple tabs have the same content without problems. You just need to set up a TabHost.TabContentFactory for each tab, and have each of them return the same view.

    For example:

    mListView = new ListView(this);
    
    TabHost tabHost = (TabHost)findViewById(R.id.TabHost01);
    tabHost.setup();
    tabHost.addTab(tabHost.newTabSpec("1").setIndicator("First").setContent(mDummyTabContent));
    tabHost.addTab(tabHost.newTabSpec("2").setIndicator("Second").setContent(mDummyTabContent));
    tabHost.addTab(tabHost.newTabSpec("3").setIndicator("Third").setContent(mDummyTabContent));
    

    where mTabContent is initialized as:

    private final TabHost.TabContentFactory mDummyTabContent = new TabHost.TabContentFactory()
    {
        @Override
        public View createTabContent(String tag)
        {
            return mListView;
        }
    };
    

    Then the last remaining step is to add a TabHost.OnTabChangeListener that switches the data in the single ListView:

    tabHost.setOnTabChangedListener(mOnTabChangedListener);
    mOnTabChangedListener.onTabChanged("1");
    

    where:

    private TabHost.OnTabChangeListener mOnTabChangedListener = new TabHost.OnTabChangeListener()
    {
        @Override
        public void onTabChanged(String tabId)
        {
            String[] data;
    
            if (tabId.equalsIgnoreCase("1"))
                data = FIRST_ITEMS;
            else if (tabId.equalsIgnoreCase("2"))
                data = SECOND_ITEMS;
            else
                data = THIRD_ITEMS;
    
            ArrayAdapter<String> adapter = new ArrayAdapter<String>(FakeTabViewActivity.this, android.R.layout.simple_list_item_1, data);
            mListView.setAdapter(adapter);
        }
    };
    

    Sample gist with activity and layout file is available here.