Android TabBar Like Iphone Issue

Question

I am trying to implement TabBar like Iphone and wanted show the information on ListView and after selecting the City i get another List Containing Things related to that City it opens up in new view but when i call new view it looses the TabBAr and only shows the view, I need know is their any way ** To show the information on next view but the TABBAR should remain at bottom no matter what activity is working **

I got the screen shot for my first Tab (Home Tab)

Where i select the city move on to the next screen with TabBar staying at Bottom, Then to next View then to next and so on till the last screen shot where i have shown a picture.

But i have no idea how should i do it in Android.

How should i show the TabBar on all the view that are in my Home Tab

So far i have this code :

TabView.java

TabHostProvider.java

import android.app.Activity;

  public abstract class TabHostProvider {
public Activity context;

public TabHostProvider(Activity context){
    this.context = context;
}

public abstract TabView getTabHost(String category);
 }

[Tab.java][2]

MyTabHostProvider.java

import android.app.Activity;
import android.content.Intent;
 import android.graphics.Color;
 import android.graphics.drawable.GradientDrawable;

  public class MyTabHostProvider extends TabHostProvider {

private Tab cityTab;
private Tab searchTab;
private Tab mapTab;
private Tab favouriteTab;
private Tab settingTab;

private TabView tabView;
private GradientDrawable gradientDrawable, transGradientDrawable;

public MyTabHostProvider(Activity context) {
    super(context);
    // TODO Auto-generated constructor stub
}

@Override
public TabView getTabHost(String category) {
    // TODO Auto-generated method stub
    tabView = new TabView(context);
    tabView.setOrientation(TabView.Orientation.BOTTOM);
  tabView.setBackgroundID(R.drawable.tab_background_gradient);

    gradientDrawable = new GradientDrawable(
            GradientDrawable.Orientation.TOP_BOTTOM,
            new int[] {0xFFB2DA1D, 0xFF85A315});
    gradientDrawable.setCornerRadius(0f);
    gradientDrawable.setDither(true);

    transGradientDrawable = new GradientDrawable(
            GradientDrawable.Orientation.TOP_BOTTOM,
            new int[] {0x00000000, 0x00000000});
    transGradientDrawable.setCornerRadius(0f);
    transGradientDrawable.setDither(true);

    cityTab = new Tab(context, category);
    cityTab.setIcon(R.drawable.navbar_allnormal);
    cityTab.setIconSelected(R.drawable.navbar_allselected);
    cityTab.setBtnText("City");
    cityTab.setBtnTextColor(Color.WHITE);
    cityTab.setSelectedBtnTextColor(Color.BLACK);

    cityTab.setBtnGradient(transGradientDrawable);
    cityTab.setSelectedBtnGradient(gradientDrawable);
    cityTab.setIntent(new Intent(context, CityActivity.class));

    searchTab = new Tab(context, category);
    searchTab.setIcon(R.drawable.navbar_picturenormal);
    searchTab.setIconSelected(R.drawable.navbar_pictureselected);
    searchTab.setBtnText("Search");
    searchTab.setBtnTextColor(Color.WHITE);
    searchTab.setSelectedBtnTextColor(Color.BLACK);

    searchTab.setBtnGradient(transGradientDrawable);
    searchTab.setSelectedBtnGradient(gradientDrawable);
    searchTab.setIntent(new Intent(context, SearchActivity.class));

    mapTab = new Tab(context, category);
    mapTab.setIcon(R.drawable.navbar_filenormal);
    mapTab.setIconSelected(R.drawable.navbar_fileselected);
    mapTab.setBtnText("Map");
    mapTab.setBtnTextColor(Color.WHITE);
    mapTab.setSelectedBtnTextColor(Color.BLACK);

    mapTab.setBtnGradient(transGradientDrawable);
    mapTab.setSelectedBtnGradient(gradientDrawable);
    mapTab.setIntent(new Intent(context, MapFragment.class));

    favouriteTab = new Tab(context, category);
    favouriteTab.setIcon(R.drawable.navbar_videonormal);
    favouriteTab.setIconSelected(R.drawable.navbar_videoselected);
    favouriteTab.setBtnText("Favourites");
    favouriteTab.setBtnTextColor(Color.WHITE);
    favouriteTab.setSelectedBtnTextColor(Color.BLACK);

    favouriteTab.setBtnGradient(transGradientDrawable);
    favouriteTab.setSelectedBtnGradient(gradientDrawable);
    favouriteTab.setIntent(new Intent(context, FavouritesActivity.class));

    settingTab = new Tab(context, category);
    settingTab.setIcon(R.drawable.navbar_morenormal);
    settingTab.setIconSelected(R.drawable.navbar_moreselected);
    settingTab.setBtnText("Settings");
    settingTab.setBtnTextColor(Color.WHITE);
    settingTab.setSelectedBtnTextColor(Color.BLACK);

    settingTab.setBtnGradient(transGradientDrawable);
    settingTab.setSelectedBtnGradient(gradientDrawable);
    settingTab.setIntent(new Intent(context, SettingsActivity.class));

    tabView.addTab(cityTab);
    tabView.addTab(searchTab);
    tabView.addTab(mapTab);
    tabView.addTab(favouriteTab);
    tabView.addTab(settingTab);

    return tabView;
}

    }

