In this post we need three separate activities for three tab screens. So let’s get started by creating a simple project by opening eclipse IDE.
1. Create a new project File -> New -> Android Project and give activity name asAndroidTabLayoutActivity.
2. Open your AndroidTabLayoutActivity and extend the class from TabActivity.
public
class
AndroidTabLayoutActivity
extends
TabActivity {
|
3. Now open your main.xml under res -> layout folder and type the following code.
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
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"
>
<
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"
/>
</
LinearLayout
>
</
TabHost
>
|
4. Now we need 3 activities and 3 xml layouts for three tabs. So create three activities by right click on your package folder and create classes and name them asPhotosActivity.java, SongsActivity.java and VideosActivity.java. Type the following code respectively.
Right Click on package folder -> New -> Class
package
com.example.androidtablayout;
import
android.app.Activity;
import
android.os.Bundle;
public
class
PhotosActivity
extends
Activity {
public
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.photos_layout);
}
}
|
package
com.example.androidtablayout;
import
android.app.Activity;
import
android.os.Bundle;
public
class
SongsActivity
extends
Activity {
public
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.songs_layout);
}
}
|
package
com.example.androidtablayout;
import
android.app.Activity;
import
android.os.Bundle;
public
class
VideosActivity
extends
Activity {
public
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.videos_layout);
}
}
|
5. Now create 3 xml layouts by right clicking on res/layout -> New -> Android XML File and name them as photos_layout.xml, songs_layout.xml andvideos_layout.xml and type the following code in respective files.
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
android:orientation
=
"vertical"
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
>
<!-- Screen Design for Photos -->
<
TextView
android:text
=
"PHOTOS HERE"
android:padding
=
"15dip"
android:textSize
=
"18dip"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
/>
</
LinearLayout
>
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
android:orientation
=
"vertical"
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
>
<!-- Screen Design for the SONGS -->
<
TextView
android:text
=
"SONGS HERE"
android:padding
=
"15dip"
android:textSize
=
"18dip"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
/>
</
LinearLayout
>
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
android:orientation
=
"vertical"
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
>
<!-- Screen Design for VIDEOS -->
<
TextView
android:text
=
"VIDEOS HERE"
android:padding
=
"15dip"
android:textSize
=
"18dip"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
/>
</
LinearLayout
>
|
6. Each and every tab needs an icon so design icons for each tab. We need three dimensions of each icon. Design each icon in 48 x 48 px, 32 x 32 px and 24 x 24 pxand place them in drawable-hdpi, drawable-mdpi and drawable-ldpi respectively. See following diagram for your guidance
7. Android icon states will be define in xml files with default and hover state configurations. For three icons we need the icon state configuration files. So create three 3 xml files under drawable-hdpi directory. Type the following code for icon states.
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<!-- When selected, use grey -->
<
item
android:drawable
=
"@drawable/photos_gray"
android:state_selected
=
"true"
/>
<!-- When not selected, use white-->
<
item
android:drawable
=
"@drawable/photos_white"
/>
</
selector
>
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<!-- When selected, use grey -->
<
item
android:drawable
=
"@drawable/songs_gray"
android:state_selected
=
"true"
/>
<!-- When not selected, use white-->
<
item
android:drawable
=
"@drawable/songs_white"
/>
</
selector
>
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<!-- When selected, use grey -->
<
item
android:drawable
=
"@drawable/videos_gray"
android:state_selected
=
"true"
/>
<!-- When not selected, use white-->
<
item
android:drawable
=
"@drawable/videos_white"
/>
</
selector
>
|
8. Now open AndroidTabLayoutActivity.java and type the following code. In the following code we are creating three TabSepcs and adding them to TabHost.
package
com.example.androidtablayout;
import
android.app.TabActivity;
import
android.content.Intent;
import
android.os.Bundle;
import
android.widget.TabHost;
import
android.widget.TabHost.TabSpec;
public
class
AndroidTabLayoutActivity
extends
TabActivity {
/** Called when the activity is first created. */
@Override
public
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
// Tab for Photos
TabSpec photospec = tabHost.newTabSpec(
"Photos"
);
// setting Title and Icon for the Tab
photospec.setIndicator(
"Photos"
, getResources().getDrawable(R.drawable.icon_photos_tab));
Intent photosIntent =
new
Intent(
this
, PhotosActivity.
class
);
photospec.setContent(photosIntent);
// Tab for Songs
TabSpec songspec = tabHost.newTabSpec(
"Songs"
);
songspec.setIndicator(
"Songs"
, getResources().getDrawable(R.drawable.icon_songs_tab));
Intent songsIntent =
new
Intent(
this
, SongsActivity.
class
);
songspec.setContent(songsIntent);
// Tab for Videos
TabSpec videospec = tabHost.newTabSpec(
"Videos"
);
videospec.setIndicator(
"Videos"
, getResources().getDrawable(R.drawable.icon_videos_tab));
Intent videosIntent =
new
Intent(
this
, VideosActivity.
class
);
videospec.setContent(videosIntent);
// Adding all TabSpec to TabHost
tabHost.addTab(photospec);
// Adding photos tab
tabHost.addTab(songspec);
// Adding songs tab
tabHost.addTab(videospec);
// Adding videos tab
}
}
|
9. Now everything is ready and before running your project make sure that you an entry of new activity name in AndroidManifest.xml file. Open you AndroidManifest.xml file and modify the code as below
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
package
=
"com.example.androidtablayout"
android:versionCode
=
"1"
android:versionName
=
"1.0"
>
<
uses-sdk
android:minSdkVersion
=
"8"
/>
<
application
android:icon
=
"@drawable/icon"
android:label
=
"@string/app_name"
>
<
activity
android:name
=
".AndroidTabLayoutActivity"
android:label
=
"@string/app_name"
>
<
intent-filter
>
<
action
android:name
=
"android.intent.action.MAIN"
/>
<
category
android:name
=
"android.intent.category.LAUNCHER"
/>
</
intent-filter
>
</
activity
>
<!-- Songs Activity -->
<
activity
android:name
=
".SongsActivity"
/>
<!-- Videos Activity -->
<
activity
android:name
=
".VideosActivity"
/>
<!-- Photos Activity -->
<
activity
android:name
=
".PhotosActivity"
/>
</
application
>
</
manifest
>
|
10. Finally run your project by right clicking on your project folder -> Run As -> 1 Android Application. You will see simple tabs app with awesome navigation.