Android ActionBar backbutton and tabs - android

I want to create an ActionBar and a tabbed navigation like the google+ app.
I used this example as a starting point and now I have a great actionbar:
http://developer.android.com/resources/samples/ActionBarCompat/index.html
I've also included a ViewPager and a TabHost to have tabs and scrolling left/right Fragments.
What i need is to show the back arrow in version prior to honeycomb.
If I set getActionBar().setDisplayHomeAsUpEnabled(true), the arrow is automatically show in version >= honeycomb.
How can I do that in version prior to honey?
What I also want to have is Tabs like the google+ app.
This is how is my tab bar looks:
removed dead ImageShack link
...and this is what i want:
removed dead ImageShack link
I can't find any example to style tab bars like that one.

I would recommend you the ActionBarSherlock for ActionBar compatibility with Android <3. It is a better implementation that the example offered in the developers page.
Using this package, the back arrow will appear when you add to your activity the following line.
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Regarding the Google+ tabs, I have found the widget ViewFlow very useful and looking exactly the same. Moreover, you don't have any backward compatibility issues. Have a look to the CircleFlowIndicator example.

You can use ActionBarSherlock and a ViewPager with ViewPagerIndicator to achieve the desired look. These libraries also work pre ICS.
As miguel.rodelas suggested, use getSupportActionBar().setDisplayHomeAsUpEnabled(true) for the home arrow. In onOptionsItemSelected you can catch it by the id android.R.id.home.

ActionBar actionBar = getActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);
//use your custom xml view here
View actionBarView = getLayoutInflater().inflate(R.layout.action_bar_custom_view, null);
actionBar.setCustomView(actionBarView);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
//your logic for click listner
setListenerForActionBarCustomView(actionBarView);

As stated, download the ActionBarSherlock and import it as a library here
https://api.github.com/repos/JakeWharton/ActionBarSherlock/zipball/4.2.0
Instead of using getActionBar use getSupportActionBar
Download the support library
Instead of Activity, extend your class as SherlockActivity
Same with fragments, use SherlockFragment
Then just copy your code, should work perfectly.

Related

navigation drawer action bar depreciated [duplicate]

