Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16878] Android: ScrollableView ignores root child view's layout properties

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2018-07-09T23:25:15.000+0000
Affected Version/sRelease 3.2.2
Fix Version/sRelease 7.3.0
ComponentsAndroid
Labelsandroid, parity, scrollableview
ReporterHimanshu Justa
AssigneeJoshua Quick
Created2014-04-22T09:41:41.000+0000
Updated2018-07-09T23:25:19.000+0000

Description

I created a parent view as ScrollableView and gave its width and height as Ti.UI.FILL. Then I created child view giving its width and height as 80%. In iOS simulator I get the expected result, but in android device child view takes the whole view In the attachment I have added my code and also the screenshot from iOS simulator and android device.

Attachments

FileDateSize
android device.png2014-04-22T09:41:41.000+000047491
iOS Simulator Screen shot 19-Apr-2014 12.42.29 AM.png2014-04-22T09:41:41.000+000013318
Screenshot_1477320271.png2016-10-24T14:44:49.000+000025184
TestProjectJS2014-04-22T09:41:41.000+000025
TestProjectTss2014-04-22T09:41:41.000+0000234
TestProjectXML2014-04-22T09:41:41.000+0000419

Comments

  1. Ritu Agrawal 2014-04-22

    [~himanshujusta] It appears you copied .tss file as .xml file as well. I can only see .tss and .js files attached. Please provide the xml file to complete the test case. index.js 
       $.index.open();
    index.tss 
       ".container": {
   	backgroundColor:"white"
   },
   "#parentView": { 
   	backgroundColor:"black",
    	height:Ti.UI.FILL,
    	width:Ti.UI.FILL
    },
   "#childView":{
   	backgroundColor:"cyan", 
     	height:"80%",
     	width:"80%",
     	top:"10%",
     	left:"10%"
     }
  2. Himanshu Justa 2014-04-23

    Following is the xml code. 
       <Alloy>
   	<Window class="container">
   		<ScrollableView id="parentView">
   			<View id="childView"></View>
   		</ScrollableView>
   	</Window>
   </Alloy>
  3. Ritu Agrawal 2014-04-24

    Moving this ticket to engineering as I can reproduce this issue with Android platform. Works as expected on iOS platform.
  4. Himanshu Justa 2014-04-28

    Hi, Can someone let me know whats the status the issue. Im not able to go forward with my work because of this issue.
  5. Shuo Liang 2014-08-11

  6. jithinpv 2014-08-28

    Issue reproduces Titanium SDK version 3.4.0 master, 3.3.0.GA, 3.2.3.GA, 3.2.2.GA Titanium Studio, build: 3.3.0.201407100905 Titanium Command-Line Interface CLI version 3.3.0, Android device : Motorola Moto G, Android version : 4.4.4
  7. Michael Kåring 2016-03-02

    Any followup on this? i have this issue myself now. Titanium SDK 5.1.2.GA Android device: Nexus 6P, Android 6.0
  8. Michael Kåring 2016-03-08

    Is there no easy fix i can do myself? kinda need this fixed
  9. Anna 2016-05-24

    I have the same problem. I need a solution, please.
  10. VINCENZO QUACQUARELLI 2016-06-12

    I need a solution too, please!!!
  11. Gary Mathews 2016-10-24

    This seems to be working on *Titanium SDK 6.1.0* *TEST CASE* 
        var win = Ti.UI.createWindow({backgroundColor: 'grey'}),
        scrollableView = Ti.UI.createScrollableView({
            backgroundColor: 'cyan',
            width: '80%',
            height: '80%',
            top: '10%',
            left: '10%'
        });
    win.add(scrollableView);
    win.open();
    !Screenshot_1477320271.png|thumbnail!
  12. Gary Mathews 2016-10-24

    Resolving as invalid.
  13. Joshua Quick 2017-12-21

    I have verified that this is indeed a bug on Android. It's an issue with the child views added to the ScrollableView. The top-most child view's width/height/top/bottom/left/right properties are ignored. *Reproducible Case:* The below works fine on iOS, but shows the wrong results on Android. 
        var window = Ti.UI.createWindow();
    var scrollableView = Ti.UI.createScrollableView(
    {
    	views:
    	[
    		Ti.UI.createView({ backgroundColor: 'red', width: '80%', height: '80%' }),
    		Ti.UI.createView({ backgroundColor: 'green', width: '80%', height: '80%' }),
    		Ti.UI.createView({ backgroundColor: 'blue', width: '80%', height: '80%' }),
    	],
    	showPagingControl: true,
    });
    window.add(scrollableView);
    window.open();
    *Work-Around:* The below works on both Android and iOS. It successfully works-around the issue. Note that the solution is to wrap the view with an empty view. 
        var window = Ti.UI.createWindow();
    function createScrollableChildView(properties) {
    	var parentView = Ti.UI.createView();
    	parentView.add(Ti.UI.createView(properties));
    	return parentView;
    }
    var scrollableView = Ti.UI.createScrollableView(
    {
    	views:
    	[
    		createScrollableChildView({ backgroundColor: 'red', width: '80%', height: '80%' }),
    		createScrollableChildView({ backgroundColor: 'green', width: '80%', height: '80%' }),
    		createScrollableChildView({ backgroundColor: 'blue', width: '80%', height: '80%' }),
    	],
    	showPagingControl: true,
    });
    window.add(scrollableView);
    window.open();
    *Technical Reason:* The Titanium child view is being added directly to Android's native "ViewPager", which derives from Android's "ViewGroup". The problem with this is that Google's "ViewGroup" only supports "ViewGroup.LayoutParams", but the Titanium width/height/top/bottom/left/right properties are stored to our custom "TiCompositeLayout.LayoutParams" which are ignored by the parent. The parent view must be a Titanium "TiCompositeLayout" derived view (all Titanium views derive from this class) in order for these custom parameters to be supported. That's why the above work-around works, because the empty Titanium parent view is needed to size/layout the child based on its custom Titanium parameters.
  14. Joshua Quick 2017-12-23

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/9696
  15. Lokesh Choudhary 2018-05-05

    FR Passed. Waiting for merger to be enabled.
  16. Lokesh Choudhary 2018-05-09

    PR Merged.
  17. Samir Mohammed 2018-06-26

    *Closing ticket.* Verified fix can be seen in SDK Version: 7.3.0.v20180625114905 *Test and other information can be found at:* https://github.com/appcelerator/titanium_mobile/pull/9696

JSON Source