Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-25377

Android: ScrollView child percent size should be relative to container size

    Details

    • Story Points:
      5
    • Sprint:
      2017 Sprint 20 SDK, 2017 Sprint 21 SDK

      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:

      1. Run the below code on Android.
      2. Verify that the green "50%" view fills half the window vertically.
      3. Scroll all the way to the bottom.
      4. 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

          Activity

            People

            • Assignee:
              jquick Joshua Quick
              Reporter:
              jquick Joshua Quick
              Reviewer:
              Gary Mathews
            • Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-5865
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code