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

Get Android phone call history/log programmatically

By
Get Android phone call history/log programmatically To get call history programmatically first add read conact permission in Manifest file : <uses-permission android:name="android.permission.READ_CONTACTS" /> Create xml file. Add the below code in xml file : <Linearlayout android:layout_height="fill_parent"  android:layout_width="fill_parent" android:orientation="vertical"> <Textview android:id="@+id/call" android:layout_height="fill_parent" android:layout_width="fill_parent"> </Textview> </Linearlayout> Now call the getCallDetails() method in java class : private void getCallDetails() { StringBuffer sb = new StringBuffer(); Cursor managedCursor = managedQuery( CallLog.Calls.CONTENT_URI,null, null,null, null); int number = managedCursor.getColumnIndex( CallLog.Calls.NUMBER ); int type = managedCursor.getColumnIndex( CallLog.Calls.TYPE ); int date = managedCur...
1 comment
click here