How to display Navigation Drawer below Viewpager tabs? - android

My Navigation Drawer works just fine!!
But i want to modify it such as to display drawer below viewpager tabs.
I have used Navigation Drawer by adding it into my activity and then accessed it but this time the scenario is different and want to display drawer below tabs.
Can i add Navigation Drawer in fragment layout and access it from fragment class or if its not possible / recommended then how can i achieve the same.
Please refer attached screenshot for problem understanding.
Thanks in advance.

You have two way to achieve this.
1. Method One, the sustainable
Use support.v7.Toolbar in your Layout and placing correctly your NavigationDrawer will feet your need. Moreover, it's more durable.
2. Method two: the old one
Use ActionBar Tabs see http://developer.android.com/training/implementing-navigation/lateral.html#tabs
The main part is
final ActionBar actionBar = getActionBar();
...
// Specify that tabs should be displayed in the action bar.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Create a tab listener that is called when the user changes tabs.
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
// show the given tab
}
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
// hide the given tab
}
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
// probably ignore this event
}
};
// Add 3 tabs, specifying the tab's text and TabListener
for (int i = 0; i < 3; i++) {
actionBar.addTab(
actionBar.newTab()
.setText("Tab " + (i + 1))
.setTabListener(tabListener));
}

Related

How to change position of Tab Navigation?

I currently have Tab Based app and the tabs are on bottom. Is there any way to put them up?
Add Tabs To Action Bar
To create tabs using ActionBar, you need to enable
NAVIGATION_MODE_TABS, then create several instances of ActionBar.Tab
and supply an implementation of the ActionBar.TabListener interface
for each one. For example, in your activity's onCreate() method, you
can use code similar to this:
#Override
public void onCreate(Bundle savedInstanceState) {
final ActionBar actionBar = getActionBar();
// Specify that tabs should be displayed in the action bar.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Create a tab listener that is called when the user changes tabs.
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
// show the given tab
}
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
// hide the given tab
}
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
// probably ignore this event
}
};
// Add 3 tabs, specifying the tab's text and TabListener
for (int i = 0; i < 3; i++) {
actionBar.addTab(actionBar.newTab().setText("Tab " + (i + 1)).setTabListener(tabListener));
}
}
How you handle the ActionBar.TabListener callbacks to change tabs
depends on how you've constructed your content. But if you're using
fragments for each tab with ViewPager as shown above, the following
section shows how to switch between pages when the user selects a tab
and also update the selected tab when the user swipes between pages.
From Docs.

How to refresh the content of a tab in an actionBar (Android)?

Here the summary of my 'project' on Android 4.x and the problem I can't solve:
i have an actionBar with 2 tabs (i know it is deprecated):
...
Fragment fragmentTab1 = new FragmentTab1();
Fragment fragmentTab2 = new FragmentTab2();
Fragment fragmentTab3 = new FragmentTab3();
ActionBar.Tab tab1, tab2;
ActionBar actionBar = getActionBar();
tab1 = actionBar.newTab().setText("tab1");
tab2 = actionBar.newTab().setText("tab2");
tab1.setTabListener(new MyTabListener(fragmentTab1));
tab2.setTabListener(new MyTabListener(fragmentTab2));
actionBar.addTab(tab1);
actionBar.addTab(tab2);
...
I would like to change the fragment of a tab and refresh what the user sees, doing that in a method (not only when the tab is (re)selected).
It sounds simple, but impossible to find a easy way to do that.
After many fails, this is what I try (i remove the tab and add it with a new fragment):
void myMethod () {
getActionBar().removeTabAt(0);
tab1 = actionBar.newTab().setText("tab3");
tab1.setTabListener(new MyTabListener(fragmentTab3));
getActionBar().addTab(tab1, 0);
...
And then this awful thing to desesperatly try to update what is seen...
...
getActionBar().setSelectedNavigationItem(tab1.getPosition()+1);
getActionBar().setSelectedNavigationItem(tab1.getPosition());
}
Everything goes as wanted, except that the reselected tab1 is empty... :(
If I select with my finger tab2 then tab1 (so manually in place of programmaticaly), then tab1 appears as wanted...
So, how can I change programmaticaly the content of a tab and refresh what is seen in an actionBar?
Already a big thanks for your time!
You should depend on TabListener methods, don't do getActionBar().setSelectedNavigationItem(). There are good code samples on the Internet.
1) Google webpage # Creating Swipe Views with Tabs. Code snippet:
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
// show the given tab
}
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
// hide the given tab
}
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
// probably ignore this event
}
};
Notes: Refresh your data in onTabSelected(). You may check for tags or text in tab parameter.
2) Another good link for you # Android Fragment Tabs Example. Code snippet from the link:
public class TabListener implements ActionBar.TabListener {
private Fragment fragment;
public TabListener(Fragment fragment) {
this.fragment = fragment;
}
// When a tab is tapped, the FragmentTransaction replaces
// the content of our main layout with the specified fragment;
// that's why we declared an id for the main layout.
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
ft.replace(R.id.activity_main, fragment);
}
Notes: Again, refresh your data in onTabSelected(). I have to warn you that TabListener is deprecated in the new Lollipop API.
EDIT:
Sample code to set Tabs to the correct Fragments.
// Setting tab listeners.
bmwTab.setTabListener(new TabListener(bmwFragmentTab));
toyotaTab.setTabListener(new TabListener(toyotaFragmentTab));
fordTab.setTabListener(new TabListener(fordFragmentTab));
Good luck and have fun...

