[TIMOB-12305] Android: Hide the Overscroll effect on Scrollable view
| GitHub Issue | n/a |
| Type | New Feature |
| Priority | High |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2013-02-06T18:15:46.000+0000 |
| Affected Version/s | Release 3.0.0 |
| Fix Version/s | Release 3.1.0, 2013 Sprint 03 API, 2013 Sprint 03 |
| Components | Android |
| Labels | OverScroll, SupportTeam, qe-review, qe-testadded |
| Reporter | Varun Joshi |
| Assignee | Vishal Duggal |
| Created | 2013-01-16T13:43:17.000+0000 |
| Updated | 2014-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
JSON Source
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();Pull pending https://github.com/appcelerator/titanium_mobile/pull/3841
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
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