Skip to content

Instantly share code, notes, and snippets.

@ricardoalcocer
Last active December 15, 2015 23:19
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save ricardoalcocer/5339699 to your computer and use it in GitHub Desktop.
Save ricardoalcocer/5339699 to your computer and use it in GitHub Desktop.
Android Holo Actionbar Alloy Sample Based on ideas by https://github.com/hoyo/ActionBarSample/tree/master/app
function doClickMenu(evt){
alert(evt.source.title);
}
// we need to do some things to the Window once it is properly instanciated, so we add an event listener to its OPEN event
$.win.addEventListener('open',function(){
var actionBar = $.win.activity.actionBar; // get a handle to the action bar
actionBar.title='My App'; // change the App Title
actionBar.displayHomeAsUp=true; // Show the "angle" pointing back
actionBar.onHomeIconItemSelected = function() { // what to do when the "home" icon is pressed
Ti.API.info("Home icon clicked!");
};
})
// now open the window. The event listener will fire right after this
$.win.open();
"Window": {
backgroundColor: "#fff"
},
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000",
font: {
fontSize: 20,
fontFamily: 'Helvetica Neue'
},
textAlign: 'center'
},
"MenuItem": { // this tells the menu to be part of the actionbar if there's room. Otherwise the options will be available by pressing the hardware menu button
showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM,
},
'#menu1': {
icon: 'images/action_about.png',
title: 'About'
},
'#menu2': {
icon: 'images/action_settings.png',
title: 'Settings'
},
'#menu3': {
icon: 'images/action_about.png',
title: 'About'
},
'#menu4': {
icon: 'images/action_settings.png',
title: 'Settings'
},
'#menu5': {
icon: 'images/action_about.png',
title: 'About'
},
'#menu6': {
icon: 'images/action_settings.png',
title: 'Settings'
}
<Alloy>
<TabGroup id="win">
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window title="Tab 1">
<Label>I am Window 1</Label>
<!-- this menu is styled in such a way that it becomes part of the ActionBar. See the TSS file -->
<Menu id="menu" platform="android">
<MenuItem id="menu1" onClick="doClickMenu" />
<MenuItem id="menu2" onClick="doClickMenu" />
<MenuItem id="menu3" onClick="doClickMenu" />
<MenuItem id="menu4" onClick="doClickMenu" />
<MenuItem id="menu5" onClick="doClickMenu" />
<MenuItem id="menu6" onClick="doClickMenu" />
</Menu>
</Window>
</Tab>
<Tab title="Tab 2" icon="KS_nav_views.png">
<Window title="Tab 2">
<Label>I am Window 2</Label>
</Window>
</Tab>
</TabGroup>
</Alloy>
<!-- you need to add this to your tiapp.xml -->
<android xmlns:android="http://schemas.android.com/apk/res/android">
<tool-api-level>14</tool-api-level>
<manifest>
<application android:theme="@android:style/Theme.Holo.Light"></application>
<!-- You could also use @android:style/Theme.Holo -->
</manifest>
</android>
// this version demonstrates how to specify which menu options you want to always appear on the menu bar
// and which you want to display as additional menu items
"Window": {
backgroundColor: "#fff"
},
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000",
font: {
fontSize: 20,
fontFamily: 'Helvetica Neue'
},
textAlign: 'center'
},
'#menu1': {
icon: 'images/action_about.png',
title: 'About',
showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
},
'#menu2': {
icon: 'images/action_settings.png',
title: 'Menu',
showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
},
'#menu3': {
icon: 'images/action_about.png',
title: 'About',
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER
},
'#menu4': {
icon: 'images/action_settings.png',
title: 'Settings',
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER
},
'#menu5': {
icon: 'images/action_about.png',
title: 'About',
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER
},
'#menu6': {
icon: 'images/action_settings.png',
title: 'Settings',
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER
}
// this version demonstrates how to provide a "software" way of invoking the menu button. This is until
// Ti supports the MenuInflater
function doClickMenu(evt) {
switch(evt.source.title){
case "Menu": // in real life you probably wouldn't want to use the text of the menu option as your condition
var actionBar = $.win.activity;
actionBar.openOptionsMenu();
break;
default:
alert(evt.source.title);
}
}
// we need to do some things to the Window once it is properly instanciated, so we add an event listener to its OPEN event
$.win.addEventListener('open', function() {
var actionBar = $.win.activity.actionBar;
// get a handle to the action bar
actionBar.title = 'My App';
// change the App Title
actionBar.displayHomeAsUp = true;
// Show the "angle" pointing back
actionBar.onHomeIconItemSelected = function() {// what to do when the "home" icon is pressed
Ti.API.info("Home icon clicked!");
};
})
// now open the window. The event listener will fire right after this
$.win.open();
@ricardoalcocer
Copy link
Author

Running in Portrait Mode
Screenshot

Running in Landscape Mode
Screenshot

@ricardoalcocer
Copy link
Author

@ricardoalcocer
Copy link
Author

What Titanium supports as of SDK 3.0
http://docs.appcelerator.com/titanium/latest/#!/guide/Android_Action_Bar

It doesn't support:

* Search widget in the action bar. The Android SearchView, which can be used as an action bar item, is not exposed in the Titanium API.

* Drawer-style navigation is not supported. Only tabs are supported at this time. Depending on screen space and the number of tabs, Android may display the tabs as standard tabs, scrolling tabs, or a drop-down list.

* Contextual action bars are not supported.

* Action providers are not supported.

* Most styling on the action bar must be done using Android themes and styles.

@cbrunnkvist
Copy link

Hey, is there any magic that I need to do in order for the tabs to show inline with the Action Bar like in your landscape screenshot?

@ricardoalcocer
Copy link
Author

As far as I know they will set themselves in the ActionBar when there is no room...the only "magic" I did was turn the phone on its side :) I will check the docs though to see if that's the expected behavior.

@stevoPerisic
Copy link

How would you navigate using the back button in the action bar if you were deeper into a flow? Or is that used only to exit out of the app?

@ricardoalcocer
Copy link
Author

Good point @stevoPersic. In fact, there should not be an "up" button in this example...it's there just to illustrate that you can set it on and off, but in the case of a tabgroup it shouldn't be there.

On Android there is the Back button, provided as hardware or software in case no hardware buttons are available. The ActionBar provides the "up" button, which should move you to the previous screen on the activity stack. Depending on how you structure your app is the use you'll give to the Up and Back buttons. A good and thorough explanation of the Back and Up button behavior can be found at http://www.androiduipatterns.com/2011/12/back-button-androids-achilles-heel.html

@mohamedayed
Copy link

@stevoPerisic
MenuItem
onClick = "clickedSettings"
MenuItem
then u add event listener for this function clickedSettings then we will use this to fire it
Ti.App.addEventListener("ourfiredevent",clickedSettings);
we’ll fire the ourfiredevent event from the settings screen view when the user exits the window
in controller
function clickedSettings(){
Ti.App.fireEvent("ourfiredevent");
var settingsWindow=$.getView(); so we can reference to the view we are in wich is settings view
settingsWindow.close();
}
to this step u get what you want
another case if your settings view screen contains something like let say tableView with rows in it and u want the user to check some switches to delete or edit them or whatever you want
then u can call this function in the function that give you a response that the user complete what he did
you can simply fire this function in the other function ...forgive me for a fast and not organized comment

Special thanks for @ricardoalcocer for inspiring us with this solution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment