How to create Android ActionBar with custom view and tabs - android

I want to create tabbed ActionBar (NAVIGATION_MODE_TABS) with custom view (DISPLAY_SHOW_CUSTOM). It should looks like this:
I just need to be able to navigate through the activities via buttons in the top row - as I would do with ActionBar in normal - non tabbed mode, and also be able to switch tabs in second row. If I set ActionBar to be in a tabbed mode, the custom view disappears, it seems that tabbed mode and custom view are mutually exclusive... Is it even possible?
There are more possible ways how to do that without ActionBar. Normally I would create a layout with buttons, include it in the TabActivity (which is now deprecated) and that's all. But I do not feel it would be the best solution, so any help or advice is appreciated.
Thanks in advance.
EDIT: After a little research I found that it works, it is just not gets displayed on my 4 inch screen. However it still does not work as I expected. On wider screens a custom view shows on the right side of the tabs - it is ok, but on the 4 inch phone screens it is not displayed at all.
I think the best solution is to use ActionBarSherlock library (I do not like using deprecated features and my app must work also on pre - sdk11 version devices) and fragments - one for top ActionBar and the second for tabbed view.

The buttons in the top row have to be added as optionMenu items:
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
for (int i = 0; i < menuItems; i++)
{
if (i == 0)
{
menu.add(R.string.home).setIcon(R.drawable.button_home).setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
menu.getItem(0).setOnMenuItemClickListener(this);
}
}
return super.onCreateOptionsMenu(menu);
}
The philosophy of the ActionBar is slightly different then I supposed to be when asking. From the Android developer guide:
When you want to provide navigation tabs in an activity, using the action bar's tabs is a great option (instead of using TabWidget), because the system adapts the action bar tabs for different screen sizes—placing them in the main action bar when the screen is sufficiently wide, or in a separate bar (known as the "stacked action bar") when the screen is too narrow.

Related

Android App with tabs and menu items

I'm trying to implement an application with a specific view. It needs to have a horizontal bar at the top that contains the app icon, and other buttons and spinners. These items must be static and should appear on every page of the app.
Below that horizontal bar will be a Tabbed component, with the tabs being horizontal at the bottom of the page. I can also implement the desired behavior with the tabs on top of the Tabbed component. Each tab will obviously change the fragment being displayed within the tab's frame.
I am working on an implementation that uses the ActionBar and the menu options. However, I can't get the menu options (my buttons and spinners) to appear above the tabs. And I'm not sure if menu options is the right approach. Any ideas?
Silly me! the answer was right there. I simply had to turn the title bar back on (only with no title) and the menu options would appear right into that title bar.
keep in mind that this feature is heavily dependent on the version of android and model of device that you have.
Older phones have a menu button which will bring up the same menu, as do some modern phones (like the galaxy SIII), so, be sure to test this everywhere so you know what the end-user will actually experience.

How to stop ActionBar Tab navigation to display as a spinner when it gets too long?

