Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-10358] Android: ImageView parity for scaling behavior

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-03-07T18:52:35.000+0000
Affected Version/sRelease 2.1.0, Release 2.1.1
Fix Version/sRelease 3.1.0, 2013 Sprint 05 Core, 2013 Sprint 05
ComponentsAndroid
Labelscore, layout, module_imageview, parity, qe-testadded
ReporterVishal Duggal
AssigneeAllen Yeung
Created2012-08-08T16:38:04.000+0000
Updated2013-12-03T18:58:33.000+0000

Description

While testing for parity on current scaling behavior of imageViews on Android, noticed all kinds of layout issues. Basically if an image is loaded with auto width and height and then the width and height properties are specifically overwritten, setting the width and height back to auto does not return image to original dimensions. Had similar issues with IOS which were fixed as part of TIMOB-3749 IOS behavior is as follows. If either width or height of image view are set to follow SIZE behavior('auto',Ti.UI.SIZE,undefined) then the image is scaled with aspect ratio intact. Otherwise the image is scaled ignoring aspect ratio. Test case is below
var win = Ti.UI.createWindow({
    backgroundColor:'#fff',
    layout:'vertical'
});
 
var image = Ti.UI.createImageView({ 
    image: "http://www.catravelservices.com/management/hotels/pictures/Mawamba_lodge_nature.jpg", 
    backgroundColor : "red" 
});
 
 
var label = Ti.UI.createLabel({
    text:'Results Here'
})
 
var updateLabel = function(){
    var size = image.size;
    label.text = 'ImageView size is '+size.width+'x'+size.height;
}
 
var controlsContainer = Ti.UI.createView({
    height:Ti.UI.SIZE
})
 
var widthControls = Ti.UI.createView({
    width:'50%',
    layout:'vertical',
    left:0,
    height:Ti.UI.SIZE
})
 
var heightControls = Ti.UI.createView({
    width:'50%',
    layout:'vertical',
    right:0,
    height:Ti.UI.SIZE
})
 
controlsContainer.add(widthControls);
controlsContainer.add(heightControls);
 
var b1 = Ti.UI.createButton({title:'WIDTH=SIZE'})
var b2 = Ti.UI.createButton({title:'WIDTH=165'})
var b3 = Ti.UI.createButton({title:'WIDTH=250'})
var b4 = Ti.UI.createButton({title:'HEIGHT=SIZE'})
var b5 = Ti.UI.createButton({title:'HEIGHT=50'})
var b6 = Ti.UI.createButton({title:'HEIGHT=165'})
b1.addEventListener('click',function(e){
    image.width=Ti.UI.SIZE;
    setTimeout(updateLabel,500);
})
b2.addEventListener('click',function(e){
    image.width=165;
    setTimeout(updateLabel,500);
})
b3.addEventListener('click',function(e){
    image.width=250;
    setTimeout(updateLabel,500);
})
b4.addEventListener('click',function(e){
    image.height=Ti.UI.SIZE;
    setTimeout(updateLabel,500);
})
b5.addEventListener('click',function(e){
    image.height=50;
    setTimeout(updateLabel,500);
})
b6.addEventListener('click',function(e){
    image.height=165;
    setTimeout(updateLabel,500);
})
win.add(image);
widthControls.add(b1);
widthControls.add(b2);
widthControls.add(b3);
heightControls.add(b4);
heightControls.add(b5);
heightControls.add(b6);
win.add(controlsContainer);
win.add(label)
win.open();

Comments

  1. Allen Yeung 2013-03-06

    https://github.com/appcelerator/titanium_mobile/pull/3937
  2. Shyam Bhadauria 2013-03-12

    Environment used for verification - Titanium SDK: 3.1.0.v20130311192922 Titanium  Studio:3.0.2.201302151605 Device: Samung GALAXY Tab 620 Android 3.2
  3. Charles Phillips 2013-06-15

    The fix for this issue causes a regression, images do not scale proportionally to fill the element in width or height (as iOS does) if the element dimensions are larger than the image native dimensions. Discussion here: http://developer.appcelerator.com/question/151081/android-sdk-31-imageviews-dont-stretch-and-keep-ratio-anymore#comment-177858

JSON Source