Adjust the tabhost in with multiple tabs in android?

Question

I have a tabhost and it has total 6 tabs. When I open this application in tablet its looking good. But When I open it in a smaller device the tabs get congested as follows.

I want these tabs to look like this.

May be a scroll view would do this. But I am not able to do it. I tried horizontal scrollview but then the width of one tab is beyond the screen limit. User has to keep scrolling just to go to second tab.

This is my xml code.

<?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: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_above="@android:id/tabs"
            android:layout_weight="1"
            android:layout_height="fill_parent"/>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/subbgg" />


    </LinearLayout>
</TabHost>

and this is my java code.

public class Register extends TabActivity {
    //TabHost tabHost;
    public static TabHost tabHost;

    // Button logout;
    @Override
    public void onBackPressed() {

        //Register.this.finish();
        //super.onBackPressed();
    }

    public Register() {


    }
    public Register(int tabindex){


    }

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        //requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.register);
        if( getIntent().getBooleanExtra("Exit me", false)){
            finish();
            return; // add this to prevent from doing unnecessary stuffs
        }
        SharedPreferences app_preferences = PreferenceManager
                .getDefaultSharedPreferences(this);
        String text = app_preferences.getString("key", "null");
        tabHost = getTabHost();

        TabSpec profileTab = tabHost.newTabSpec("tid1");
        TabSpec listTab = tabHost.newTabSpec("tid2");
         TabSpec scanTab = tabHost.newTabSpec("tid3");
        TabSpec collaborationsTab = tabHost.newTabSpec("tid4");
        TabSpec logoutTab = tabHost.newTabSpec("tid5");
        TabSpec contactsTab= tabHost.newTabSpec("tid6");
        TabSpec startnewTab=tabHost.newTabSpec("tid7");

        View tabIndicator1 = LayoutInflater.from(this).inflate(
                R.layout.tab_indicator, tabHost.getTabWidget(), false);
        TextView title1 = (TextView) tabIndicator1.findViewById(R.id.title);
        ImageView icon1 = (ImageView) tabIndicator1.findViewById(R.id.icon);

        View tabIndicator2 = LayoutInflater.from(this).inflate(
                R.layout.tab_indicator, tabHost.getTabWidget(), false);
        TextView title2 = (TextView) tabIndicator2.findViewById(R.id.title);
        ImageView icon2 = (ImageView) tabIndicator2.findViewById(R.id.icon);

        final View tabIndicator3 = LayoutInflater.from(this).inflate(
                R.layout.tab_indicator, tabHost.getTabWidget(), false);
        final TextView title3 = (TextView) tabIndicator3.findViewById(R.id.title);
        ImageView icon3 = (ImageView) tabIndicator3.findViewById(R.id.icon);

        View tabIndicator4 = LayoutInflater.from(this).inflate(
                R.layout.tab_indicator, tabHost.getTabWidget(), false);
        TextView title4 = (TextView) tabIndicator4.findViewById(R.id.title);
        ImageView icon4 = (ImageView) tabIndicator4.findViewById(R.id.icon);

        View tabIndicator5 = LayoutInflater.from(this).inflate(
                R.layout.tab_indicator, tabHost.getTabWidget(), false);
        TextView title5 = (TextView) tabIndicator5.findViewById(R.id.title);
        ImageView icon5 = (ImageView) tabIndicator5.findViewById(R.id.icon);

        View tabIndicator6 = LayoutInflater.from(this).inflate(
                R.layout.tab_indicator, tabHost.getTabWidget(), false);
        TextView title6 = (TextView) tabIndicator6.findViewById(R.id.title);
        ImageView icon6 = (ImageView) tabIndicator6.findViewById(R.id.icon);

        View tabIndicator7 = LayoutInflater.from(this).inflate(
                R.layout.tab_indicator, tabHost.getTabWidget(), false);
        TextView title7 = (TextView) tabIndicator7.findViewById(R.id.title);
        ImageView icon7 = (ImageView) tabIndicator7.findViewById(R.id.icon);



        Drawable detailIcon = getResources().getDrawable(R.drawable.profile);
        //Intent detailPage = new Intent(this, Detail.class);
        Intent profilePage = new Intent(this, Profile.class);

        title1.setText("Profile");
        //title1.setTextSize(15);
        title1.setTextSize(16);
        title1.setTypeface(null, Typeface.NORMAL);
        //title1.setPadding(0, 0, 0, 20);

        icon1.setImageResource(R.drawable.profile);

        profileTab.setIndicator(tabIndicator1).setContent(profilePage);
        //detailTab.setIndicator("", detailIcon).setContent(detailPage);


        Drawable signIcon = getResources().getDrawable(R.drawable.joined);
        Intent collaPage = new Intent(this, collaborations.class);

