TabHost with Horizontal Scroll Issue

Question

I want to have different number of tabs and I am using TabHost. these could be between 1 to 8 in number depending on data.

I want to have horizontal scroll added so that when all 8 are there it doesn't look cramped up.

Issue is when 5 or more are there it looks fine and scroll works ! But when number of tabs are less I see blank space. tabs are not getting stretched to fill in the extra space.

How can I resolve this ? Can this be done via Java code ?

here is my layout xml...

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!---Other Views--->

    <HorizontalScrollView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

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

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

</TabHost>

Answer 1

This is working for me. Please try.

<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">

        <HorizontalScrollView 
            android:layout_width="wrap_content"
            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:tabStripEnabled="true"
                android:orientation="horizontal" />

        </HorizontalScrollView>

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

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

    </LinearLayout>

</TabHost>

BTW, Where does it say that TabHost is deprecated? I am getting no warnings... Also, relying on this post, I believe that TabHost is alive and kicking.

Answer 2

I have added three tabs and have no problem using it and if you want to make it scrollable just Add <HorizontalScrollView> as a parent to <TabWidget> mainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@android:id/tabs" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" />
    </RelativeLayout>

</TabHost>

MainActivity

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity implements OnTabChangeListener
{
    TabHost tabHost;

    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        tabHost = getTabHost();

        TabSpec photospec = tabHost.newTabSpec("Home");
        photospec.setIndicator("");
        Intent photosIntent = new Intent(this, Download.class);
        photospec.setContent(photosIntent);

        TabSpec songspec = tabHost.newTabSpec("Songs");        
        songspec.setIndicator("");
        Intent songsIntent = new Intent(this, Home.class);
        songspec.setContent(songsIntent);

        TabSpec videospec = tabHost.newTabSpec("Videos");
        videospec.setIndicator("");
        Intent videosIntent = new Intent(this, Album.class);
        videospec.setContent(videosIntent);

        tabHost.addTab(photospec); 
        tabHost.addTab(songspec); 
        tabHost.addTab(videospec);

        tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.download_unselect);
        tabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.main_selected);
        tabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.albums_unselect);

        tabHost.getTabWidget().getChildAt(0).getLayoutParams().height = 50;

        tabHost.getTabWidget().getChildAt(1).getLayoutParams().height = 70;

        tabHost.getTabWidget().getChildAt(2).getLayoutParams().height = 50;

        tabHost.setCurrentTab(1);

        tabHost.setOnTabChangedListener(this);
    }

    @Override
    public void onTabChanged(String tab) 
    {
        int index = tabHost.getCurrentTab();

        if(index == 0)
        {
            tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.download_selected);
            tabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.main_unselect);
            tabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.albums_unselect);
        }
        else if(index == 1)
        {
            tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.download_unselect);
            tabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.main_selected);
            tabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.albums_unselect);
        }
        else if(index == 2)
        {
            tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.download_unselect);
            tabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.main_unselect);
            tabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.albums_selected);
        }
    }

}