0

Hello I am using ActionBar tabs to create a tabbed application similar to an iPhone one. The iPhone app has the tabs on the bottom and the action bar menu items on the top. Like this:

iphone app

You see how the "Today" and "Timeline" buttons are on the top of the action bar if we may call it in the iPhone app.

Now what I tried to do showed up like this:

android app

You can see the tabs are on the top and also the only menu in the action bar shown is the menu of the main activity that sets up the ActionBar and Adds the Fragments as Tabs.

How can I show a different menu in each tab and if possible make the Tabs appear top most.

Thanks in advance.

circler
  • 359
  • 1
  • 3
  • 16

1 Answers1

1

Make your activity implement OnTabChangeListener.

Then override the below method as follows on tab change

@Override
 public void onTabChanged(String tabId) {
  // TODO Auto-generated method stub

  invalidateOptionsMenu();
 }

Then you have to create a new menu based on the selected tab as shown below

  @Override
 public boolean onCreateOptionsMenu(Menu menu) {

  final String currentTab = mTabHost.getCurrentTabTag();
  if (currentTab.equals("TimeLine")) {
   getMenuInflater().inflate(R.menu.timeline, menu);
  } else if (currentTab.equals("Calendar")) {
   getMenuInflater().inflate(R.menu.calendar, menu);
  }
  return true;
 }

Handle your menu item selections based on the tab id in the below method

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {

 }
Kris
  • 133
  • 5
  • I am not using tabhost I am using ActionBar.Tab , also onCreateOptionsMenu is called only once in the main tab activity. – circler May 02 '14 at 08:21
  • When we do invalidateOptionsMenu() the onCreateOptionsMenu will be called again to reload the menu. So based on tab change we are reloading the menu to show related options. – Kris May 02 '14 at 08:28
  • thanks i got it to work. How can I make make the tabs appear above the action bar ? – circler May 02 '14 at 08:54
  • I think it is not possible. Action bar position is defaulted to top and I think we cannot bring it below the tabs. I would suggest to keep the tabs at the bottom of the screen similar to IOS design. Even in IOS the toolbar is defaulted to the top so they have kept the tabs at bottom. – Kris May 02 '14 at 09:09
  • How can I keep the tabs on the bottom ? – circler May 02 '14 at 09:15
  • – Kris May 02 '14 at 09:29
  • To make the tab contents appear on top use – Kris May 02 '14 at 09:30
  • I am using ActionBar tabs at the moment, does that mean i have to switch back to TabWidget ? – circler May 02 '14 at 09:34
  • Have a look at this. http://stackoverflow.com/questions/21547290/put-tabs-in-the-bottom-of-screen – Kris May 02 '14 at 09:39
  • You cannot have actionbar tab at bottom. And you also cannot have action bar to appear below the tabs. So you can change it to TabHost if you want tabs at bottom and menu options at top. If you want your calendar to look like the IOS one use TabWidget. – Kris May 02 '14 at 09:41
  • Yes we can add Action bar. TabHost is just to handle tabs it wont interfere with the Action bar. – Kris May 02 '14 at 11:03
  • I tried to add ActionBar after adding a TabHost, do u have an idea how ? – circler May 02 '14 at 11:24