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/
Related
I am currently working on an application with ActionBar tabs inside one of its fragments (main navigation is NavigationDrawer). The fragment's onCreate():
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
actionBar = activity.getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
Resources r = getResources();
//(…) tabNames initialization
adapter = new CustomTabAdapter(getFragmentManager());
}
and onCreateView():
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment, container, false);
viewPager = (ViewPager) rootView.findViewById(R.id.pager);
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(this);
for (String tabName : tabNames) {
actionBar.addTab(actionBar.newTab()
.setText(tabName)
.setTabListener(this));
}
return rootView;
}
There are 4 tabs, each of them with its own Fragment and layout. CustomTabAdapter returns new instance of proper fragment in its getItem(int). There are 4 tabs.
And now my problem is:
I start the application.
I choose this tab fragment from NavigationDrawer list. Everything is working just fine.
I choose another fragment from NavigationDrawer list which means that tab fragment is replaced with it.
I choose tab fragment again. And fragment related to tab that was selected before choosing another fragment from NavigationDrawer list, and one's adjacent to it are not recreated (blank screen under ActionBar tabs). I checked and onCreateView(…) methods of those fragment are not called. So after changing device orientation, or choosing tab not adjacent and this one again proper layout is shown.
How can I make it work as it should (showing proper layout on reentering tab fragment from NavigationDrawer list instead of blank space)? I run out of ideas.
Finally, I found a solution. My CustomTabAdapter was extension of FragmentPagerAdapter. I changed it to be extension of FragmentStatePageAdapter, and now fragments are recreated.
More details in this answer by #Louth.
It takes fragments from cache without recreation
I am trying to create a tabbed activity, and I'm using ViewPager for that (actually, Android Studio created it from template, I didn't even know what ViewPager was). I want to style the tab-bar below (indicated with red "circle"):
I've tried setting styles.xml tried almost everything, but still, nothing applies to that. Here is the code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Set up the action bar.
final ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
// When swiping between different sections, select the corresponding
// tab. We can also use ActionBar.Tab#select() to do this if we have
// a reference to the Tab.
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
});
// For each of the sections in the app, add a tab to the action bar.
for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
// Create a tab with text corresponding to the page title defined by
// the adapter. Also specify this Activity object, which implements
// the TabListener interface, as the callback (listener) for when
// this tab is selected.
actionBar.addTab(
actionBar.newTab()
.setText(mSectionsPagerAdapter.getPageTitle(i))
.setTabListener(this));
}
}
Ironically, the generated code (by Android Studio's latest version) has many deprecated method calls, but I don't want to touch them unless I know what exactly I'm doing. Here is the layout file (activity_main.xml), again, generated by Android Studio:
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/pager"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context="MY_APP_IDENTIFIER"/>
How can I change the colors of the tab bar?
Try using onPageSelected it's probably the simplest way I think. Here is a link.
In tab it looks like below.
But in device it looks fine
..
I am looking like below what the google play contained in phones and tabs as same
this is my oncreate method. I had done scroll tabs with view pager .In devices it fits good but in tabs ?.I know this is action bar design pattern .
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_directory_activity);
final ActionBar actionBar = getSupportActionBar();
actionBar.setIcon(R.drawable.logo);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowHomeEnabled(true);
myDirectoryPagerAdapter = new MyDirectoryAdapter(
getSupportFragmentManager());
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(myDirectoryPagerAdapter);
mViewPager.setOnPageChangeListener(new
ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
});
for (int i = 0; i < myDirectoryPagerAdapter.getCount(); i++) {
actionBar.addTab(actionBar.newTab()
.setText(myDirectoryPagerAdapter.getPageTitle(i))
.setTabListener(this));
}
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
}
It will look below the actionbar in the device because the device does not have much space to show all the tabs so the actionbar will manage on its own to show the tabs and adjust it according to the device size. As you have also displayed a logo in actionbar so it will always switch to below.
That is by default for Tabs from Action bar. It is good thing bcoz it saves some screen space for you.
If you dont want it to be present in the action bar. You need to implement it separately. Use PagerTitleStrip.
Two implementations here:
http://developer.android.com/training/implementing-navigation/lateral.html#PagerTitleStrip
https://github.com/astuetz/PagerSlidingTabStrip
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.