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).
Related
enter image description hereHere, my first tab selection indicator is always visible
I have added TabLayout inside a fragment. But indicator of first tab is always visible even though I have selected other tabs. Please find the screen shot.
It will be of great help if anybody can suggest on what mistake I am making.
Please find the below code:
ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
Fragment frag1 = new MyFragment1();
adapter.addFragment(frag1, getString(R.string.frag_video));
FragmentMediaPhotos frag2 = new MyFragment2();
adapter.addFragment(frag2, getString(R.string.frag_photo));
FragmentMediaMusic frag3 = new MyFragment3();
adapter.addFragment(frag3, getString(R.string.frag_audios));
mViewPager.setAdapter(adapter);
mTabLayout.setupWithViewPager(mViewPager);
After this setting three layout like this:
TextView tabOne = (TextView) LayoutInflater.from(mContext).inflate(R.layout.layout_tab_text_view, null);
tabOne.setText("Video");
mTabLayout.getTabAt(0).setCustomView(tabOne);
My activity was extended from BaseActivity and I kept BaseActivity as abstract.
Keeping BaseActivity abstract caused the issue.
Navigation drawer contains 4 items and each item contains 4 actionbar tabs ,while switching between menu items means if i click on menu item 2 then number of actionbar items changing to 8 and if i click on menu item3 then number of actionbar tabs changing to 12 ,how o stop this repeation of tabs.here is my code
public class TopicsFragment extends Fragment {
public TopicsFragment() {
}
// Declare Tab Variable
ActionBar.Tab AllTopics, NewContent, StaffPicks, Popular, Recommended;
Fragment fragmentTab1 = new FragmentTab1();
Fragment fragmentTab2 = new FragmentTab2();
Fragment fragmentTab3 = new FragmentTab3();
Fragment fragmentTab4 = new FragmentTab2();
Fragment fragmentTab5 = new FragmentTab1();
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup tabs,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_topics, tabs, false);
ActionBar actionBar = ((ActionBarActivity) getActivity())
.getSupportActionBar();
// Create Actionbar Tabs
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Set Tab Icon and Titles
AllTopics = actionBar.newTab().setIcon(R.drawable.tab1);
NewContent = actionBar.newTab().setIcon(R.drawable.tab1);
StaffPicks = actionBar.newTab().setIcon(R.drawable.tab1);
Popular = actionBar.newTab().setIcon(R.drawable.tab1);
Recommended = actionBar.newTab().setIcon(R.drawable.tab1);
// Set Tab Listeners
AllTopics.setTabListener(new TabListener(fragmentTab1));
NewContent.setTabListener(new TabListener(fragmentTab2));
StaffPicks.setTabListener(new TabListener(fragmentTab3));
Popular.setTabListener(new TabListener(fragmentTab2));
Recommended.setTabListener(new TabListener(fragmentTab2));
// Add tabs to actionbar
actionBar.addTab(AllTopics);
actionBar.addTab(NewContent);
actionBar.addTab(StaffPicks);
actionBar.addTab(Popular);
actionBar.addTab(Recommended);
return rootView;
}
}
That problem is that you are adding tabs constantly when you go back in your TopicsFragment which will call onCreateView again and executing the adding of tabs to the actionbar thus adding another set of tabs to the current tabs.
solution:
you need to check first if the number of tabs is zero in your actionbar.
sample:
actionBar.removeAllTabs();
if(actionBar.getTabCount() == 0)
{
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Set Tab Icon and Titles
AllTopics = actionBar.newTab().setIcon(R.drawable.tab1);
NewContent = actionBar.newTab().setIcon(R.drawable.tab1);
StaffPicks = actionBar.newTab().setIcon(R.drawable.tab1);
Popular = actionBar.newTab().setIcon(R.drawable.tab1);
Recommended = actionBar.newTab().setIcon(R.drawable.tab1);
// Set Tab Listeners
AllTopics.setTabListener(new TabListener(fragmentTab1));
NewContent.setTabListener(new TabListener(fragmentTab2));
StaffPicks.setTabListener(new TabListener(fragmentTab3));
Popular.setTabListener(new TabListener(fragmentTab2));
Recommended.setTabListener(new TabListener(fragmentTab2));
// Add tabs to actionbar
actionBar.addTab(AllTopics);
actionBar.addTab(NewContent);
actionBar.addTab(StaffPicks);
actionBar.addTab(Popular);
actionBar.addTab(Recommended);
}
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 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'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.