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

by Nico Heid on Sat, 10/16/2010 - 14:56

android
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:

package com.unitedcoders.android.examples;
 
import android.app.TabActivity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TabHost;
import android.widget.Toast;
import android.widget.ViewFlipper;
 
public class Tabs extends TabActivity implements OnClickListener {
 
    Button doSomething;
    TabHost tabHost;
    ViewFlipper flipper;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tablayout_1);
 
        doSomething = (Button) findViewById(R.id.btn_do_something);
        doSomething.setOnClickListener(this);
 
        flipper = (ViewFlipper) findViewById(R.id.layout_tab_one);
        flipper.setOnClickListener(this);
 
        tabHost = getTabHost();
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("Tab1").setContent(R.id.layout_tab_one));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("Tab2").setContent(R.id.layout_tab_two));
 
        tabHost.setCurrentTab(0);
 
    }
 
    @Override
    public void onClick(View v) {
 
        // show a toast in second tab
        if (v == doSomething) {
            Toast.makeText(getApplicationContext(), "doing something", Toast.LENGTH_SHORT).show();
        }
 
        // toggle TextView in first tab
        if (v == flipper) {
            flipper.showNext();
        }
 
    }
 
}

and the layout that goes with it:

<?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">
 
 
                        <ViewFlipper android:id="@+id/layout_tab_one"
                                android:layout_width="fill_parent" android:layout_height="fill_parent">
 
                                <TextView android:id="@+id/tabone1" android:layout_width="fill_parent"
                                        android:layout_height="fill_parent" android:text="this is a tab one" />
                                <TextView android:id="@+id/tabone2" android:layout_width="fill_parent"
                                        android:layout_height="fill_parent" android:text="this is the other tab one" />
 
                        </ViewFlipper>
 
 
 
                        <LinearLayout android:id="@+id/layout_tab_two"
                                android:orientation="vertical" android:layout_width="fill_parent"
                                android:layout_height="fill_parent">
                                <TextView android:id="@+id/textview2" android:layout_width="fill_parent"
                                        android:layout_height="wrap_content" android:text="this is a tab two" />
                                <Button android:id="@+id/btn_do_something" android:text="do something"
                                        android:layout_width="fill_parent" android:layout_height="wrap_content" />
 
                        </LinearLayout>
 
                </FrameLayout>
        </LinearLayout>
 
 
</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.

Comments

Pingback
Use Android ActivityGroup within TabHost to show different A (not verified) - Sat, 10/16/2010 - 15:46

[...] there is an updated version to this article with some improvements. please also read: Android ViewFlipper within TabHost for Tabs with different Views ... and better memory footprint. [...]

Pingback
Twitter Trackbacks for Android ViewFlipper within TabHost f (not verified) - Tue, 10/19/2010 - 06:42

[...] Android ViewFlipper within TabHost for Tabs with different Views ... and better memory footprint | u... united-coders.com/nico-heid/android-viewflipper-w...-for-tabs-with-different-views-and-better-memory – view page – cached Android ViewFlipper within TabHost for Tabs with different Views ... and better memory footprint Tweets about this link [...]

Pingback
Android UI testing with robotium | united-coders.com (not verified) - Sun, 10/31/2010 - 12:46

[...] will base this post on the last article: Android ViewFlipper within TabHost for Tabs with different Views ... and better memory footprint, where we had a TabHost and a ViewFlipper. To test that our example is still working, we have to [...]

Thanks for your post. As we
reddy (not verified) - Mon, 11/01/2010 - 13:36

Thanks for your post.

As we used in activitygroup can we use different activities in viewflipper.

For example in Tab A , I have a button if i click on button am moving to other activity.
and in that activity if i click on button than i have to move to other activity, i mean to say is can we use intents.

I hope u r clear with my problem.

Please do the needful.

Thanks.

of course you can
Nico Heid - Mon, 11/01/2010 - 17:34

yes that's possible.
use your button to start a new intent. all you need to do is catch the button by its id and start a new intent.

