Implementing Pull to refresh like in Facebook mobile app for ANDROID using Titanium

Pull to Refresh header (like in Facebook mobile app and famous Twitter client Tweetie) is an innovative and pleasant way of Refreshing the contents. There are many alternatives to have this kind of interface. Like for iOS, one is precisely described HERE

However, above procedure works for iOS only. So, here we discuss an alternative for ANDROID. We'll be using a scrollview to implement this.

1.) First of all we need to create a scrollView as follows:

var scrollView = Ti.UI.createScrollView({
			contentHeight : 'auto',
			layout : 'vertical',
			showVerticalScrollIndicator: true
			});

Above code creates a default scrollView. All the items which are to refreshed like table, labels, fields etc. should be placed inside this scrollView.

2.) Now, we need to create a view (say tableHeader) which sits on the top of the scrollview. This tableHeader will contain an Arrow icon which rotates when user pulls the scrollview to a certain point, a Status Label, indicating the text either PULL TO REFRESH or RELEASE TO RELOAD accordingly.

var tableHeader = Ti.UI.createView({
			width: '100%',
			height: '60dp',
		});

		var arrow = Ti.UI.createView({
			backgroundImage : "/images/redArrow.png",       //your custom image path here.
			width : '23dp',
			height : '40dp',
			bottom : '10dp',
			left : '25dp'
		});
		tableHeader.add(arrow);
		
		var statusLabel = Ti.UI.createLabel({
			text : 'Pull To Refresh',
			textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
			bottom : '30dp',
			height : "auto",
			font : {
				fontSize : '11sp',
				fontWeight : "bold"
			}
		});
		tableHeader.add(statusLabel);

		scrollView.add(tableHeader);	

3.) The next step is to initialize the position of tableHeader i.e. it needs to be Hidden when the page loads initially and should only be visible when scrollview is Pulled Down. So, we use the scrollView scrollTo(x,y) property as follows:

var init = setInterval(function(e){
			if (offset==60) {
				clearInterval(init);
			}
			scrollView.scrollTo(0,60);
		},100);

4.) Now, we need to create the animation affects (rotating arrows). The basic idea is to get the offset of Y coordinate to detect how far the scrollview is pulled.

                var offset = 0;
		scrollView.addEventListener('scroll', function(e) {
			if (e.y!=null) {
				offset = e.y;
			}
				if (offset <= 5) {
				var t = Ti.UI.create2DMatrix();
				t = t.rotate(-180);
				arrow.animate({
					transform : t,
					duration : 180
				});
				statusLabel.text = 'Release To Reload';
			}
			else if (offset > 5 && offset < 60) {				
				var t = Ti.UI.create2DMatrix();
				arrow.animate({
					transform : t,
					duration : 180
				});
				statusLabel.text = 'Pull To Refresh';
			}
			
		});

As it's clear from the above code snippet, if the offset reaches the value we require, then we start the arrow rotation and change the statusLabel. So, now we have to implement when to reload and when to again HIDE the tableHeader.

5.) Now, the last step is to decide whether to REFRESH the page or just simply scroll back to original positions as to HIDE the tableHeader, after the user has stopped scrolling.

	scrollView.addEventListener('touchend', function() {
			if (offset<=5) {	
				Ti.App.fireEvent('app:refreshContents');    //Your custom event to REFRESH fired here
				scrollView.scrollTo(0,60);
						
			} 
			else if (offset<60)
			 {
				scrollView.scrollTo(0,60);
			} 
		});

The code Ti.App.fireEvent('app:refreshContents') should be replaced by the code which should refresh the scrollView's contents. Use this approach and you are ready to have Pull to refresh.

Ankush Gulati
[email protected]
http://oodlestechnologies.com/