CityActivity.java

public class CityActivity extends Activity {

private final String TAG = CityActivity.class.getSimpleName();
private ListView moreList = null;
private final String[] moreItems = { "Srinagar", "Gulmarg", "Pehlgam", "Jammu", "Leh",
        "Patnitop"};

private TextView tv;
private Button action_button;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    TabHostProvider tabProvider = new MyTabHostProvider(CityActivity.this);
    TabView tabView = tabProvider.getTabHost("City");
    tabView.setCurrentView(R.layout.city);
    setContentView(tabView.render(0));

    moreList = (ListView) findViewById(R.id.moreactivity_list);
    moreList.setAdapter(new MoreCityAdapter(CityActivity.this, moreItems));
    moreList.setOnItemClickListener(new OnItemClickListener() 
    {

        public void onItemClick(AdapterView<?> parent, View view,
                int position, long id) {
            final String activity = moreList.getAdapter().getItem(position).toString().trim();
            Log.d(TAG, "Clicked Item: " + activity);
            tv = (TextView)findViewById(R.id.tv_header_title);
            tv.setText(activity);
              Intent intent = new Intent(CityActivity.this, Second.class);
                startActivity(intent);


    }
});
 }

Second.java

  public class Second extends Activity{

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.city_second);

        Here i need to show the Tab bar with my List View
       How should i get the Tab Bar here and on my following Third,Fourth & Fifth Activity

}
   }

[MoreCityAdapter.java][3]

Answer 1

Please try to implement this project /link in your code . i think it will work for you..You just need to implement Activity Group into your project/code and it will work with the tabs just as you wanted.:)

Answer 2

Which class you need that class name give that tab intent..

   Resources res = getResources(); // Resource object to get Drawables
    TabHost tabHost = getTabHost();  // The activity TabHost
    TabHost.TabSpec spec;  // Resusable 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 intent1 = new Intent().setClass(this, Second.class);
    // Initialize a TabSpec for each tab and add it to the TabHost
    spec = tabHost.newTabSpec("app_name").setIndicator("Places",
                  .setContent(intent1);
    tabHost.addTab(spec);
    tabHost.getTabWidget().getChildAt(0);
    // Do the same for the other tabs
    Intent intent2 = new Intent().setClass(this, Third.class);
    spec = tabHost.newTabSpec("application").setIndicator("City",
                  .setContent(intent2);
    tabHost.addTab(spec);
    tabHost.getTabWidget().getChildAt(1);
    Intent intent3 = new Intent().setClass(this, First.class);
    spec = tabHost.newTabSpec("toplinks").setIndicator("VISTED",
                  .setContent(intent3);
    tabHost.addTab(spec);
    tabHost.getTabWidget().getChildAt(2);
    tabHost.setCurrentTab(0);
}

Tab.xml

       <?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:id="@+id/LinearLayout01" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent"
android:orientation="vertical">
   <TabWidget 
android:id="@android:id/tabs" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content"></TabWidget>
    <FrameLayout 
android:id="@android:id/tabcontent" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent"></FrameLayout>
    </LinearLayout>
    </TabHost>

Let me problem solved or not...

Answer 3

Yes you can doing that

I've doing this by creating a stack for every tab on the TabHost , the stack hold all views, and I used ActivityGroup like that.

1 - Create your Stack Manager

import java.util.Stack;
import android.app.Activity;
import android.app.ActivityGroup;
import android.app.LocalActivityManager;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;

@SuppressWarnings("deprecation")
public class FirstStackManager extends ActivityGroup {

        private Stack<String> MY_STACK;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (MY_STACK == null)
            MY_STACK = new Stack<String>();
        // start default activity
        push("FirstActivity", new Intent(this, FirstActivity.class));
    }

    @Override
    public void finishFromChild(Activity child) {
        pop();
    }

    @Override
    public void onBackPressed() {
        pop();
    }

    public void push(String id, Intent intent) {
        Window window = getLocalActivityManager().startActivity(id,
                intent.addFlags(Intent.FLAG_ACTIVITY_MULTIPLE_TASK));
        if (window != null) {
                MY_STACK.push(id);
            setContentView(window.getDecorView());
        }
    }

    public void pop() {
        if (MY_STACK.size() == 1)
            finish();
        LocalActivityManager manager = getLocalActivityManager();
        manager.destroyActivity(MY_STACK.pop(), true);
        if (MY_STACK.size() > 0) {
            Intent lastIntent = manager.getActivity(MY_STACK.peek())
                    .getIntent();
            Window newWindow = manager.startActivity(
                    MY_STACK.peek(), lastIntent);
            setContentView(newWindow.getDecorView());
        }
    }
}

don't forget to add your FirstStackManager on the Manifest file

2 - On your main activity use the stack like that

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity {

        TabHost tabHost;

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


            tabHost = getTabHost();
        setTabs();
    }

    private void setTabs() {
        addTab("FirstTab", R.drawable.tab_first, FirstStackManager.class);
        addTab("SecondTab", R.drawable.tab_second, SecondStackManager.class);
                /*Other tab*/
    }

    private void addTab(String labelId, int drawableId, Class<?> c) {
        Intent intent = new Intent().setClass(this, c);
        TabHost.TabSpec spec = tabHost.newTabSpec("tab" + labelId);

        View tabIndicator = LayoutInflater.from(this).inflate(
                R.layout.tab_indicator, getTabWidget(), false);
        ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
        icon.setImageResource(drawableId);
        spec.setIndicator(tabIndicator);
        spec.setContent(intent);
        tabHost.addTab(spec);
    }

You can find how to create xmls files here Raised-Center-Tab-in-Android

3 - On your FirstActivity push new view like that

public class FirstActivity extends Activity{

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.first_layout);

      /*push a view on list click listeneer*/

       Intent intent = new Intent();
       intent.setClass(FirstActivity.this, DetailActivity.class);
       FirstStackManager activityStack = (FirstStackManager) getParent();
       activityStack.push("DetailActivity", intent); 

}
   }

