Skip to main content

Actionbar using Javascript,CSS & XML in Android

By


index.js
JavaScript

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();
index.tss
"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'
}
index.xml
XML
  •  
  •  
<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>
tiapp.xml
XML 

<!-- 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>
version 2.index.tss
// 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
}
version2.index.js
JavaScript
// 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();

Comments

Post a Comment

Popular posts from this blog

Custom camera using SurfaceView android with autofocus & auto lights & more

By
Custom camera using SurfaceView android with autofocus & auto lights & much more /**  * @author Tatyabhau Chavan  *  */ public class Preview extends SurfaceView implements SurfaceHolder.Callback {     private SurfaceHolder mHolder;     private Camera mCamera;     public Camera.Parameters mParameters;     private byte[] mBuffer;     private Activity mActivity;     // this constructor used when requested as an XML resource     public Preview(Context context, AttributeSet attrs) {         super(context, attrs);         init();     }     public Preview(Context context) {         super(context);         init();     }     public Camera getCamera() {        ...
Post a Comment
click here

Bitmap scalling and cropping from center

By
How to Bitmap scalling and cropping from center? public class ScalingUtilities {     /**      * Utility function for decoding an image resource. The decoded bitmap will      * be optimized for further scaling to the requested destination dimensions      * and scaling logic.      *      * @param res      *            The resources object containing the image data      * @param resId      *            The resource id of the image data      * @param dstWidth      *            Width of destination area      * @param dstHeight      *     ...
Post a Comment
click here

Improving Layout Performance

By
Improving Layout Performance Layouts are a key part of Android applications that directly affect the user experience. If implemented poorly, your layout can lead to a memory hungry application with slow UIs. The Android SDK includes tools to help you identify problems in your layout performance, which when combined the lessons here, you will be able to implement smooth scrolling interfaces with a minimum memory footprint. Lessons Optimizing Layout Hierarchies In the same way a complex web page can slow down load time, your layout hierarchy if too complex can also cause performance problems. This lesson shows how you can use SDK tools to inspect your layout and discover performance bottlenecks. Re-using Layouts with <include/> If your application UI repeats certain layout constructs in multiple places, this lesson shows you how to create efficient, re-usable layout constructs, then include them in the appropriate UI layouts. Loading Views On Demand Be...
Post a Comment
click here