Reputation: 1169
I have been looking to see if there is any information on how to always display the ActionBar tabs below the ActionBar even when the phone is orientated to landscape. I know that automatically it places the tabs in the ActionBar depending on whether there is enough room on the screen to fit them, but I want them to always be fixed underneath the ActionBar even in landscape. I found a similar question which didn't have a definitive answer: How to display tabs below action bar. I also know that many Google applications, such as; Google Play, Google Music etc implement this type of design pattern, so it is obviously achievable and acceptable as a design pattern.
I am currently using the ActionBarSherlock library to create my sliding tabs navigation and I would really appreciate it if anyone has figured out how to do this themselves. Thanks in advance.
Here is my activity code:
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
viewPager = new ViewPager(this);
viewPager.setId(R.id.pager);
setContentView(viewPager);
tabsAdapter = new TabsAdapter(this, viewPager); // Declares the tabs adapter class with the view pager view
actionBarTabs = getSupportActionBar();
actionBarTabs.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBarTabs.setCustomView(spinnerView);
actionBarTabs.setDisplayShowCustomEnabled(true);
/* Adds fragments to the tabs adapter */
tabsAdapter.addTab(actionBarTabs.newTab().setText("FRAG1"), Fragment_1.class, null);
tabsAdapter.addTab(actionBarTabs.newTab().setText("FRAG2"), Fragment_2.class, null);
tabsAdapter.addTab(actionBarTabs.newTab().setText("FRAG3"), Fragment_3.class, null);
}
And here is my TabsAdapter code:
public class TabsAdapter extends FragmentPagerAdapter implements ActionBar.TabListener , ViewPager.OnPageChangeListener
{
private final Context context;
private final ActionBar actionBar;
private final ViewPager viewPager;
private final ArrayList<TabInfo> tabsList = new ArrayList<TabInfo>();
/**
* TabInfo class
*
* Static class containing the tab information.
*
* @since 1.0
*/
static final class TabInfo
{
private final Class<?> clss;
private final Bundle args;
TabInfo(Class<?> _class, Bundle _args)
{
clss = _class;
args = _args;
}
}
/**
* Tabs adapter overload constructor.
*
* @param fragmentActivity sets the fragment activity to the adapter.
* @param refViewPager sets the viewPager variable.
* @see
* @since 1.0
*/
public TabsAdapter(SherlockFragmentActivity fragmentActivity, ViewPager refViewPager)
{
super(fragmentActivity.getSupportFragmentManager());
context = fragmentActivity;
actionBar = fragmentActivity.getSupportActionBar();
viewPager = refViewPager;
viewPager.setAdapter(this);
viewPager.setOnPageChangeListener(this);
}
/**
* Add tab method to add a tab to the list.
*
* @param tab sets the tab to be added to the tabs in the action bar.
* @param clss sets the class variable in the TabInfo class.
* @param args sets the bundle variable in the TabInfo class.
* @see
* @since 1.0
*/
public void addTab(ActionBar.Tab tab, Class<?> clss, Bundle args)
{
TabInfo info = new TabInfo(clss, args);
tab.setTag(info);
tab.setTabListener(this);
tabsList.add(info);
actionBar.addTab(tab);
notifyDataSetChanged();
}
@Override
public void onPageScrollStateChanged(int state)
{
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
{
}
@Override
public void onPageSelected(int position)
{
actionBar.setSelectedNavigationItem(position);
}
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft)
{
viewPager.setCurrentItem(tab.getPosition());
Object tag = tab.getTag();
for (int i = 0; i<tabsList.size(); i++)
{
if (tabsList.get(i) == tag)
{
viewPager.setCurrentItem(i);
}
}
}
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft)
{
}
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft)
{
}
@Override
public Fragment getItem(int position)
{
TabInfo info = tabsList.get(position);
return Fragment.instantiate(context, info.clss.getName(), info.args);
}
@Override
public int getCount()
{
return tabsList.size();
}
}
Upvotes: 14
Views: 8755
Reputation: 66
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_SHOW_HOME);
actionBar.setLogo(null);
View homeIcon = findViewById(
Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB ?
android.R.id.home : android.support.v7.appcompat.R.id.home);
((View) homeIcon.getParent()).setVisibility(View.GONE);
((View) homeIcon).setVisibility(View.GONE);
Upvotes: 1
Reputation: 2503
I had same issues with landscape mode and I found the solution here: http://andreimihu.com/blog/2013/10/17/android-always-embed-tabs-in-actionbar/
Basically, the writer wants the tab inside actionbar while you and I wants it outside. So, just change the method call to false (code from the above link, but a bit modified):
// This is where the magic happens!
public void forceTabs() {
try {
final ActionBar actionBar = getActionBar();
final Method setHasEmbeddedTabsMethod = actionBar.getClass()
.getDeclaredMethod("setHasEmbeddedTabs", boolean.class);
setHasEmbeddedTabsMethod.setAccessible(true);
setHasEmbeddedTabsMethod.invoke(actionBar, false);
}
catch(final Exception e) {
// Handle issues as needed: log, warn user, fallback etc
// This error is safe to ignore, standard tabs will appear.
}
}
Upvotes: 12
Reputation: 2733
First of all, what you are describing as "many Google applications, such as; Google Play, Google Music etc implement this type of design pattern" are not necessarily navigation tabs related to the ActionBar.
There are a lot of implementations that use a viewPager with a title indicator. Refer to the PagerSlidingTabStrip library for a good implementation.
Also, you should check the official android documentation where it talks in depth about navigation with tabs and shows different ways to obtain it. Check these pages in the documentation: Providing Descendant and Lateral Navigation and Creating Swipe Views with Tabs
Also, there are a lot of answers on this topic on stackoverflow.com. The library I suggested was already mentioned in this answer: https://stackoverflow.com/a/16544501/529138.
Check this question and the related answers as well: Tabs below action bar
These resources should be enough to help you with the desired functionality :)
Upvotes: 3