4 - On your DetailActivity pop view like that

public class DetailActivity extends Activity{

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.detail_layout);

      /*pop a view on back button click listeneer*/

       FirstStackManager activityStack = (FirstStackManager) getParent();
       activityStack.pop(); 

}
   }

Answer 4

I would suggest you a few ways to integrate this kind of interaction in android app which I can think of.

1. First you can use LIST_NAVIGATION in ActionBar, where you can add all your 'tabs' and use Fragments by adding/removing them depending on user selection. If you want to support old Android Versions from 2.2+ you can use ActionBarSherlock which is a really good implementation of ActionBar API for old versions. You can find examples of List navigation in ActionBar in Gmail app for Android and examples how to achieve this here : ActionBarSherlock.

2. Second way which you can use to achieve something like this is using SlidingDrawer like in Google+, Youtube, Facebook app, which is a nice option too in my opinion. There is a great library for this SlidingMenu.

It depends on the way which you think will be the best way to achieve the thing which you want. And the last thing if you really want to use tabs like IOS I would recommend you to do something like this :

activity_main.xml :

<?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="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"/>

        <FrameLayout
            android:id="@+android:id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

        <TabWidget
            android:id="@android:id/tabs"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"/>

    </LinearLayout>
</TabHost>

MainTabActivity :

public class MainActivity extends SherlockFragmentActivity {

private TabHost mTabHost;
private TabManager mTabManager;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mTabHost = (TabHost) findViewById(android.R.id.tabhost);
    mTabHost.setup();

    mTabManager = new TabManager(this, mTabHost, R.id.realtabcontent);


    TabHost.TabSpec spec = mTabHost.newTabSpec("collections");
    View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_layout, mTabHost.getTabWidget(), false);
    TextView title = (TextView) tabIndicator.findViewById(R.id.title); // tab title
    title.setText(getString(R.string.collection_tab));
    ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);  // tab icon
    icon.setImageResource(R.drawable.ic_tab_collections);
    spec.setIndicator(tabIndicator);
    mTabManager.addTab(spec, MyCollectionList.class, null); // WHERE MyCollectionList is Fragment attached to first tab.

    // MYLIST TAB
    TabHost.TabSpec spec5 = mTabHost.newTabSpec("mylist");
    View tabIndicator5 = LayoutInflater.from(this).inflate(R.layout.tab_layout, mTabHost.getTabWidget(), false); // used for custom design of tab
    TextView title5 = (TextView) tabIndicator5.findViewById(R.id.title); // tab title
    title5.setText(getString(R.string.my_list));
    ImageView icon5 = (ImageView) tabIndicator5.findViewById(R.id.icon); // tab icon
    icon5.setImageResource(R.drawable.ic_tab_mylist);
    spec5.setIndicator(tabIndicator5);
    mTabManager.addTab(spec5, MyList.class, null); // MyList - second Fragment attached to second tab

    // ADD as many tabs as you want


    mTabHost.setCurrentTab(0); // set selected tab

    }

}

