Tabhost tabs don't display correctly across devices

I'm experiencing weird behavior in a tabhost across different devices. Which leads me to think there is a problem with the 开发者_StackOverflow社区device (considering the one giving me trouble is running an unofficial mod) but I thought I'd ask anyway.

My tabs are inside a HorizontalScrollView with the intention that they will extend past the allotted space but allow the user to reach them.

Here's my code

Activity

    // Set up Tabs
    TabHost tabs = (TabHost)findViewById(R.id.my_tabhost);
    tabs.setup();


    TabSpec tspec1 = tabs.newTabSpec("items");
    tspec1.setIndicator(makeTabView("Items", res.getDrawable(R.drawable.basket_icon_light)));
    tspec1.setContent(R.id.tab1);
    tabs.addTab(tspec1);
    TabSpec tspec2 = tabs.newTabSpec("customers");
    tspec2.setIndicator(makeTabView("Customers", res.getDrawable(R.drawable.customer_icon_light)));
    tspec2.setContent(R.id.tab2);
    tabs.addTab(tspec2);
    TabSpec tspec3 = tabs.newTabSpec("dept");
    tspec3.setIndicator(makeTabView("Departments", res.getDrawable(R.drawable.dept_icon_light)));
    tspec3.setContent(R.id.tab3);
    tabs.addTab(tspec3);
    TabSpec tspec4 = tabs.newTabSpec("users");
    tspec4.setIndicator(makeTabView("Users", res.getDrawable(R.drawable.user_icon_light)));
    tspec4.setContent(R.id.tab4);
    tabs.addTab(tspec4);
    tabs.setOnTabChangedListener(tabchange);
    TabSpec tspec5 = tabs.newTabSpec("terms");
    tspec5.setIndicator(makeTabView("Terms", res.getDrawable(R.drawable.terms_icon_light)));
    tspec5.setContent(R.id.tab5);
    tabs.addTab(tspec5);
    tabs.setOnTabChangedListener(tabchange);



private View makeTabView(String name, Drawable draw){
    View v = View.inflate(getApplicationContext(), R.layout.custom_tab, null);
    LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    lp.setMargins(1, 0, 1, 0);
    ImageView image = (ImageView) v.findViewById(R.id.tab_image);
    TextView text = (TextView) v.findViewById(R.id.tab_text);
    image.setImageDrawable(draw);
    text.setText(name);
    v.setLayoutParams(lp);
    v.setBackgroundDrawable(res.getDrawable(R.drawable.tabindicator));
    return v;
}

CustomTab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal" 
  android:layout_height="match_parent" 
  android:layout_width="match_parent">
    <LinearLayout android:id="@+id/linearLayout1" 
              android:orientation="vertical" 
              android:layout_marginLeft="20dp" 
              android:layout_marginRight="20dp" 
              android:layout_height="match_parent" 
              android:layout_width="match_parent">
    <ImageView android:id="@+id/tab_image" 
               android:src="@drawable/icon" 
               android:layout_height="wrap_content" 
               android:layout_gravity="center" 
               android:scaleType="centerInside" 
               android:layout_width="wrap_content">
    </ImageView>
    <TextView android:layout_gravity="center" 
              android:layout_height="wrap_content" 
              android:id="@+id/tab_text" 
              android:text="TextView" 
              android:layout_width="wrap_content" 
              android:layout_marginBottom="10px">
    </TextView>
</LinearLayout>

TabHost.xml

    <LinearLayout android:id="@+id/contain_nav" 
                  android:layout_width="fill_parent" 
                  android:layout_height="wrap_content" 
                  android:orientation="horizontal" 
                  android:background="@drawable/border_top">
        <TabHost android:id="@+id/my_tabhost" 
                 android:layout_width="fill_parent" 
                 android:layout_height="wrap_content">
            <LinearLayout android:weightSum="100" 
                          android:layout_height="wrap_content" 
                          android:layout_width="match_parent" 
                          android:id="@+id/linearLayout1" 
                          android:orientation="vertical">
                <LinearLayout android:layout_height="wrap_content" 
                              android:layout_width="match_parent" 
                              android:id="@+id/linearLayout3">
                    <HorizontalScrollView android:layout_height="wrap_content" 
                                          android:id="@+id/horizontalScrollView2" 
                                          android:fillViewport="true" 
                                          android:layout_width="match_parent" 
                                          android:scrollbars="none">
                        <TabWidget android:orientation="horizontal" 
                                   android:id="@android:id/tabs" 
                                   android:layout_height="match_parent" 
                                   android:layout_width="wrap_content">
                        </TabWidget>
                    </HorizontalScrollView>
                </LinearLayout>
                <FrameLayout android:layout_height="0dp" 
                             android:layout_width="match_parent" 
                             android:id="@android:id/tabcontent">
                    <LinearLayout android:layout_width="match_parent" 
                                  android:layout_height="0dp" 
                                  android:id="@+id/tab1">
                    </LinearLayout>
                    <LinearLayout android:layout_width="wrap_content" 
                                  android:layout_height="0dp" 
                                  android:id="@+id/tab2">
                    </LinearLayout>
                    <LinearLayout android:layout_width="wrap_content" 
                                  android:layout_height="wrap_content" 
                                  android:id="@+id/tab3">
                    </LinearLayout>
                    <LinearLayout android:layout_width="wrap_content" 
                                  android:layout_height="wrap_content" 
                                  android:id="@+id/tab4">
                    </LinearLayout>
                    <LinearLayout android:layout_width="wrap_content" 
                                  android:layout_height="wrap_content" 
                                  android:id="@+id/tab5">
                    </LinearLayout>
                </FrameLayout>
            </LinearLayout>
        </TabHost>
    </LinearLayout>

And here's what it should look like (Mot XOOM) Here's what I keep getting (Viewsonic Gtablet)

Am I missing something I know pixel density can affect how things render, but I just don't get this.

---

I had the same problem. Its matter of screen density. Create tabs background images on the same layer you did the image for Customers. I'm not into designing icons and image resources for this purpose, but I have given the link below to someone who is into graphics and he did the job well.

http://developer.android.com/guide/practices/ui_guidelines/icon_design_tab.html

---

It's actually problem with honeycomb 3.0 and the horizantalscrollview. This seems to be fixed with 3.1 and higher. I used the method of removing the scroll view in a layout and putting it in layout-mdpi-v11 folder and then putting the xml layout with the scroll view in layout-mdpi-v12.

Not the best work around but as of the time of this writing 3.0 only covers 0.2% of active devices.