like this:

   @Override
    public void onClick(View v) {
 
        // start new intent on button clicked
        if (v == yourButton) {
            Intent intent = new Intent(context, YourIntent.class);
            startActivity(intent);
        }
}

but ,if we start a new
Anonymous (not verified) - Wed, 11/17/2010 - 02:45

but ,if we start a new activity ,the Tab Layout is no longer visible again,right?

kind of true
Nico Heid - Wed, 11/17/2010 - 16:39

yes, the idea is, as long as you want to stay in the tab layout, just use this one activity.
but if you really have to move to another activity, you can still use the same layout and use inheritance to simplify. but i do not see a point where this would be necessary at the moment. maybe you have something more specific in mind.

Tabhost within viewflipper
googlelight (not verified) - Sat, 11/20/2010 - 22:15

Hi , thanks a lot for your tutorial , it has been verry helpful ,however i 'm kind stuck , i'am new to android and i'am trying to make a tabhost inside a view flipper but it can't seem to work , i 've tried so many things without any success ;

if u can give me an example using a tabhost inside a viewflipper i would be verry greatful ;

Unwanted breakout of tab-host
marsbear (not verified) - Thu, 12/09/2010 - 15:54

You can implement startActivityFromChild() in your ActivityGroup which enables you to intercept all Intent-calls from activities within your ActivityGroup. This method is pretty straight forward. You have to manually keep track of your history tho.

Best regards
Marc

Forgot to mention that you
marsbear (not verified) - Thu, 12/09/2010 - 19:39

Forgot to mention that you can refire intercepted intents inside your ActivityGroup so that they will display in yout tab-window, too. Maybe you should check for the intent-flag new-task as you usually want to let them break out your tab-window (e.g. if you open the brwoser from within your app).

tab after button click
ramisetty srinivasa rao (not verified) - Thu, 07/21/2011 - 10:47

i want to get the tab screen after button click of first screen

switching tabs
Nico Heid - Sat, 08/27/2011 - 05:54

TabHost has the method
setCurrentTab
so you can switch to a different tab after the event.

How are we supposed to manage
Anonymous (not verified) - Thu, 08/25/2011 - 06:47

How are we supposed to manage StartActivityForResult by using ActivityGroups in Tab??

stackoverflow should help
Nico Heid - Sat, 08/27/2011 - 05:57

i think this could help you: http://stackoverflow.com/questions/2497205/how-to-return-a-result-starta...

ListView in a TabView
martin (not verified) - Wed, 12/08/2010 - 14:57

I followed your improved version, but now I'm stuck again. How can I use ListView in one of the tabs when everything is in one class and it extends TabActivity, and I also need to extend ListActivity to be able to use a List. As you know, I can only extend one class at the time. How can I solve this?

Thanks in advise!
(Please send me an e-mail when you replay :-)

Thank you...
Vedovelli (not verified) - Tue, 02/15/2011 - 23:38

thanks
ezhil (not verified) - Mon, 03/14/2011 - 10:15

it so useful and clearly thanks

I need your help.
batur (not verified) - Tue, 11/29/2011 - 07:32

Hi i am oldies programmer but new for android. I need to call some child view from the main xml's layout. For example you have button on your main page when you click to button i wan't to open another view let say dateview. and you have another button on this page. Question is where can i put Onclik listener for this button. Also i need when click to last button active view must be cloase and back to the main page. Thank you very much.

Query for Textview
Anonymous (not verified) - Wed, 03/21/2012 - 04:47

I am gone through your code
I am facing error..if I want to display Text name that we used with the viewflipper individual .

you have , I already posted this question on stackoverflow .if possible please guide me for that.

http://stackoverflow.com/questions/9799189/toast-string-display-object-i...

issus viewflipper with tabHost
Alpha (not verified) - Wed, 03/28/2012 - 10:22

Hi , I need your Help , I have a viewFlipper in ActivityGroup that implement OnGestureListener , but onFling is not working for me , because of tabhoust i think ! .