i have an action bar with a Tab navigation. While running on 3.1 everything was fine, but once i installed the app on a 4.1 device the tabs where forced to be displayed as a spinner, wrecking my layout design.
Looks like the tabs are taking too much space (if i remove some of the fragments everyting looks ok again.
Is there a way to stop this behaviour and display the navigation as tabs again just as in android 3.1? Does anyone know?
thanks!
I found the answer here. Had to set the navigation mode AFTER adding the tabs.
First of, just to clarify: This is not a bug and it works as intended. Reference this discussion on the Google code forums.
However, I came to the solution that if you override:
<bool name="abs__action_bar_embed_tabs">false</bool> //for ActionBarSherlock
<bool name="android:action_bar_embed_tabs">false</bool> //for default ActionBar
You won't have a NAVIGATION_MODE_LIST in portrait mode. However you won't have embedded tabs and if you rotate your screen to landscape it won't work either.
By default you'll have embedded tabs and therefore a NAVIGATION_MODE_LIST on a screen with a width of >480dp.
This behavior occurs (I assume) because the embedded tabs are limited to the width of the ActionBar, so if you override the boolean value it'll have tabs in a separate row and it won't collapse. But unfortunately I can't explain myself why this does not work in landscape.
Sorry, but you can't stop this. This is a feature, not a bug, according to Google. See: http://code.google.com/p/android/issues/detail?id=24439
As I understand you should consider using a ViewPager + PagerTitleStrip if you have many tabs and want to make them scrollable all time.
Here is a quote from ttps://code.google.com/p/android/issues/detail?id=24439#c9:
If your UI contains many tabs to the point where you hit the scrolling
tabs or collapse-to-spinner case regularly, you might consider using a
PagerTitleStrip as an indicator rather than full tabs to present this
info in a less cluttered way. This can be especially useful if the set
of tabs displayed is under user control. Clickable tabs work best when
there is a small, bounded set such as in the YouTube app. Scrolling
tab strips lose one-touch access to any tab, their primary advantage
over a simple title strip. Examples of the PagerTitleStrip style can
be found in the Android Market and Google+ apps.
I would not recommend using tricks as nobody guarantee that tricks will works stable.
If you really want to still use tabs and stop it from collapsing to a spinner, it is technically possible using reflection IF you happen to be setting a customView for the tabs:
View v = <your custom tab view>;
Tab tab = actionBar.newTab().setCustomView(v);
do{
v = (View)v.getParent();
} while (v!=null && !v.getClass().getSimpleName().equalsIgnoreCase("ScrollingTabContainerView"));
if(v!=null) {
try {
Method allowCollapse = v.getClass().getDeclaredMethod("setAllowCollapse", new Class[] { Boolean.TYPE });
allowCollapse.setAccessible(true);
allowCollapse.invoke(v, new Object[]{ false });
} catch (Exception e) {
}
}
If there is not enough space, the tabs will scroll in the ActionBar. The Tabs and any Menu actionItems are given 1/2 the screen width so you can calculate if the tabs will end up scrolling or not and make adjustments to tabs, menu actionItem labels etc or force the tabs into a stacked mode to avoid the scrolling tabs... OR as previously suggested, using the PagerTitleStrip instead.

Android custom action bar with back and next button

I've got a problem. I wanted to create something that looks like this:
action bar
Left icon would be a back button (I mean it would return to previous tab, the left one), right icon would be next button (it would go to next tab, the right one). I wanted also to make it repeatedly so when I'm on tab A (there are for example 3 tabs: A, B, C) and when I use right button, go to B, then C, and then again A and so on. The text in the middle would be a name of a tab. I would also like to make it compatible with earlier versions of android (like 2.something).
To achieve this, you need to implement custom action bar.
And to target devices with lower android versions use support library. Action bar is supported only in android versions 2.1 and above, with the help of the library.
Refer below link for setting up action bar.
https://developer.android.com/training/basics/actionbar/setting-up.html
The below piece of code will help you to get more idea on this.
// Inflate your custom layout
final ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(
R.layout.action_bar,
null);
// Set up your ActionBar
final ActionBar actionBar = getActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(actionBarLayout);
To create above action bar, use relative layout with two image views for direction buttons, and one textview for tabname. For a better design, avoid using tabs in this case. Use Fragments. On each click of the images, just inflate the fragments, each time.
if (openTabIndex=totalNumofTabs-1) {
//go to Tab index 0
} else {
//go to Tab index openTabIndex+1
}
I never worked with tabs before, but this is one if statement that if absent, you cannot do what you want.

android action bar with tabs below the screen

For my application , I'm planning to have a design as this:
http://img811.imageshack.us/img811/7045/problemel.png
-Design needs to have a title bar which is indeed the action bar in android. To overcome the compatibility issues, I used the sherlock action bar which is said to support older versions that dont have action bars. I havent tested yet for the older devices however.
-As far as I know, for navigation , we could rather use tabbed or dropdown list methods. I want to have constant tabs for every page in my app to stand below the page. This reflects the tabbed action bar, however I want it below not just under the action bar. I don't know how but youtube application somehow has it in the middle of the screen (if it's not a custom view). So how do we have tabs positioned in the bottom of the page?
-Also I want to have another menu, whose items depend on the page it's on. But the apperance will be the same for every page. In the picture on the left this menu has buttons as "Bt 1" ,"Bt 2". I dont want to repeat the same xml for every activity page, but I'm not sure how to achieve it without repeating. If the action bar allowed using both navigation tabs and the drop down list, I could put the items of this menu in the dropdown list just as the picture on the right (onto the gray button). But I guess it does not?!
Therefore I have to repeat the menu xml code in every page or is there another smart way?
Any advice will be appreciated.
This can be achieved not with tabs but by adding items to a linear_layout with a gravity of bottom but it is a bad practice as #D_Steve595 stated and should be avoided in android designs.
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);

Make Tabs on ActionBar scroll when reach limit, rather than create a dropdown-list

As the title suggests, I have an Android 4.0 Tablet app, that uses the Actionbar and tab mode.
If I add any more than 4 or 5 tabs to the action bar, a dropdown list is created instead. I have read the documentation, which states, "Note: In some cases, the Android system will show your action bar tabs as a drop-down list in order to ensure the best fit in the action bar."
Was just wondering if it is possible to override the default behavior and get the actionbar to scroll the items? The design document http://developer.android.com/design/patterns/actionbar.html talks about scrollable tabs, but I can't seem to find any information on them other than in the design document.
I have been struggling to get this to work. However, after playing with ActionBarSherlock, the solution is infuriatingly easy. If you download the sample Styled source and look in the MainActivity class, you can see it create and add the tabs, and beneath that:
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
I had called these BEFORE adding the tabs, and my tabs had been turned into a drop-down list. Turns out, all you need to do is call them after adding the tabs instead to keep the scrolling tabs.
Read the "Adding an Action View" section from http://developer.android.com/guide/topics/ui/actionbar.html
An action view is a widget that appears in the action bar as a substitute for an action item's button.
You can use HorizontalScrollView as action view by specifying
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/mytabwidget"
android:title=""
android:icon="#drawable/ic_launcher"
android:showAsAction="always"
android:actionViewClass="android.widget.HorizontalScrollView" />
</menu>
Get reference to this HorizontalScrollView in public boolean onCreateOptionsMenu(Menu menu)
Define a RadioGroup with some RadioButton where each RadioButton when selected, will update its associated tabs contents. Now add this RadioGroup to HorizontalScrollView which you will get in public boolean onCreateOptionsMenu(Menu menu)
You can use selectTab(ActionBar.Tab tab) or some other equivalent method to update tabs contents.
You can change the look of RadioButton by setting android:button to transparent image and then setting some StateListDrawable with states checked, selected and normal..
See below screen I got using this method.
In above image, each RadioButton when checked, selects different tab.
Have you checked out the Honeycomb Gallery sample app in the SDK? It might have what you are looking for. Install it on an ICS non-tablet device to see the scrollable tabs. A tablet has too much screen space for it to scroll.
http://developer.android.com/resources/samples/HoneycombGallery/index.html
The UI works the way it is for a reason. It is extremely confusing to have a scrollable set of tabs. There is a good chance that it won't be clear at all that there are more tabs available on the right, and the user will never know they can scroll the tabs to get to more features.
I recommend sticking with how the platform is designed to work. It generally does things for a reason.

Categories

Resources