Android Tab Layout tutorial?

Question

I want to be able to assign different images to my tabs in the TabLayout control depending on whether the item is selected or not. I followed the tutorial on the Android site but they made the example with just one image and for it it works. But it doesn't work for the rest of the tabs. How can I make it work? This is my code:

The main activity:

public class Main extends TabActivity {
    private Resources res;
    private TabHost tabHost;
    private TabHost.TabSpec spec;  // Resusable TabSpec for each tab
    private Intent intent;  // Reusable Intent for each tab

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // The IDs in main2 should be exactly like the current ones.
        setContentView(R.layout.main2);

        res = getResources(); // Resource object to get Drawables
        tabHost = getTabHost();  // The activity TabHost
        // Create an Intent to launch an Activity for the tab (to be reused)
        intent = new Intent().setClass(this, Tab1.class);

        // Initialize a TabSpec for each tab and add it to the TabHost
        spec = tabHost.newTabSpec("artists").setIndicator("Artists",
                          res.getDrawable(R.drawable.ic_tab_artists_grey))
                      .setContent(intent);
        tabHost.addTab(spec);

        // Do the same for the other tabs
        intent = new Intent().setClass(this, Tab2.class);
        spec = tabHost.newTabSpec("albums").setIndicator("Albums",
                          res.getDrawable(R.drawable.ic_tab_albums_grey))
                      .setContent(intent);
        tabHost.addTab(spec);

        intent = new Intent().setClass(this, Tab3.class);
        spec = tabHost.newTabSpec("songs").setIndicator("Songs",
                          res.getDrawable(R.drawable.ic_tab_songs_grey))
                      .setContent(intent);
        tabHost.addTab(spec);

        tabHost.setCurrentTab(1);
    }
}

The 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"
        android:padding="5dp">
        <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="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>

The selector for the first tab:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/ic_tab_artists_grey"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/ic_tab_artists_white"/>
</selector>

The selector for the second tab:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/ic_tab_songs_grey"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/ic_tab_songs_white"/>
</selector>

etc. My images are called ic_tab_songs_white, ic_tab_songs_grey, ic_tab_albums_white, ic_tab_albums_grey, ic_tab_artists_white, ic_tab_artists_grey.

Answer 1

Could the problem be that you define the tab backgrounds as the images you have instead of the selectors you have defined? From your text it is not clear how you named the two selector files you have code example for but your code should refer to those files, not to the actual images.