tabs and images with some devices

Question

Part of my app extends FragmentActivity.

The tab has an image and a text (it has 3 tabs, but they has similar code, the only difference is the text and the image):

 mTabManager.addTab("map", mTabHost.newTabSpec("map").setIndicator(context.getString(R.string.map), activity.getResources().getDrawable(R.drawable.maps_tab)), Maps.class, bundlePos);

And maps_tab.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use icon1 -->
<item android:drawable="@drawable/ic_mapa_selected"
  android:state_selected="true" />
<!-- When not selected, use icon2-->
<item android:drawable="@drawable/ic_mapa_unselected" />
</selector>

Ok this work fine in some devices as Galaxy Ace, or HTC Wildfire S:

But fails in other devices as Galaxy SII, Galaxy SIII or HTC Desire C

how can this incompatibility be solved?

Answer 1

Here is the implementation for same

TabSample.java

public class TabSample extends TabActivity {
    /** Called when the activity is first created. */   
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setTabs() ;
    }
    private void setTabs()
    {
        addTab("Home", R.drawable.tab_home, ArrowsActivity.class);
        addTab("Search", R.drawable.tab_search, OptionsActivity.class);

        //To add more tabs just use addTab() method here like previous line.
    }

    private void addTab(String labelId, int drawableId, Class<?> c)
    {
        TabHost tabHost = getTabHost();
        Intent intent = new Intent(this, c);
        TabHost.TabSpec spec = tabHost.newTabSpec("tab" + labelId); 

        View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
        TextView title = (TextView) tabIndicator.findViewById(R.id.title);
        title.setText(labelId);
        ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
        icon.setImageResource(drawableId);

        spec.setIndicator(tabIndicator);
        spec.setContent(intent);
        tabHost.addTab(spec);
        int i = tabHost.getCurrentTab();
        Toast.makeText(TabSample.this, "tab->" + i,Toast.LENGTH_SHORT).show();
    }
}

main.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: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_height="0dip"
            android:layout_weight="1" />

        <TabWidget android:id="@android:id/tabs"
            android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:layout_weight="0"  />
    </LinearLayout>
</TabHost> 

tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="55dip"    
    android:layout_weight="1"
    android:orientation="vertical"

    android:background="@drawable/tab_indicator"
    android:padding="5dp">

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

    /> 
    <TextView android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" 
        android:layout_centerHorizontal="true"
        style="?android:attr/tabWidgetStyle"
    />    
</RelativeLayout>

Let me know if you have any problem with this
Thanks