Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25377] Android: ScrollView child percent size should be relative to container size

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2017-10-11T23:56:44.000+0000
Affected Version/sn/a
Fix Version/sRelease 6.3.0
ComponentsAndroid
Labelsandroid, scrollview
ReporterJoshua Quick
AssigneeJoshua Quick
Created2017-10-09T17:00:08.000+0000
Updated2017-10-23T21:07:19.000+0000

Description

*Summary:* On Android, child views that use percent values for their size/positional properties (ex: width, height, top, bottom, etc.) are relative to the size of the scrollable content area when they should be relative to the ScrollView container instead, like iOS. The main issue with this is that as the content area grows in size (say vertically as you add more views), the percentage based properties such as "height" grow as well. This makes it difficult for developers to display child views that 100% fill the ScrollView container to create their own paginated like view. *Steps to Reproduce:*

Run the below code on Android.

Verify that the green "50%" view fills half the window vertically.

Scroll all the way to the bottom.

Verify that the blue "100%" view completely fills the window.

*Test Code:*
var window = Ti.UI.createWindow();
var scrollView = Ti.UI.createScrollView(
{
	layout: "vertical",
	scrollType: "vertical",
	showHorizontalScrollIndicator: false,
	shorVerticalScrollIndicator: true,
	width: Ti.UI.FILL,
	height: Ti.UI.FILL,
//height: "50%", top: 0,
//contentHeight: 5000,
});
scrollView.add(Ti.UI.createLabel(
{
	text: "50%",
	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
	color: "white",
	backgroundColor: "#008800",
	borderColor: "white",
	borderWidth: "1dp",
	width: Ti.UI.FILL,
	height: "50%",
}));
scrollView.add(Ti.UI.createView(
{
	width: Ti.UI.FILL,
	height: "1dp",
	backgroundColor: "black",
}));
scrollView.add(Ti.UI.createLabel(
{
	text: "100%",
	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
	color: "white",
	backgroundColor: "blue",
	borderColor: "white",
	borderWidth: "1dp",
	width: Ti.UI.FILL,
	height: "100%",
}));
window.add(scrollView);
window.open();

Attachments

FileDateSize
Android-Bad.png2017-10-09T17:04:31.000+000026731
Android-Good1.png2017-10-09T17:04:31.000+000027635
Android-Good2.png2017-10-09T17:04:31.000+000026514

Comments

  1. Joshua Quick 2017-10-09

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/9513
  2. Lokesh Choudhary 2017-10-10

    FR Passed for master. Waiting for backport.
  3. Joshua Quick 2017-10-11

    PR (6.3.x): https://github.com/appcelerator/titanium_mobile/pull/9521
  4. Lokesh Choudhary 2017-10-11

    FR passed for backport. PR merged.
  5. Lokesh Choudhary 2017-10-23

    Verified the fix in SDK 7.0.0.v20171023120246 & 6.3.0.v20171018084007. Closing. Studio Ver: 4.10.0.201709271713 OS Ver: 10.12.3 Xcode Ver: Xcode 8.3.3 Appc NPM: 4.2.10-2 Appc CLI: 6.3.0-master.15 Ti CLI Ver: 5.0.14 Alloy Ver: 1.10.6 Node Ver: 7.10.1 Java Ver: 1.8.0_101 Devices: ⇨ google Nexus 5 — Android 6.0.1 ⇨ google Pixel — Android 7.1.1

JSON Source