and TabManager.class (It's taken from ActionBarSherlock example, a little modifies version) :

import java.util.HashMap;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.widget.TabHost;

/**
 * This is a helper class that implements the management of tabs and all
 * details of connecting a ViewPager with associated TabHost.  It relies on a
 * trick.  Normally a tab host has a simple API for supplying a View or
 * Intent that each tab will show.  This is not sufficient for switching
 * between pages.  So instead we make the content part of the tab host
 * 0dp high (it is not shown) and the TabsAdapter supplies its own dummy
 * view to show as the tab content.  It listens to changes in tabs, and takes
 * care of switch to the correct paged in the ViewPager whenever the selected
 * tab changes.
 */
public class TabManager implements TabHost.OnTabChangeListener {
    private final FragmentActivity mActivity;
    private final TabHost mTabHost;
    private final int mContainerId;
    private int mLastFragmentId;
    private final HashMap<String, TabInfo> mTabs = new HashMap<String, TabInfo>();
    TabInfo mLastTab;

    static final class TabInfo {
        private final String tag;
        private final Class<?> clss;
        private final Bundle args;
        private Fragment fragment;

        TabInfo(String _tag, Class<?> _class, Bundle _args) {
            tag = _tag;
            clss = _class;
            args = _args;
        }
    }

    static class DummyTabFactory implements TabHost.TabContentFactory {
        private final Context mContext;

        public DummyTabFactory(Context context) {
            mContext = context;
        }

        @Override
        public View createTabContent(String tag) {
            View v = new View(mContext);
            v.setMinimumWidth(0);
            v.setMinimumHeight(0);
            return v;
        }
    }

    public TabManager(FragmentActivity activity, TabHost tabHost, int containerId) {
        mActivity = activity;
        mTabHost = tabHost;
        mContainerId = containerId;
        mTabHost.setOnTabChangedListener(this);
    }

    public void addTab(TabHost.TabSpec tabSpec, Class<?> clss, Bundle args) {
        tabSpec.setContent(new DummyTabFactory(mActivity));
        String tag = tabSpec.getTag();

        TabInfo info = new TabInfo(tag, clss, 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.
        info.fragment = mActivity.getSupportFragmentManager().findFragmentByTag(tag);
        if (info.fragment != null && !info.fragment.isDetached()) {
            FragmentTransaction ft = mActivity.getSupportFragmentManager().beginTransaction();
            ft.detach(info.fragment);
            ft.commit();
        }

        mTabs.put(tag, info);
        mTabHost.addTab(tabSpec);
    }

    @Override
    public void onTabChanged(String tabId) {
        TabInfo newTab = mTabs.get(tabId);
        if (mLastTab != newTab) {
            FragmentTransaction ft = mActivity.getSupportFragmentManager().beginTransaction();
            if (mLastTab != null) {
                FragmentManager mManager = mActivity.getSupportFragmentManager();
                if(mManager.getBackStackEntryCount() > 0){
                    mLastFragmentId = mManager.getBackStackEntryAt(0).getId();
                    mManager.popBackStack(mLastFragmentId, FragmentManager.POP_BACK_STACK_INCLUSIVE);
                }
                if (mLastTab.fragment != null) {
                    ft.detach(mLastTab.fragment);
                }
            }
            if (newTab != null) {
                if (newTab.fragment == null) {
                    newTab.fragment = Fragment.instantiate(mActivity,
                            newTab.clss.getName(), newTab.args);
                    ft.add(mContainerId, newTab.fragment, newTab.tag);
                } else {
                    ft.attach(newTab.fragment);
                }
            }

            mLastTab = newTab;
            ft.commit();
            mActivity.getSupportFragmentManager().executePendingTransactions();
        }
        }
    }

Hope this post help you to find the best way to achieve the thing you want! : )

Answer 5

I will suggest you use ActionBar which is designed for that purpose in Android Design Pattern. - TabBarActivity is deprecated http://developer.android.com/reference/android/app/TabActivity.html

More information here: http://www.androiduipatterns.com/2011/12/how-should-android-apps-look-like_16.html

Answer 6

Like already sugested, I would also recomend using the actionbar not only because the TabBarActivity is deprecated, but also because it is its UI design of Android. And a Android user would want a Android like UI and not an iOS one becuase he or she is not used to this kind of workflow.

If you want legecy platforms support I would recommend this library. http://actionbarsherlock.com/ Many apps use this, including whatsapp foursquare and many more.

For your porpuse, you are looking for the pager, do a google search and you will find lots of info in combo with actionbar sherlock. Or look in the samples provided by Actionbar, they have almost all given scenerios in there samples.

Hope this helps.