How to implement tabs in Android now that TabHosts are deprecated?

Question

I am trying to implement five tabs in a similar look and feel as the Instagram app. What is the best practice for this now that TabHost and TabActivity are deprecated?

I want to have the five tabs at the top of the screen (below the Action Bar), each having a drawable representing the content of that tab.

Since the tabs will always be shown I want to have them in one Activity. The content of each tab however will be dependent on which tab has been pressed. Therefore I want to have a view in the same Activity below the tabs in which I load the fragments in, one at a time depending on which is pressed.

So to sum up: I want to have one Activity with the tabs at the top and a view below them in which I load one of five different fragments at a time.

Please help me making this possible without using deprecated classes:)

Answer 1

You can use this two new class for creating tabs SlidingTabLayout, SlidingTabStrip, you must pass a ViewPager with some Fragments to this class, for a custom view on each tab use setCustomTabView. you can find examples with google.

EDIT:

for custom layout (mine contain both image and text) setup your tab like this:

slideTab = (SlidingTabLayout) findViewById(R.id.getbook_sliding_tabs);
slideTab.setDistributeEvenly(true);
slideTab.setCustomTabView(R.layout.cat_tab_layout, R.id.main_tab_title);

the cat_tab_layout :

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="6dip"
    android:background="@drawable/cat_tab_background">

    <ImageView
        android:id="@+id/main_tab_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/cat_all_book_icon"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:id="@+id/main_tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tab1"
        android:textColor="@color/medium_gray"
        android:layout_below="@id/main_tab_image"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

do some change in populateTabStrip() form SlidingTabLayout class:

adapter = (GetBookFragmentPagesAdapter)mViewPager.getAdapter();// get your view pager adapter
for (int i = 0; i < adapter.getCount(); i++) {
....
if (mTabViewLayoutId != 0) {
    // If there is a custom tab view layout id set, try and inflate it
    tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip, false);
    tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);

    ImageView tabImage = (ImageView)tabView.findViewById(R.id.main_tab_image);
    tabImage.setImageResource(adapter.getImages(i)); // getImage() return image id for each tab

}

....

then you will end up with something like this:

Answer 2

I am trying to implement five tabs in a similar look and feel as the Instagram app

Since not everybody uses Instagram, in the future, please post a screenshot of what you want somewhere, and link to it from your question.

I want to have one Activity with the tabs at the top and a view below them in which I load one of five different fragments at a time.

Use FragmentTabHost. Or, use ViewPager and a tabbed indicator (e.g., TabPageIndicator with the IconPagerAdapter from the ViewPagerIndicator library).