Geeks With Blogs
Bill Osuch - Random geek notes

This post is based on the Tab Layout  tutorial on the Android developers site, with some modifications. I wanted to get rid of the icons (they take up too much screen real estate), and modify the fonts on the tabs.

First, create a new Android project, with an Activity called TabWidget. Then, create two additional Activities called TabOne and TabTwo. Throw a simple TextView on each one with a message identifying the tab, like this:

public class TabTwo extends Activity {
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  TextView tv = new TextView(this);
  tv.setText("This is tab 2");
  setContentView(tv);
 }
}

And don't forget to add them to your AndroidManifest.xml file:

<activity android:name=".TabOne"></activity>
<activity android:name=".TabTwo"></activity>

Now we'll create the tab layout - open the res/layout/main.xml file and insert the following:

<?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">
  <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>

Finally, we'll create the code needed to populate the TabHost. Make sure your TabWidget class extends TabActivity rather than Activity, and add code to grab the TabHost and create an Intent to launch a new Activity:

   TabHost tabHost = getTabHost();  // The activity TabHost
   TabHost.TabSpec spec;  // Reusable TabSpec for each tab
   Intent intent;  // Reusable Intent for each tab
  
   // Create an Intent to launch an Activity for the tab (to be reused)
   intent = new Intent().setClass(this, TabOne.class);

Add the first tab to the layout:

   // Initialize a TabSpec for each tab and add it to the TabHost
   spec = tabHost.newTabSpec("tabOne");  
   spec.setContent(intent); 
   spec.setIndicator("Tab One"); 
   tabHost.addTab(spec);

It's pretty tall as-is, so we'll shorten it:

  // Squish the tab a little bit horizontally
  tabHost.getTabWidget().getChildAt(0).getLayoutParams().height = 40;

But the text is a little small, so let's increase the font size:

  // Bump the text size up
  LinearLayout ll = (LinearLayout) tabHost.getChildAt(0);
  android.widget.TabWidget tw = (android.widget.TabWidget) ll.getChildAt(0);
  RelativeLayout rllf = (RelativeLayout) tw.getChildAt(0);
  TextView lf = (TextView) rllf.getChildAt(1);
  lf.setTextSize(20);

Do the same for the second tab, and you wind up with this:

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        TabHost tabHost = getTabHost();  // The activity TabHost
        TabHost.TabSpec spec;  // Reusable TabSpec for each tab
        Intent intent;  // Reusable Intent for each tab
  
        // Create an Intent to launch an Activity for the tab (to be reused)
        intent = new Intent().setClass(this, TabOne.class);
        // Initialize a TabSpec for each tab and add it to the TabHost
        spec = tabHost.newTabSpec("tabOne");  
        spec.setContent(intent); 
        spec.setIndicator("Tab One"); 
        tabHost.addTab(spec);
        // Squish the tab a little bit horizontally
        tabHost.getTabWidget().getChildAt(0).getLayoutParams().height = 40;
        // Bump the text size up
        LinearLayout ll = (LinearLayout) tabHost.getChildAt(0);
        android.widget.TabWidget tw = (android.widget.TabWidget) ll.getChildAt(0);
        RelativeLayout rllf = (RelativeLayout) tw.getChildAt(0);
        TextView lf = (TextView) rllf.getChildAt(1);
        lf.setTextSize(20);
  
        // Do the same for the other tabs
        intent = new Intent().setClass(this, TabTwo.class);
        spec = tabHost.newTabSpec("tabTwo"); 
        spec.setContent(intent); 
        spec.setIndicator("Tab Two");
        tabHost.addTab(spec);
        tabHost.getTabWidget().getChildAt(1).getLayoutParams().height = 40;
        RelativeLayout rlrf = (RelativeLayout) tw.getChildAt(1);
        TextView rf = (TextView) rlrf.getChildAt(1);
        rf.setTextSize(20);
  
        tabHost.setCurrentTab(0);
    }

Save and fire up the emulator, and you should be able to switch back and forth between your tabs!

Posted on Tuesday, December 21, 2010 9:26 AM Android | Back to top


Comments on this post: Android - Switching Activities with a Tab Layout

# re: Android - Switching Activities with a Tab Layout
Requesting Gravatar...
Your article helps me learn Tab Layout.
Easier than the official Android documentation. Thank you.
Left by Kent Lau on Jul 09, 2011 7:42 AM

# re: Android - Switching Activities with a Tab Layout
Requesting Gravatar...
Hi there,

I'm doing something similar to these tutorial but the thing is i'm switching from an activity with just linearlayout to an activity with a tab layout. On their own, when i do a switching activity from linearlayout to another and a tablayout on their own, it works.

However, upon combining them, upon clicking the button to switch to the activity to enter the activity with a tablayout there's an error saying "The application TaxiBookingV2(sg.edu.np.TaxiBookingV2) has stopped unexpectedly. Please try again."

Is it possible to switch activities with different layouts? Or is there a few key areas i need to take note?

Please advise, Thank you!
Dan
Left by dan on Jul 15, 2011 5:22 AM

# re: Android - Switching Activities with a Tab Layout
Requesting Gravatar...
It shouldn't be a problem - activities don't care what type of layout the previous or next activity is using.

Have you tried watching the execution using logcat? That will tell you what the actual error is...
Left by Bill on Jul 15, 2011 8:32 AM

# re: Android - Switching Activities with a Tab Layout
Requesting Gravatar...
you have to specify fullpath of second activity file

<activity android:name="ravi.bits.org.Personalinfo"
android:label="Activity 2">
Left by ravi on Nov 06, 2011 3:41 AM

# re: Android - Switching Activities with a Tab Layout
Requesting Gravatar...
It might be a bit old, but Eclipse doesn't get the first

'' TabHost tabHost = getTabLeft(); // The activity TabHost'' (Mine is TabLeft), and wants me to make a new method GetTabLeft, which is at the bottom of the code.

Is this supposed to happen?
Left by bassie1995 on Nov 30, 2011 11:38 AM

# re: Android - Switching Activities with a Tab Layout
Requesting Gravatar...
If your main class doesn't extend TabActivity you'll probably see that error...
Left by Bill on Nov 30, 2011 1:13 PM

# re: Android - Switching Activities with a Tab Layout
Requesting Gravatar...
Does the application TabWidget run on version 4?
It throws error it says unfortunately The application has stopped.can you tell me to run in version 4.0 what modification should be done for both of your app like switching activities between screen also doesn't run.
Left by najia on Dec 12, 2011 12:19 PM

# re: Android - Switching Activities with a Tab Layout
Requesting Gravatar...
Is it possible to work with an activity in each of the fragment under tabs? Because i have problem to work with activity in fragment (in tabs)..
Left by Kamal on Jun 27, 2016 3:58 AM

Your comment:
 (will show your gravatar)


Copyright © Bill Osuch | Powered by: GeeksWithBlogs.net