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

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

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

Recycle view adapter in android

By
Recycle view adapter             The   RecyclerView   widget is a more advanced and flexible version of   ListView . This widget is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views. Use the   RecyclerView widget when you have data collections whose elements change at runtime based on user action or network events. The   RecyclerView   class simplifies the display and handling of large data sets by providing: ·          Layout managers for positioning items ·          Default animations for common item operations, such as removal or addition of items You also have the flexibility to define custom layout managers and animations for   RecyclerView   widgets. RecyclerViewFragment.class public class RecyclerViewFragment...
Post a Comment
click here