I'm switching my App's Tab (API 7) to the one's used in the Action Bar Sherlock because of the design, but I don't know how to set this up.
That's how I used to do:
tabH = (TabHost) findViewById(R.id.tabhost);
tabH.setup();
TabSpec espec = tabH.newTabSpec("tabONE");
espec.setContent(R.id.tbhot);
espec.setIndicator("A");
tabH.addTab(espec);
espec = tabH.newTabSpec("tabTWO");
espec.setContent(R.id.tbrecente);
espec.setIndicator("B");
tabH.addTab(espec);
espec = tabH.newTabSpec("tabTHREE");
espec.setContent(R.id.tbcreate);
espec.setIndicator("C");
tabH.addTab(espec);
And now that's what I'm doing:
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
for (int i = 1; i <= 3; i++) {
ActionBar.Tab tab = getSupportActionBar().newTab();
if (i == 1)
tab.setText("A");
else if(i == 2)
tab.setText("B");
else if (i == 3)
tab.setText("C");
tab.setTabListener(this);
getSupportActionBar().addTab(tab);
}
That works, but I don't know how to set the Content, so all tabs have the same thing in it. How do I do it?
Also, my other tab was at the bottom of the layout. Is it possible to set this one at the bottom too? I believe that if I could set the TabHost in the new tab, it will be in the bottom too, so the question is, how to set the tabhost here?
I typically use fragments for the content. You have to implement the ActionBar.TabListener and adjust your content there, but it's pretty easy. You can add all your fragments at the beginning and show/hide them, or replace the current fragment.
Related
I'm trying to apply a custom style to the actionbar tabs, but for now without any success. I know there are many tutorials out there, but can someone explain how it should be done or provide a link to a good tutorial or documentation on how can I implement custom styling.
Here is the code I have:
ActionBar actionBar = getActionBar();
Tab1 = actionBar.newTab().setText("TAB1");
Tab2 = actionBar.newTab().setText("Tab2");
// Set Tab Listeners
Tab1.setTabListener(new TabListener(fragmentTab1));
Tab2.setTabListener(new TabListener(fragmentTab2));
// Add tabs to actionbar
actionBar.addTab(Tab1);
actionBar.addTab(Tab2);
What Im trying to achieve:
Here is a snippet of code I wrote for one of my projects, you should be able to easily adjust it for your own needs!
//#param string - the R.string.name_of_string, I use it for convenience
private ActionBar.Tab createCustomTab(ActionBar actionBar, int string){
View tabView = getLayoutInflater().inflate(R.layout.tab, null);
((TextView) tabView.findViewById(R.id.txt_tab)).setText(string);
//in my case I wanted to center the layout - for some reason certain layout params do not work in the XML,
// (such as centering), so I do that here
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
lp.gravity = Gravity.CENTER;
tabView.setLayoutParams(lp);
return actionBar.newTab().setCustomView(tabView);
}
Let me know if you have any questions!
I have a app that uses ActionBar and Fragment to show several different views in the app. So far I am only showing either a list of items, a photo, a web view... but I want to go further and show in the Fragment a Master/Detail Flow, so that I can have a ListView and DetailView. This is so far a sample code
// ActionBar
ActionBar actionbar = getActionBar();
actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// create new tabs and and set up the titles of the tabs
ActionBar.Tab mFindTab = actionbar.newTab().setText(
getString(R.string.ui_tabname_find));
ActionBar.Tab mChatTab = actionbar.newTab().setText(
getString(R.string.ui_tabname_chat));
ActionBar.Tab mMeetTab = actionbar.newTab().setText(
getString(R.string.ui_tabname_meet));
ActionBar.Tab mPartyTab = actionbar.newTab().setText(
getString(R.string.ui_tabname_party));
// create the fragments
Fragment mFindFragment = new FindFragment();
Fragment mChatFragment = new ChatFragment();
Fragment mMeetFragment = new MeetFragment();
Fragment mPartyFragment = new PartyFragment();
// bind the fragments to the tabs - set up tabListeners for each tab
mFindTab.setTabListener(new MyTabsListener(mFindFragment,
getApplicationContext()));
mChatTab.setTabListener(new MyTabsListener(mChatFragment,
getApplicationContext()));
mMeetTab.setTabListener(new MyTabsListener(mMeetFragment,
getApplicationContext()));
mPartyTab.setTabListener(new MyTabsListener(mPartyFragment,
getApplicationContext()));
// add the tabs to the action bar
actionbar.addTab(mFindTab);
actionbar.addTab(mChatTab);
actionbar.addTab(mMeetTab);
actionbar.addTab(mPartyTab);
How can I create the Master/Detail Flow so that when touch on the corresponding action bar.tab it is shown?
Did you know that you can create stubs for this in the 'New' Menu?
The menu selections: File>New>Android Activity>Master / Detail Flow
I suggest you create an example using this Wizard, and then use it to understand how everything works (this will give you code that uses the proper patterns, and has implemented all the correct code standards).
There is a strange error in my code. I have a TabHost where I am adding a tab dynamically when a link of the WebView. I have tested this code on 4.4.2, it works fine. But on 2.3.3 and 2.3.6 and 2.1, it does not work.
I have customized the theme of the tab with a simple xml file.
All code since the tab number 4 that do not change theme look all white.
private void createTab(String url) {
Log.i(TAG, "createTab");
TabHost tabs = getTabHost();
View view = LayoutInflater.from(tabs.getContext()).inflate(
layouts[layoutTab], null);
layoutTab = (layoutTab + 1) % 4;
TabSpec spec = tabs.newTabSpec(Integer.toString(mTabs.getCounter()));
spec.setContent(new MyTabContentFactory(url));
spec.setIndicator(view);
SingleTab st = new SingleTab(tabs.getCurrentTab(), url, spec);
Log.i(DEBUG, st.toString());
mTabs.getList().add(st);
tabs.addTab(spec);
if (tabs.getTabWidget().getChildCount() < 2)
tabs.getTabWidget().getChildAt(0).setVisibility(View.GONE);
else
tabs.getTabWidget().getChildAt(0).setVisibility(View.VISIBLE);
tabs.setCurrentTab(mTabs.getCounter());
mTabs.incrementCounter();
}
Tab implementation in 2.x is buggy and I had difficulty refresing tab after removing a tab from tabhost. There is a fragment tab host implementation in support library which might suit the need.
I have these 5 tabs and in the first tab/fragment I have a button, I want to be able to switch to another tab by clicking this button. Here's my code which contains the tabs:
actBar = getSupportActionBar();
actBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
secPagerAdapter = new SectionsPagerAdapter(
getSupportFragmentManager());
vPager = (ViewPager) findViewById(R.id.pager);
vPager.setAdapter(secPagerAdapter);
vPager
.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
actBar.setSelectedNavigationItem(position);
}
});
Tab tab = actBar.newTab()
.setIcon(R.drawable.home)
.setTabListener(this);
actBar.addTab(tab, true);
tab = actBar.newTab()
.setIcon(R.drawable.cart)
.setTabListener(this);
actBar.addTab(tab);
tab = actBar.newTab()
.setIcon(R.drawable.users)
.setTabListener(this);
actBar.addTab(tab);
tab = actBar.newTab()
.setIcon(R.drawable.products)
.setTabListener(this);
actBar.addTab(tab);
tab = actBar.newTab()
.setIcon(R.drawable.settings)
.setTabListener(this);
actBar.addTab(tab);
This creates me a pretty nice action bar with tabs and all, and as you see the one with the home drawable has the below code:
actBar.addTab(tab, true);
since it is true, when this activity is opened it starts with this tab. So... I have a button within this tab. When I tap this button, I want it to scroll right through to the third tab which has the users drawable as an icon. I've seen things about tabhost around here and well, if that's the 'only' case, I gotta say, I don't know about tabhost. I tried to change that true boolean to be able to switch between tabs onClick but it didn't work.
Thanks in advance. I'd really appreciate it.
use this inside button click listener
actionBar.setSelectedNavigationItem(tab_position);
I am fairly good in fragments API, I know how to create master/detail pattern on phone/tablet.
But how would I create a different style of navigation in phones and tablets?
The most obvious example would be swiping tabs on the phone and somekind tablet layout with all the fragments layed out inside, no swiping tabs.
Is there some elegant way of doing this other than giant if statement?
//EDIT
So what would you do, as I presumed, is to create create two layouts (phone - view pager / tablet - three static fragments) and in activity's onCreate check for something in the layout to figure out wether youre in phone or tablet. Then just initialize the tabs navigation / or not if youre in tablet. That should work.
CODE SNIPPETS FROM IO 2012 APP
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
FragmentManager fm = getSupportFragmentManager();
mViewPager = (ViewPager) findViewById(R.id.pager);
if (mViewPager != null) {
// Phone setup
mViewPager.setAdapter(new HomePagerAdapter(getSupportFragmentManager()));
mViewPager.setOnPageChangeListener(this);
final ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.addTab(actionBar.newTab()
.setText(R.string.title_my_schedule)
.setTabListener(this));
actionBar.addTab(actionBar.newTab()
.setText(R.string.title_explore)
.setTabListener(this));
actionBar.addTab(actionBar.newTab()
.setText(R.string.title_stream)
.setTabListener(this));
homeScreenLabel = getString(R.string.title_my_schedule);
} else {
//Tablet setup
mExploreFragment = (ExploreFragment) fm.findFragmentById(R.id.fragment_tracks);
mMyScheduleFragment = (MyScheduleFragment) fm.findFragmentById(R.id.fragment_my_schedule);
mSocialStreamFragment = (SocialStreamFragment) fm.findFragmentById(R.id.fragment_stream);
}
}
Any of you guys that already have tabs navigation on phone, please consider implementing this on the tablet, if it works for you design-wise. You already have fragments api ready, so there's no excuse, really.
You could take a look at the 2012 I/O app from Roman Nurik, which switches navigation/layout pretty much with every possible combination of size and orientation;
http://code.google.com/p/iosched/