        //signPage.putExtra("g0", stopmModel);
        title4.setText("Joined");
        title4.setTextSize(16);
        //title4.setPadding(0, 0, 0, 20);
        //title4.setTextAppearance(this, android.R.style.TextAppearance_Medium);
        title4.setTypeface(null, Typeface.NORMAL);
        icon4.setImageResource(R.drawable.joined);
        collaborationsTab.setIndicator(tabIndicator4).setContent(collaPage);
        collaPage.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);





        Drawable commentIcon = getResources().getDrawable(R.drawable.managed);
        Intent listPage = new Intent(this, List.class);

        //commentPage.putExtra("g0", stopmModel);
        title2.setText("Managed");
        title2.setTextSize(16);
        //title2.setTextAppearance(this, android.R.style.TextAppearance_Medium);
        title2.setTypeface(null, Typeface.NORMAL);
        //title2.setPadding(0, 0, 0, 20);
        icon2.setImageResource(R.drawable.managed);
        listTab.setIndicator(tabIndicator2).setContent(listPage);
        listPage.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
        Drawable cameraIcon = getResources().getDrawable(R.drawable.collaborations);
         final Intent scanPage = new Intent(this, Camera.class);
        //Intent cameraPage = new Intent(this, NewStop.class);

        //cameraPage.putExtra("g0", stopmModel);
        title3.setText("Scan");
    title3.setTextSize(16);
    //  title3.setTextAppearance(this, android.R.style.TextAppearance_Medium);
        title3.setTypeface(null, Typeface.NORMAL);
    //  title3.setPadding(0, 0, 0, 20);
        icon3.setImageResource(R.drawable.collaborations);
        scanTab.setIndicator(tabIndicator3).setContent(scanPage);
        //scanPage.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);


        //Drawable contacticon = getResources().getDrawable(R.drawable.logoutone);
        Intent contactpage = new Intent(this, contact.class);

        //surveyPage.putExtra("g0", stopmModel);
        title6.setText("Contacts");
        title6.setTextSize(16);
        //title5.setPadding(0, 0, 0, 20);
        title6.setTypeface(null, Typeface.NORMAL);
        icon6.setImageResource(R.drawable.contacts);

        contactsTab.setIndicator(tabIndicator6).setContent(contactpage);






        Drawable surveyIcon = getResources().getDrawable(R.drawable.logoutone);
        Intent logoutPage = new Intent(this, Logout.class);

        //surveyPage.putExtra("g0", stopmModel);
        title5.setText("Logout");
        title5.setTextSize(16);
        //title5.setPadding(0, 0, 0, 20);
        title5.setTypeface(null, Typeface.NORMAL);
        icon5.setImageResource(R.drawable.logoutone);
        icon5.setPadding(0, 8, 0, 0);
        logoutTab.setIndicator(tabIndicator5).setContent(logoutPage);

        Intent startnewpage = new Intent(this, Startnew.class);

        //surveyPage.putExtra("g0", stopmModel);
        title7.setText("Start New");
        title7.setTextSize(16);
        //title5.setPadding(0, 0, 0, 20);
        title7.setTypeface(null, Typeface.NORMAL);
        icon7.setImageResource(R.drawable.collaborations);

        startnewTab.setIndicator(tabIndicator7).setContent(startnewpage);



        tabHost.addTab(collaborationsTab);
        tabHost.addTab(listTab);
        tabHost.addTab(scanTab);
        tabHost.addTab(profileTab);
        tabHost.addTab(startnewTab);
        tabHost.addTab(contactsTab);
        tabHost.addTab(logoutTab);

Answer 1

I have accomplied this by dynamically getting android screen width and reduce the text size of tab widget

int width=WindowHeighAndWidth.getScreenWidth(TabHostAct.this);

    if(width<542){
        titleTv.setTextSize(12.0f);
                titleSaleTV.setTextSize(12.0f);
        titlePurchTV.setTextSize(12.0f);
                titlePayTV.setTextSize(12.0f);
        titleStockTV.setTextSize(12.0f);
    }

here WindowHeightAndWidth class:

public class WindowHeighAndWidth {public static int getScreenWidth(Context context){
    DisplayMetrics dm = new DisplayMetrics();
    WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    windowManager.getDefaultDisplay().getMetrics(dm);
    int widthInPx = dm.widthPixels;
    return widthInPx;
    }
}

titlePurchTv is a TextView which i am getting from a layout and set on `

spec = tabHost.newTabSpec("home"); // Create a new TabSpec using tab host
   // spec.setIndicator("Sale"); // set the “HOME” as an indicator
    spec.setIndicator(homeView);  //here you can set a layout

I hope it will help you. If any problem then comment

Answer 2

Edited:

<?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: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_above="@android:id/tabs"
            android:layout_weight="1"
            android:layout_height="fill_parent">



         </FrameLayout>


         <HorizontalScrollView
             android:id="@+id/horizontalScrollView1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true">



                     <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/subbgg" />


             </HorizontalScrollView>





    </LinearLayout>
</TabHost>

Add this to your java file, according to your size.

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