Taking a look at the API diff report for the Android "L" preview, I see that all methods related to navigation modes in the ActionBar class (such as setNavigationMode(), addTab(), selectTab(), &c). are now deprecated.
The documentation explains:
Action bar navigation modes are deprecated and not supported by inline
toolbar action bars. Consider using other common navigation patterns
instead.
What is the supposed replacement?
Also, is "inline toolbar action bars" a new concept? I don't think I've heard of it before.
The new Android Design Support Library adds TabLayout, providing a tab implementation that matches the material design guidelines for tabs. A complete walkthrough of how to implement Tabs and ViewPager can be found in this video
Now deprecated: The PagerTabStrip is part of the support library (and has been for some time) and serves as a direct replacement. If you prefer the newer Google Play style tabs, you can use the PagerSlidingTabStrip library or modify either of the Google provided examples SlidingTabsBasic or SlidingTabsColors as explained in this Dev Bytes video.
Now that the Android 5.0 docs are available, we have the official documentation for the Toolbar widget:
A standard toolbar for use within application content.
A Toolbar is a generalization of action bars for use within
application layouts. While an action bar is traditionally part of an
Activity's opaque window decor controlled by the framework, a Toolbar
may be placed at any arbitrary level of nesting within a view
hierarchy.
A Toolbar widget can also be used to replace the action bar:
An application may choose to designate a Toolbar as the action bar for
an Activity using the setActionBar() method.
The deprecation of tabs in the action bar is most probably due to this, since toolbars cannot contain tab themselves.
Also, it's available for previous Android verions via the appcompat library. See this post by Chris Banes for more information. An excerpt:
Android 5.0 introduces a new Toolbar widget. This is a generalization
of the ActionBar pattern but gives you much more control and
flexibility in using it. Toolbar is a view in your hierarchy just like
any other, making it easier to interleave with the rest of your views,
animate, react to scroll events.
It seems like they added a new Class named android.widget.Toolbar that extends ViewGroup. Also they added a new method setActionBar(Toolbar) in Activity. I haven't tested it yet, but it looks like you can wrap all kinds of TabWidgets, Spinners or custom views into a Toolbar and use it as your Actionbar.
The new Toolbar cannot be used for inflating multiple line objects, so it is impossible to add Tabs to it.
If you want to use a Toolbar like a TabWidget you can insert some Tab Objects to it, but only with the old Holo style.
Here there is a custom Library that uses v7 Toolbar like TabWidget with the new Material Design animations, but it uses the same methods from the old ActionBar Tabs, so you can attach your ViewPager to it.
For 'replacement' of deprecated ActionBar, I changed the type of my ActionBar-type variables to PagerTabStrip, as per (old code in comment):
// ActionBar bigActionBar;
PagerTabStrip bigActionBar;
A 'replacement' for ~actionBar's .selectTab(tabindex) was to use my associated ViewPager's .setCurrentItem(int) method, like this (old code in comment):
/*
ActionBar.Tab eventTab = bigActionBar.getTabAt(2);
bigActionBar.selectTab(eventTab);
*/
mViewPager.setCurrentItem(2);
Hope this is helpful.
I had the same problem and this solution suited me quite nicely:
In the layout xml file that contains the viewpager, add the a PagerTabStrip as shown:
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_tab_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#996633"
android:textColor="#CCCCCC"
android:paddingTop="5dp"
android:paddingBottom="5dp" />
To control page titles, add a switch statement to your ViewPager file:
#Override
public CharSequence getPageTitle(int position)
{
switch (position)
{
case 0:
return "Page 1";
case 1:
return "Page 2";
case 2:
return "Page 3";
}
return null;
}
FragmentTabHost is also an option.
This code is from Android developer's site:
/**
* This demonstrates how you can implement switching between the tabs of a
* TabHost through fragments, using FragmentTabHost.
*/
public class FragmentTabs extends FragmentActivity {
private FragmentTabHost mTabHost;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_tabs);
mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
mTabHost.addTab(mTabHost.newTabSpec("simple").setIndicator("Simple"),
FragmentStackSupport.CountingFragment.class, null);
mTabHost.addTab(mTabHost.newTabSpec("contacts").setIndicator("Contacts"),
LoaderCursorSupport.CursorLoaderListFragment.class, null);
mTabHost.addTab(mTabHost.newTabSpec("custom").setIndicator("Custom"),
LoaderCustomSupport.AppListFragment.class, null);
mTabHost.addTab(mTabHost.newTabSpec("throttle").setIndicator("Throttle"),
LoaderThrottleSupport.ThrottledLoaderListFragment.class, null);
}
}
I found these tutorials helpful while putting together an action bar (now the 'tool bar' - argh) that supports sliding tabs with Material Design:
https://www.youtube.com/watch?v=Fl0xMuo10yA
http://www.exoguru.com/android/material-design/navigation/android-sliding-tabs-with-material-design.html
You sort of have to synthesize these resources to match your particular situation. For example, you may not want to manually create the tabs in the same style that the exoguru.com tutorial did.
Well for me to handle the deprecated navigation toolbar by using toolbar v7 widget appcompat.
setSupportActionBar(toolbar);
getSupportActionBar().setSubtitle("Feed Detail");
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//goToWhere
}
});
I think a suitable replacement for when you have three to five screens of equal importance is the BottomNavigationActivity,this can be used to switch fragments.
You will notice a wizard exists for this in Android Studio, take care however as Android Studio has a tendency to produce overly complex boiler plate code.
A tutorial can be found here:
https://android.jlelse.eu/ultimate-guide-to-bottom-navigation-on-android-75e4efb8105f
Another quality tutorial can be found at Android Hive here:
https://www.androidhive.info/2017/12/android-working-with-bottom-navigation/

Android, Tabs without Actionbar