Drawer navigation + tab navigation having too many tabs

Im trying to Combine drawer navigation and tab navigation together. I have successfully combined the 2. When i launched the app for first time, everything works fine. However, after I click on the drawer item and back to the tabs fragments, there are too many tabs added. I tried to limit the number and it did not work. Also, when I open the other fragments in the drawer item, the tabs still remains.
here's some pictures to show
when I first open the app
after I open the drawer
When I back to the first fragment again
Here's my code for the tabs fragment's on createview
private ActionBar actionBar;
private String[] tabs={ "1", "2", "3","4" };
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.activity_home, container, false);
mSectionsPagerAdapter = new SectionsPagerAdapter(
getChildFragmentManager());
mViewPager = (ViewPager) v.findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
mViewPager.setOnPageChangeListener(
new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// When swiping between pages, select the
// corresponding tab.
getActivity().getActionBar().setSelectedNavigationItem(position);
}
});
actionBar=getActivity().getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
// show the given tab
mViewPager.setCurrentItem(tab.getPosition());
}
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
// hide the given tab
}
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
// probably ignore this event
}
};
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(tabListener));
}
return v;
}
I think its the
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(tabListener));
part that makes this happened , can anyone help me how to fix it?
You must call actionBar.removeAllTabs() before adding tabs...because you didn't call actionBar.removeAllTabs() they cummulated (4+4)...
P.S. Please don't use actionbar and navigation modes anymore..Action bar navigation modes are deprecated in Android L
Replace actionBar with toolbar, and replace tabs with the PagerTabStrip or something else...
The onCreateView() method will be called when a frament is attached to an Activity and its view must be created, then the code to add tabs to ActionBar will be called more than once, and this cause your problem.
Since ActionBar is belongs to your Activity, not your Fragment, you'd better add tabs to it in your Activity, move the following code to your Activity should help:
private ActionBar actionBar;
private String[] tabs={ "1", "2", "3","4" };
actionBar=getActivity().getActionBar(); // remove getActivity().
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
// show the given tab
// This line need to be changed, you can make a public method in
// your fragment which set the current item of ViewPager, and
// call the method in the Activity.
mViewPager.setCurrentItem(tab.getPosition());
}
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
// hide the given tab
}
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
// probably ignore this event
}
};
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(tabListener));
}

Tabs Not Styled

I want to make 2 tabs both contain fragments and have swipe functionality. I have got everything working however the tabs are not styled.
I want to use the holo light theme and have defined this in my manifest like so...
<application android:icon="#drawable/icon" android:label="#string/app_name" android:theme="#android:style/Theme.Holo.Light">
What is the problem?
Take a look at this example : https://developer.android.com/training/implementing-navigation/lateral.html
As for customizing you can use the style generator download the file and copy it into your project its an easy way to create the basics.
http://jgilfelt.github.io/android-actionbarstylegenerator/
#Override
public void onCreate(Bundle savedInstanceState) {
final ActionBar actionBar = getActionBar();
...
// Specify that tabs should be displayed in the action bar.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Create a tab listener that is called when the user changes tabs.
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
// show the given tab
}
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
// hide the given tab
}
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
// probably ignore this event
}
};
// Add 3 tabs, specifying the tab's text and TabListener
for (int i = 0; i < 3; i++) {
actionBar.addTab(
actionBar.newTab()
.setText("Tab " + (i + 1))
.setTabListener(tabListener));
}
}

Tabhost in the action bar of Honeycomb app?

I have an app (for Honeycomb) with a main activity that shows a sort of dashboard, with three buttons and a title. When the user clicks a button they are taken to a screen where they can enter data and do a calculation. I would like to have two approaches to the calculation in this second ('calculator') activity, and would like to implement this through having two tabs in the action bar (only when you are in this calculator activity).
I haven't used a tabhost widget or tabs ever before, so how do I go about having a tab widget in the action bar and changing the rest of the screen (everything but the action bar and system bar) when the other tab is selected?
If someone could point me towards some source code specifically for Honeycomb action bar tabs, that would be great.
Thanks for any help, and have a great day.
See Honycomb Gallery which makes use of action bar tabs.
Tabs in the action bar is a very neat feature. To make this question complete here on SO, I'll provide an example; This code goes in your Activity's onCreate
final ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// remove the activity title to make space for tabs
actionBar.setDisplayShowTitleEnabled(false);
// instantiate some fragments for the tabs
Fragment fragment1 = new Fragment1();
Fragment fragment2 = new Fragment2();
// add a new tab and set its title text and tab listener
actionBar.addTab(actionBar.newTab().setText(R.string.title_tab1)
.setTabListener(new MyTabListener(fragment1)));
actionBar.addTab(actionBar.newTab().setText(R.string.title_tab2)
.setTabListener(new MyTabListener(fragment2)));
You can put the MyTablListener as an inner class of your activity, It could look something like this;
class MyTabListener implements ActionBar.TabListener {
private Fragment fragment;
public MyTabListener(Fragment fragment) {
this.fragment = fragment;
}
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
ft.replace(R.id.activity_new_formula_fragment_content, fragment, null);
}
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
ft.remove(fragment);
}
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
}
}

Categories

Resources