Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-12305] Android: Hide the Overscroll effect on Scrollable view

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-02-06T18:15:46.000+0000
Affected Version/sRelease 3.0.0
Fix Version/sRelease 3.1.0, 2013 Sprint 03 API, 2013 Sprint 03
ComponentsAndroid
LabelsOverScroll, SupportTeam, qe-review, qe-testadded
ReporterVarun Joshi
AssigneeVishal Duggal
Created2013-01-16T13:43:17.000+0000
Updated2014-06-19T12:42:48.000+0000

Description

Issue

Regression: With 3.0.0.GA on > Android 3.0 devices, there is a blue overscroll effect on a scrollable view. This did not happen with 2.1.4 SDK.

Sample Code

{noformat} var win = Titanium.UI.createWindow({ backgroundColor : '#444' }); var swiperContainerView = Ti.UI.createView({ height : 100, width : 300, backgroundColor : '#cde', }); // Create a list of label views to swipe var viewList = new Array(); for (i = 0; i < 3; i++) { viewList[i] = Titanium.UI.createLabel({ text : 'labelView ' + (i+1), color : '#000', height : Ti.UI.FILL, textAlign : 'center', }); } // Create swiper an populate with labels swiper = Ti.UI.createScrollableView({ backgroundColor : '#cde', views : viewList, width : Ti.UI.FILL, height : Ti.UI.FILL }); swiperContainerView.add(swiper); win.add(swiperContainerView); win.open(); {noformat}

Steps to Reproduce

1. Run the app and scroll to the end to notice the blue effect.

Comments

  1. Vishal Duggal 2013-02-04

    Test Case
       var win = Titanium.UI.createWindow({
           backgroundColor : 'white'
       });
       var i=0;
       //Scrollable View
       var scrollableView = Ti.UI.createScrollableView({
       	width:'49%',
       	height:'38%',
       	left:0,
       	top:0,
       	backgroundColor:'gray',
       })
       for (i=0;i<5;i++)
       {
       	var container = Ti.UI.createView({});
       	var label = Ti.UI.createLabel({
       		text: 'SCROLLABLE '+i,
       		color:'white'
       	});
       	container.add(label);
       	scrollableView.addView(container);
       }
       
       //ScrollView
       var scrollView = Ti.UI.createScrollView({
       	width:'49%',
       	height:'38%',
       	right:0,
       	top:0,
       	backgroundColor:'gray',
       	layout:'vertical'
       })
       
       for (i=0;i<20;i++)
       {
       	var container = Ti.UI.createView({
       		height:100
       	});
       	var label = Ti.UI.createLabel({
       		text: 'SCROLLVIEW '+i,
       		color:'white'
       	});
       	container.add(label);
       	scrollView.add(container);
       }
       
       //TableView
       var tableView = Ti.UI.createTableView({
       	width:'49%',
       	height:'38%',
       	left:0,
       	top:'40%',
       })
       var data = [];
       for (i=0;i<100;i++)
       {
       	var row = Ti.UI.createTableViewRow({title:'ROW '+i});
       	data.push(row);
       }
       tableView.data=data;
       //WebView
       var webView = Ti.UI.createWebView({
       	width:'49%',
       	height:'38%',
       	right:0,
       	top:'40%',
       	url: 'http://www.google.com'
       });
       
       var b1 = Ti.UI.createButton({
       	left:0,
       	bottom:0,
       	title:'ALWAYS',
       	height:'10%'
       });
       
       var b2 = Ti.UI.createButton({
       	right:0,
       	bottom:0,
       	title:'NEVER',
       	height:'10%'
       });
       
       var b3 = Ti.UI.createButton({
       	bottom:0,
       	title:'CONTENT',
       	height:'10%'
       });
       
       var status = Ti.UI.createLabel({
       	top:'80%',
       	width:Ti.UI.FILL,
       	color:'black',
       	height:'10%'
       })
       
       var updateStatus = function(){
       	status.text = 'CURRENT MODE - SCROLLABLEVIEW: '+scrollableView.overScrollMode+'. SCROLLVIEW: '+scrollView.overScrollMode+'. TABLEVIEW: '+tableView.overScrollMode+'. WEBVIEW: '+webView.overScrollMode;
       };
       
       b1.addEventListener('click',function(){
       	scrollableView.overScrollMode = Ti.UI.Android.OVER_SCROLL_ALWAYS;
       	scrollView.overScrollMode = Ti.UI.Android.OVER_SCROLL_ALWAYS;
       	tableView.overScrollMode = Ti.UI.Android.OVER_SCROLL_ALWAYS;
       	webView.overScrollMode = Ti.UI.Android.OVER_SCROLL_ALWAYS;
       	updateStatus();
       });
       b2.addEventListener('click',function(){
       	scrollableView.overScrollMode = Ti.UI.Android.OVER_SCROLL_NEVER;
       	scrollView.overScrollMode = Ti.UI.Android.OVER_SCROLL_NEVER;
       	tableView.overScrollMode = Ti.UI.Android.OVER_SCROLL_NEVER;
       	webView.overScrollMode = Ti.UI.Android.OVER_SCROLL_NEVER;
       	updateStatus();
       });
       b3.addEventListener('click',function(){
       	scrollableView.overScrollMode = Ti.UI.Android.OVER_SCROLL_IF_CONTENT_SCROLLS;
       	scrollView.overScrollMode = Ti.UI.Android.OVER_SCROLL_IF_CONTENT_SCROLLS;
       	tableView.overScrollMode = Ti.UI.Android.OVER_SCROLL_IF_CONTENT_SCROLLS;
       	webView.overScrollMode = Ti.UI.Android.OVER_SCROLL_IF_CONTENT_SCROLLS;
       	updateStatus();
       });
       win.add(scrollableView);
       win.add(scrollView);
       win.add(tableView);
       win.add(webView);
       win.add(status);
       win.add(b1);
       win.add(b2);
       win.add(b3);
       
       win.addEventListener('open',updateStatus);
       
       win.open();
       
  2. Vishal Duggal 2013-02-04

    Pull pending https://github.com/appcelerator/titanium_mobile/pull/3841
  3. Vishal Duggal 2013-02-06

    Note to QE: We are only controlling the overscroll mode. Not the edge effects on views associated with the overscroll event. Best to run the above test case on a device with API level 3.0 or above. I personally tested this on SIII running 4.1.1
  4. Olga Romero 2013-03-01

    Closing per Vishal. Verified control of overscroll mode with: Titanium Studio, build: 3.0.2.201302191606 Titanium SDK, build: 3.1.0.v20130228214607 Device: Nexus4 Android version 4.2

JSON Source