Solved: Adnroid Tab Layout Example

When you are starting with Android development you will most likely start with looking at some of the examples provided by Google. Within the Google development guide you will find some examples. I have already touched the "hello world" example in a previous blogpost where I was discussing the boot speed of the Android Emulator. After you have completed the "hello world" example you most likely would like to pickup some of your development work. A good example you can follow to get some understanding of building a Android layout is the "Tab Layout" example.

I have been completing the "Tab Layout" example and ran into some error's and found that more people are having difficulty completing the "Tab Layout" example. Reason for this is that the google example is a example and not a step by step guide on how to program for Android. As I found some well discussed issues with this example I found that a lot of people have difficulties with this example.


To help those people you can find the source of the example I build. The main issue I personally encountered in this example is the content of the androidmanifest.xml file. I hope this post will give you some more insight in how to develop a tab layout and will help you understand how to work with the example given by Google.


AlbumsActivity.java

view plainprint?

1. package com.terminalCult.helloTab;  
2. //import some stuff we need to get the example code running  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.   
7. // starting the class  
8. public class AlbumsActivity extends Activity {  
9.    public void onCreate(Bundle savedInstanceState) {  
10.        super.onCreate(savedInstanceState);  
11.        TextView textview = new TextView(this);  
12.        //show some text to state which tab this is  
13.        textview.setText("This is the albums tab");  
14.        setContentView(textview);  
15.    }  
16. }

ArtistsActivity.java

view plainprint?

1. package com.terminalCult.helloTab;  
2. //import some stuff we need to get the example code running  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.   
7. // starting the class  
8. public class ArtistsActivity extends Activity {  
9.    public void onCreate(Bundle savedInstanceState) {  
10.        super.onCreate(savedInstanceState);  
11.   
12.        TextView textview = new TextView(this);  
13.        //show some text to state which tab this is  
14.        textview.setText("This is the Artists tab");  
15.        setContentView(textview);  
16.    }  
17. }  

SongsActivity.java

view plainprint?

1. package com.terminalCult.helloTab;  
2. //import some stuff we need to get the example code running  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.   
7. // starting the class  
8. public class SongsActivity extends Activity {  
9.     public void onCreate(Bundle savedInstanceState) {  
10.         super.onCreate(savedInstanceState);  
11.   
12.         TextView textview = new TextView(this);  
13.            //show some text to state which tab this is          
14.         textview.setText("This is the songs tab");  
15.         setContentView(textview);  
16.     }  
17. }  

helloTab.java

view plainprint?

1. package com.terminalCult.helloTab;  
2. import android.os.Bundle;  
3. import android.app.TabActivity;  
4. import android.content.*;  
5. import android.content.res.*;  
6. import android.widget.*;  
7.   
8.   
9. public class helloTab extends TabActivity {  
10.    /** Called when the activity is first created. */  
11.    @Override  
12.    public void onCreate(Bundle savedInstanceState) {  
13.        super.onCreate(savedInstanceState);  
14.        setContentView(R.layout.main);  
15.   
16.        Resources res = getResources(); // Resource object to get Drawables  
17.        TabHost tabHost = getTabHost();  // The activity TabHost  
18.        TabHost.TabSpec spec;  // Resusable TabSpec for each tab  
19.        Intent intent;  // Reusable Intent for each tab  
20.   
21.        // Create an Intent to launch an Activity for the tab (to be reused)  
22.        intent = new Intent().setClass(this, ArtistsActivity.class);  
23.   
24.        // Initialize a TabSpec for each tab and add it to the TabHost  
25.        spec = tabHost.newTabSpec("artists").setIndicator("Artists",  
26.                          res.getDrawable(R.drawable.ic_tab_artists))  
27.                      .setContent(intent);  
28.        tabHost.addTab(spec);  
29.   
30.        // Do the same for the other tabs  
31.        intent = new Intent().setClass(this, AlbumsActivity.class);  
32.        spec = tabHost.newTabSpec("albums").setIndicator("Albums",  
33.                          res.getDrawable(R.drawable.ic_tab_albums))  
34.                      .setContent(intent);  
35.        tabHost.addTab(spec);  
36.   
37.        intent = new Intent().setClass(this, SongsActivity.class);  
38.        spec = tabHost.newTabSpec("songs").setIndicator("Songs",  
39.                          res.getDrawable(R.drawable.ic_tab_songs))  
40.                      .setContent(intent);  
41.        tabHost.addTab(spec);  
42.   
43.        tabHost.setCurrentTab(2);  
44.    }  
45. } 