This question has been asked (for example, here Using ViewPager with Tabs without actionBar), however the answer there doesn't work. There's some links to Swipey but unfortunately the link is broken too.
The example from Android site EffectiveNavigation uses Actionbar to host the tab fragment, so obviously if I set a .NoActionBar theme, then there's no host. Any different way? Thanks.
Update screenshot of what I want to create, at the top, there's no actionbar.
Update 2 this is from the google example, there's an actionbar on top (titled "Effective navigation), which I want to get rid of
Solution of your problem is already given in http://developer.android.com/
To disableAction-bar Icon and Title, you must do two things:
setDisplayShowHomeEnabled(false); // hides action bar icon
setDisplayShowTitleEnabled(false); // hides action bar title
Follow The Steps given in Using split action bar
Write Following Code in OnCreate()
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.navigation_drawer);
getActionBar().setDisplayShowHomeEnabled(false); // hides action bar icon
getActionBar().setDisplayShowTitleEnabled(false); // hides action bar title
//rest of your code...
}
After Android updated Actionbar to Toolbar there are many changes in Actionbar Tabs.
Please follow below links to create swipable tabs in Andoid.
Design Structure :
Tabs Design Guidelines
Some of the very useful links are below. Please refer to them.
Download sample zip from below link
http://developer.android.com/samples/SlidingTabsBasic/index.html
Or Refer these links
http://www.android4devs.com/2015/01/how-to-make-material-design-sliding-tabs.html
http://www.exoguru.com/android/material-design/navigation/android-sliding-tabs-with-material-design.html
http://www.truiton.com/2015/06/android-tabs-example-fragments-viewpager/
https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout
This may help you...
You can:
Use a ViewPager with a PagerTabStrip
Use a ViewPager with the TabPageIndicator class from the ViewPagerIndicator library
Use a ViewPager with other third-party tab indicators (e.g., in the "View Pagers" category at the Android Arsenal)
Use a ViewPager and design your own tabbed indicator
Use a FragmentTabHost and skip the swiping part
Along with
getActionBar().setDisplayShowHomeEnabled(false);
getActionBar().setDisplayShowTitleEnabled(false);
Use this as well
getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

ActionBar and ActionBar.Tab and Navigation Drawer android

I am using action bar with help of android-support-v7-appcompat and also using Navigation drawer over it.
In one of my fragment if I use ActionBar.Tabs then the tabs overlaps the navigation drawer and the drawer gets below the ActionBar tabs.
How can I make the action bar like in google play application or Google movie application.
The tabs should also go behind like the fragment. How can I do the same with android-support-v7-appcompat Libs
For Tab bar try ViewPagerIndicator http://viewpagerindicator.com/
This has a very good implementation for tab bar.
When we use default tab bar with actionbar, in landscape mode it will be merged into single row. So its better to use the above library.
I think you would be better off using a library like ViewPagerIndicator. The ActionBar is recognized as decor and is shown over top of the window, and the DrawerLayout is drawn as an object in the window.
Not sure if they're going to fix it in a future revision, but ViewPagerIndicator is pretty easy to set up and customize anyway.
Also, go to this question for better achievement getting-drawerlayout-to-slide-over-the-actionbar
Roman Nurik says that the Navigation Drawer should not be used with the Action Bar tabs.
The discussion is here https://plus.google.com/u/1/116515063230772720916/posts/8dWEkFcbTFX

ActionBarSherlock with translucent tab navigation

In my app I have ActionBar with tabs and I want to make tabs translucent, but not ActionBar. Is it possible to achive this via styles and themes?
You can use custom layout and inflate it to use it as tabs
Please find it here : https://stackoverflow.com/a/10013297/951045
and to hide actionbar use
getSupportActionBar().hide(); // if you are using support lib
otherwise use getActionBar().hide();
You can also hide actionbar by using Theme.Sherlock.NoActionBar (for support lib)

Tabs on Main Section of ActionBar

How can i archive a Tab layout like this in Android ? The Tab Navigation is part of that
Main ActionBar and is not below. PS: Im using ActionBar Sherlock
At the moment is just do:
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
But i want a look like this:
Thanks for help,
Kitesurfer
I don't recommend doing this but you could override the ActionBar and ABS styles:
<bool name="abs__action_bar_embed_tabs">false</bool> //for ActionBarSherlock
<bool name="action_bar_embed_tabs">false</bool> //for default ActionBar
Tab will be displayed in actions bar but only if action bar has space. When you are in landscape mode your tabs will move to action bar because in landscape mode action bar has more room.
From this thread. On the topic of overriding the Action Bar tab functionality.
Jake Wharton
I am obligated to tell you this is probably a Bad Idea™ and I don't recommend it. When you fight the platform you almost always end up losing.
I am inclined to agree about fighting the platform. Instead I opted to abandon the stock tab navigation (from both the android platform and ABS library) and instead wrote a layout that looks basically the same as the tabs, and used it as a custom view, applying it using ActionBar.setCustomView(View) and ActionBar.setDisplayShowCustomEnabled(true) methods.
This uses the ActionBar api in the standard way (ie. Not fighting the platform) and, as is pointed out in that thread, the tab view is simply a LinearLayout.
Try this. This implements a method that will let you select whether you want the tabs in a separate row or in the top row, regardless of screen orientation.
For those who are using this code with the native ActionBar, simply omit the if (actionBar instanceof ActionBarWrapper) and the block underneath it.
Bear in mind, though, that this is somewhat of a hack and might break in future Android versions.

Categories

Resources