Seeking help for writing a TabLayout using Fragment

[zollen]

I am new to Android development. Recently I have been trying to rewrite the following tutorial with Fragment class. The tutorial utilizs the old TabActivity class and TabHost and TabWidget annontations.

TabLayout Google Tutorial

I followed some online Fragment sample codes, I converted all my Activity class with Fragment class, but I couldn't make it to work.

Here are few questions

1. Should I define the <Fragment> class or calling ActionBar.addBar(...), or both?
2. What would a complete res/layout/main.xml look like? What would be the root element (i.e. LinearLayout, Framelayout..etc)?
3. Any additional info would be grateful.

 

[zollen]

res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
androidrientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">


<fragment class="home.net.AlbumsActivity"
android:id="@+id/Albums"
android:tag="Albums"
android:name="home.net.AlbumsActivity"
android:layout_width="match_parent" android:layout_height="match_parent" />
<fragment class="home.net.ArtistsActivity"
android:id="@+id/Artists"
android:tag="Artists"
android:name="home.net.ArtistsActivity"
android:layout_width="match_parent" android:layout_height="match_parent" />
<fragment class="home.net.SongsActivity"
android:id="@+id/Songs"
android:tag="Songs"
android:name="home.net.SongsActivity"
android:layout_width="match_parent" android:layout_height="match_parent" />


</LinearLayout>

HelloTabWidget.java

package home.net;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.widget.Toast;

public class HelloTabWidget extends Activity {

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

ActionBar actionBar = getActionBar();

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

actionBar.addTab(actionBar.newTab()
.setText("Albums")
.setTabListener(new TabListener<AlbumsActivity>(
this, "Albums", AlbumsActivity.class)));
actionBar.addTab(actionBar.newTab()
.setText("Artists")
.setTabListener(new TabListener<ArtistsActivity>(
this, "Artists", ArtistsActivity.class)));
actionBar.addTab(actionBar.newTab()
.setText("Songs")
.setTabListener(new TabListener<SongsActivity>(
this, "Songs", SongsActivity.class)));
/*
if (savedInstanceState != null) {
actionBar.setSelectedNavigationItem(savedInstanceState.getInt("tab", 0));
}
*/
}

protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putInt("tab", getActionBar().getSelectedNavigationIndex());
}

public static class TabListener<T extends Fragment> implements ActionBar.TabListener {
private final Activity mActivity;
private final String mTag;
private final Class<T> mClass;
private final Bundle mArgs;
private Fragment mFragment;

public TabListener(Activity activity, String tag, Class<T> clz) {
this(activity, tag, clz, null);
}

public TabListener(Activity activity, String tag, Class<T> clz, Bundle args) {
mActivity = activity;
mTag = tag;
mClass = clz;
mArgs = args;

// Check to see if we already have a fragment for this tab, probably
// from a previously saved state. If so, deactivate it, because our
// initial state is that a tab isn't shown.
mFragment = mActivity.getFragmentManager().findFragmentByTag(mTag);

if (mFragment != null && !mFragment.isDetached()) {
FragmentTransaction ft = mActivity.getFragmentManager().beginTransaction();
ft.detach(mFragment);
ft.commit();
}

}

public void onTabSelected(Tab tab, FragmentTransaction ft) {
if (mFragment == null) {
mFragment = Fragment.instantiate(mActivity, mClass.getName(), mArgs);
ft.add(android.R.id.content, mFragment, mTag);
} else {
ft.attach(mFragment);
}
}

public void onTabUnselected(Tab tab, FragmentTransaction ft) {
if (mFragment != null) {
ft.detach(mFragment);
}
}

public void onTabReselected(Tab tab, FragmentTransaction ft) {
Toast.makeText(mActivity, "Reselected!", Toast.LENGTH_SHORT).show();
}
}

}