ic_tab_albums.xml

view plainprint?

1. <selector android="http://schemas.android.com/apk/res/android">  
2.    <!-- When selected, use grey -->  
3.    <item drawable="@drawable/ic_tab_artists_grey" state_selected="true">  
4.    <!-- When not selected, use white-->  
5.    <item drawable="@drawable/ic_tab_artists_white">  
6. </item>  
7. </item></selector>

ic_tab_artists.xml

view plainprint?

1. <selector android="http://schemas.android.com/apk/res/android">  
2.    <!-- When selected, use grey -->  
3.    <item drawable="@drawable/ic_tab_artists_grey" state_selected="true">  
4.    <!-- When not selected, use white-->  
5.    <item drawable="@drawable/ic_tab_artists_white">  
6. </item>  
7. </item></selector>

ic_tab_songs.xml

view plainprint?

1. <selector android="http://schemas.android.com/apk/res/android">  
2.    <!-- When selected, use grey -->  
3.    <item drawable="@drawable/ic_tab_artists_grey" state_selected="true">  
4.    <!-- When not selected, use white-->  
5.    <item drawable="@drawable/ic_tab_artists_white">  
6. </item>  
7. </item></selector>

main.xml

view plainprint?

1. <tabhost android="http://schemas.android.com/apk/res/android" id="@android:id/tabhost" layout_width="fill_parent" layout_height="fill_parent">  
2.    <linearlayout orientation="vertical" layout_width="fill_parent" layout_height="fill_parent" padding="5dp">  
3.        <tabwidget id="@android:id/tabs" layout_width="fill_parent" layout_height="wrap_content">  
4.        <framelayout id="@android:id/tabcontent" layout_width="fill_parent" layout_height="fill_parent" padding="5dp">  
5.    </framelayout>  
6. </tabwidget>  
7. </linearlayout></tabhost>

AndroidManifest.xml

view plainprint?

1. <manifest android="http://schemas.android.com/apk/res/android" package="com.terminalCult.helloTab" versioncode="1" versionname="1.0">  
2.    <application icon="@drawable/icon" label="@string/app_name" debuggable="True">  
3.        <activity name=".helloTab" label="@string/app_name" theme="@android:style/Theme.NoTitleBar">  
4.            <intent-filter>  
5.                <action name="android.intent.action.MAIN">  
6.                <category name="android.intent.category.LAUNCHER">  
7.            </category>  
8.        </action>  
9.         
10.        <activity name=".AlbumsActivity" label="@string/app_name" theme="@android:style/Theme.NoTitleBar">  
11.            <intent-filter>  
12.                <action name="android.intent.action.MAIN">  
13.                <category name="android.intent.category.LAUNCHER">  
14.            </category>  
15.        </action>  
16.   
17.        <activity name=".ArtistsActivity" label="@string/app_name" theme="@android:style/Theme.NoTitleBar">  
18.            <intent-filter>  
19.                <action name="android.intent.action.MAIN">  
20.                <category name="android.intent.category.LAUNCHER">  
21.            </category>  
22.        </action>  
23.         
24.        <activity name=".SongsActivity" label="@string/app_name" theme="@android:style/Theme.NoTitleBar">  
25.            <intent-filter>  
26.                <action name="android.intent.action.MAIN">  
27.                <category name="android.intent.category.LAUNCHER">  
28.            </category>  
29.        </action>   
30. </intent-filter>  
31. <uses-sdk minsdkversion="7">  
32.   
33. </uses-sdk>  
34. </activity></intent-filter></activity></intent-filter></activity></intent-filter></activity>