Android ViewFlipper within TabHost for Tabs with different Views ... and better memory footprint

This article is a follow up of Use Android ActivityGroup within TabHost to show different Activity. As you probably noticed or read in the comments, the provided solution in the last article was less than ideal. Even though it does work, it uses multiple activies and therefor has a bigger memory consumption than necessary.

What happens when you use ActivityGroup with Tabhost

In the previous example we had one Activiy per tab. One tab was even holding two Activies and using ActivityGroup to switch between them. That's a total of five Activites that end up on the activity stack. Also the hierarchy was more nested than needed.

The improvement

So instead of using a Activity per Tab we can display a View in each. Thus we only need one Activity, all the events are caught by the class, so you need to find an ordered way of catching them. My example will implement the OnClickListener.

To keep the example short, we have two tabs. In the first one, there's a ViewFlipper which switches between two TextViews when clicked. In the second tab, there's just a bit of text and a button.

Here's the code:

1. package  com.unitedcoders.android.examples ;
2.  
3. import  android.app.TabActivity ;
4. import  android.os.Bundle ;
5. import  android.view.View ;
6. import  android.view.View.OnClickListener ;
7. import  android.widget.Button ;
8. import  android.widget.TabHost ;
9. import  android.widget.Toast ;
10. import  android.widget.ViewFlipper ;
11.  
12. public class Tabs  extends TabActivity  implements OnClickListener  {
13.  
14.      Button doSomething ;
15.     TabHost tabHost ;
16.     ViewFlipper flipper ;
17.  
18.     @Override
19.      protected void onCreate (Bundle savedInstanceState )  {
20.          super. onCreate (savedInstanceState ) ;
21.         setContentView (R. layout. tablayout_1 ) ;
22.  
23.         doSomething  =  ( Button ) findViewById (R. id. btn_do_something ) ;
24.         doSomething. setOnClickListener ( this ) ;
25.  
26.         flipper  =  (ViewFlipper ) findViewById (R. id. layout_tab_one ) ;
27.         flipper. setOnClickListener ( this ) ;
28.  
29.         tabHost  = getTabHost ( ) ;
30.         tabHost. addTab (tabHost. newTabSpec ( "tab1" ). setIndicator ( "Tab1" ). setContent (R. id. layout_tab_one ) ) ;
31.         tabHost. addTab (tabHost. newTabSpec ( "tab2" ). setIndicator ( "Tab2" ). setContent (R. id. layout_tab_two ) ) ;
32.  
33.         tabHost. setCurrentTab ( 0 ) ;
34.  
35.      }
36.  
37.     @Override
38.      public void onClick ( View v )  {
39.  
40.          // show a toast in second tab
41.          if  (v  == doSomething )  {
42.             Toast. makeText (getApplicationContext ( ),  "doing something", Toast. LENGTH_SHORT ). show ( ) ;
43.          }
44.  
45.          // toggle TextView in first tab
46.          if  (v  == flipper )  {
47.             flipper. showNext ( ) ;
48.          }
49.  
50.      }
51.  
52. }

and the layout that goes with it:

1. <?xml version="1.0" encoding="utf-8"?>
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
3.         android:id="@android:id/tabhost" android:layout_width="fill_parent"
4.         android:layout_height="fill_parent">
5.  
6.          <LinearLayout android:orientation="vertical"
7.                 android:layout_width="fill_parent" android:layout_height="fill_parent">
8.                  <TabWidget android:id="@android:id/tabs"
9.                         android:layout_width="fill_parent" android:layout_height="wrap_content" />
10.                  <FrameLayout android:id="@android:id/tabcontent"
11.                         android:layout_width="fill_parent" android:layout_height="fill_parent">
12.  
13.  
14.                          <ViewFlipper android:id="@+id/layout_tab_one"
15.                                 android:layout_width="fill_parent" android:layout_height="fill_parent">
16.  
17.                                  <TextView android:id="@+id/tabone1" android:layout_width="fill_parent"
18.                                         android:layout_height="fill_parent" android:text="this is a tab one" />
19.                                  <TextView android:id="@+id/tabone2" android:layout_width="fill_parent"
20.                                         android:layout_height="fill_parent" android:text="this is the other tab one" />
21.  
22.                          </ViewFlipper>
23.  
24.  
25.  
26.                          <LinearLayout android:id="@+id/layout_tab_two"
27.                                 android:orientation="vertical" android:layout_width="fill_parent"
28.                                 android:layout_height="fill_parent">
29.                                  <TextView android:id="@+id/textview2" android:layout_width="fill_parent"
30.                                         android:layout_height="wrap_content" android:text="this is a tab two"/>
31.                                  <Button android:id="@+id/btn_do_something" android:text="do something"
32.                                         android:layout_width="fill_parent" android:layout_height="wrap_content"/>
33.  
34.                          </LinearLayout>
35.  
36.                  </FrameLayout>
37.          </LinearLayout>
38.  
39.  
40. </TabHost>

From this UI you can use AsyncTask to do your processing and refresh the UI. This will keep your number of Activities and the memory consumption low.

As a little bonus, here are the screenshots of the hierachy view for the
current example and the previous one.

The code is in the UCdroid project on github. You can run it on your device or emulator.