Draw custom tab bar for Android app

Question

I need to develop an app with tab bar on the bottom, but I have lots of problems with Fragments, where Android documentation shows how to use TabHost and Fragments.
Because there is nothing shown, about how to do it right with every tab stack.

As I can go to tab1 it's open Fragment A, then I want go into deep and open Fragment B and have the possibility to switch tab to tab2, as well as switch back seeing the same Fragment B in tab1.

There are some solutions creating for every tab a FragmentActivity, but for that management you should use TabActivity, which is deprecated.

So maybe I could draw my tab bar and put it on all layouts and every time user press tab bar button I just start an Activity ?

If this is possible maybe some had implemented this, or could show some tutorial how to draw, or use this?

Thanks.

Answer 1

In XML down_tabs.xml you add this code

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <FrameLayout android:id="@android:id/tabcontent"
        android:layout_width="fill_parent" android:layout_height="0dip"
        android:layout_weight="1" />

    <TabWidget android:id="@android:id/tabs"
        android:layout_width="fill_parent"        android:layout_height="wrap_content"
        android:layout_weight="0"  />
</LinearLayout>

And in Activity class add tabs specifications as,

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.down_tabs);
    initTabs();
}

private void initTabs() {
    // Set Calendar Tab
    // getTabWidget().setDividerDrawable(R.drawable.tab_divider);
    getTabWidget().setPadding(0, 0, 0, 0);
    addTab("", R.drawable.home_tab_drawable, CalendarUIActivity.class);
    addTab("", R.drawable.lucky_dates_drawable, LuckyDatesActivity.class);
    addTab("", R.drawable.life_stages_drawable, LifeStagesActivity.class);
    addTab("", R.drawable.find_items_drawable, FindItemsActivity.class);
    addTab("", R.drawable.more_tab_drawable, MoreActivity.class);
}

private void addTab(String labelId, int drawableId, Class<?> targetClass) {
    TabHost tabHost = getTabHost();
    Intent intent = new Intent(this, targetClass);
    TabHost.TabSpec spec = tabHost.newTabSpec("tab" + labelId);

    View tabIndicator = LayoutInflater.from(this).inflate(
            R.layout.tab_indicator, getTabWidget(), false);
    TextView title = (TextView) tabIndicator.findViewById(R.id.title);
    title.setText(labelId);
    ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
    icon.setImageResource(drawableId);

    tabIndicator.setBackgroundResource(R.drawable.tab_backgroud);
    // //////////
    spec.setIndicator(tabIndicator);
    spec.setContent(intent);
    tabHost.addTab(spec);

}

I hope it will works fine.