Understanding Titanium : Handling the Android back button (Part 1)

Titanium mobile allows you to develop without worrying about native code, but that doesn’t mean that you should ignore native user expectations! The Android back button is a core piece of native android look and feel, and while users probably won’t notice when back behavior is done well, they’ll definitely notice when it’s done poorly. In this article, we’ll go through some tips and tricks that the Shockoe team and I have found useful for providing quick, intuitive, and maintainable android back behavior, and construct a simple application implementing these behaviors.

Treat your views like a stack

Or rather, maintain a stack of back behaviors that manage your view hierarchy. Users expect for the android back button to ‘undo’ their last major change in the app’s state, and using a callback stack is a very easy way to keep track of all of your user’s actions, in order. With this in mind, we can set up our app to handle back button presses gracefully from the first window.

app.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

//create a normal JavaScript array to use as the Android back stack

varbackStack=[];

//create the root window

varrootWin=Ti.UI.createWindow({

width:Ti.UI.FILL,

height:Ti.UI.FILL,

backgroundColor:'white',

title:'Android back test!',

//exit the app when this window closes

exitOnClose:true

});

//add an event to handle android back presses

rootWin.addEventListener('androidback',function(evt){

//get the back callback to use next

varcallback=backStack.pop();

if(callback){

//if we have a valid callback, execute it

callback();

}else{

//otherwise, close the app

rootWin.close();

}

});

rootWin.open();

This sets up your app to maintain a list of back behaviors, and once they have been exhausted close the app. Now let’s try adding another view.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

//put a button to open another view on the root window

varopenButton=Ti.UI.createButton({

width:Ti.UI.SIZE,

height:44,

backgroundColor:'#f47b2a',

color:'white',

title:'Open up a view!'

});

rootWin.add(openButton);

//create a new view on button press

openButton.addEventListener('click',function(){

//create the child view and add it to the root window

varchildView=Ti.UI.createView({

width:Ti.UI.FILL,

height:Ti.UI.FILL,

backgroundColor:'#eeeeee'

});

childView.add(Ti.UI.createLabel({

text:'Press the android back button to close'

}));

rootWin.add(childView);

//and register a back callback

backStack.push(function(){

rootWin.remove(childView);

});

});

And that’s it! Our simple little demo app is now set up to gracefully and consistently handle android back behaviors for a simple view hierarchy. Handling more complex view hierarchies will obviously require more complex android back handlers, we’ll go over handling the android back button in more complex apps in the next entry in this series.