ListView with three options on same activity

Question

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

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 :)

Answer 1

Add TabHost view to your layout. You can add as many tabs you want dynamically using addTab() method.

public class MainActivity extends Activity {

private TabHost myTabHost;

@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myTabHost =(TabHost) findViewById(R.id.TabHost01);
            mytabhost.setup();

TabSpec spec = mytabhost.newTabSpec("tab_creation");
spec.setIndicator("Create adresse",getResources().getDrawable(android.R.drawable.ic_menu_add));
    spec.setContent(R.id.onglet1);
    mytabhost.addTab(spec);

    mytabhost.addTab(mytabhost.newTabSpec("tab_inser").setIndicator("Delete",getResources().getDrawable(android.R.drawable.ic_menu_edit)).setContent(R.id.Onglet2));

   mytabhost.addTab(mytabhost.newTabSpec("tab_affiche").setIndicator("Show All",getResources().getDrawable(android.R.drawable.ic_menu_view)).setContent(R.id.Onglet3));

   ListView lv=(ListView) findViewById(R.id.listView1);
   MyListAdapter adapter =new MyListAdapter(this);
   lv.setAdapter(adapter);              
 }
}

for complete reference:http://mrbool.com/how-to-create-an-activity-android-with-a-tabhost-view/27990

Answer 2

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.