FragmentTabHost with horizontal scroll

Question

I am trying to build a FragmentTabHost and make it horizontal Scrollable. I've been searching for a solution but couldn't find anything, all posts are about normal TabHost.

I am using the support library as explained in the android site for FragmentTabHost

My layout is :

<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:tag="trip_entry_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="0"/>
    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

Already tried to nest the tabwidget into an horizontal scroll view (this is the solution I could find in other posts, but always for TabHost and not for FragmentTabHost), but nothing changes:

<HorizontalScrollView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:scrollbars="none" >

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

My tabs just got shrinked and that is really not nice looking. Has somebody make it to get a fragment tab host scrollable?

Thanks

Answer 1

Based on my experience, the FragmentTabHost doesn't care much about the xml definitions, things must be made programmatically. I got it working by leaving out the HorizontalScrollView from the xml and adding it in my onCreate for the FragmentActivity.

The xml:

<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/tabhost"
    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"
            android:orientation="horizontal" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

</android.support.v4.app.FragmentTabHost>

Then in the onCreate after adding the tabs (also programmatically):

TabWidget tw = (TabWidget) findViewById(android.R.id.tabs);
LinearLayout ll = (LinearLayout) tw.getParent();
HorizontalScrollView hs = new HorizontalScrollView(this);
hs.setLayoutParams(new FrameLayout.LayoutParams(
    FrameLayout.LayoutParams.MATCH_PARENT,
    FrameLayout.LayoutParams.WRAP_CONTENT));
ll.addView(hs, 0);
ll.removeView(tw);
hs.addView(tw);
hs.setHorizontalScrollBarEnabled(false);

Don't know if this is the most elegant solution but it seems to work OK.

Answer 2

I was trying various scenarios, and the one that works for me with XML layout is:

<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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


        <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:scrollbars="none" >

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

        </HorizontalScrollView>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

</android.support.v4.app.FragmentTabHost>

It works fine, the tabs are offscreen to the right an can be 'scrolled' to. Also note, I do not use the "@+id/realtabcontent" FrameLayout.

Resources used:

• http://developer.android.com/reference/android/support/v4/app/FragmentTabHost.html
• https://maxalley.wordpress.com/2013/05/18/android-creating-a-tab-layout-with-fragmenttabhost-and-fragments/

Regards