Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15747] Android: Images do not scale UP properly on Android (parity issue)

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2014-10-29T00:50:01.000+0000
Affected Version/sRelease 3.1.3
Fix Version/sRelease 3.4.2, Release 3.5.0, Release 4.0.0
ComponentsAndroid
LabelsSupportTeam, module_imageview, qe-manualtest
ReporterBrad Ball
AssigneeSunila
Created2013-11-12T18:55:01.000+0000
Updated2015-01-14T20:37:13.000+0000

Description

Problem Description

The 320x180 image in the testcase should be scaled UP to fill the width of the window (left: 0, right: 0) with it's height automatically adjusted to maintain the image aspect ratio. This is exactly what happens on iOS. On android, the ImageViewHeight is contstrained to the original image height, and the image's aspect ratio is maintained, thus leaving a large unfilled area to the left and right of the image. Since the size is set to Ti.UI.SIZE, the expected behaviour would be that the image is scaled up to fit the full width of the ImageView and it's size adjusted upward to fit the contents of the scaled up image. Again, on iOS this expected behaviour is exactly what happens. But on Android, you get the unexpected result of an image with limited width.

Steps to reproduce

1. Create a new mobile project 2. Add Android to the supported platforms 3. Add this testcase to app.js
var win = Ti.UI.createWindow({
	backgroundColor:'white',
});

var TestImage = Ti.UI.createImageView({
	image: 'http://placehold.it/320x180',
	left: 0,
	right: 0,
	//height: Ti.UI.SIZE,
	top: 40,
	backgroundColor: '#ff0000'
});

win.add(TestImage);

win.open();
4. If you run this in Android, you will see red next to the image. If you run this in iOS it will be nicely filling the space, no red in the screen.

Attachments

FileDateSize
TestApp.zip2013-11-12T18:55:01.000+00003103990

Comments

  1. Sunila 2013-11-24

    Use CENTER_CROP for scaletype to scale and fit the image https://github.com/appcelerator/titanium_mobile/pull/5019
  2. Ping Wang 2013-12-03

    Another test case:
       var win = Ti.UI.createWindow({
           backgroundColor:'white',
       });
        
       var TestImage = Ti.UI.createImageView({
           image: 'http://placehold.it/320x180',
           left: 0,
           right: 0,
           height: '100%',
           top: 40,
           backgroundColor: '#ff0000'
       });
        
       win.add(TestImage);
        
       win.open();
       
  3. Michael DeGiovanni 2013-12-20

    Why not expose in the sdk what kind of scaling type the user wants to perform on android? (http://developer.android.com/reference/android/widget/ImageView.ScaleType.html) . As it is at the moment, if even the user for example sets a width (say 96% of the platformWidth) and no height. The image is not scaled to that width. By exposing the scaling types the user can select how images are scaled in the view.
  4. Brad Ball 2013-12-31

    Any progress on this issue?
  5. Alex Peckham 2014-01-07

    Any progress? Is there actually any way to have an image fill a given container now? Using Ti.UI.FILL as the ImageView width doesn't seem to work either? Android devices have loads of different screen sizes so this is essential functionality. EDIT: It seems that if one uses Ti.UI.FILL for both width and height then the image will fill a container view, however it is then up to the developer to size the container view correctly, which means to make an image fill the screen width without distorting one has to calculate the aspect ratio of the image and then multiply the screen width by this ratio to obtain the correct height for the container. I should just be able to set the width to 100%, rather than having to mess around with wrapper views and so forth just to work around missing functionality in the API
  6. Brad Ball 2014-01-07

    What I've been doing to work around the issue is setting my ImageView width to 100%, then using the original image's aspect ratio along with the Ti.Platform.displayCaps.platformWidth (or platformHeight, depending on orientation) to calculate the exact pixel height of the image when displayed at full width, and then set the height on the ImageView to the calculated pixel height. Agreed that all of these calculations and workarounds should not be necessary. width of FILL and height of SIZE should handle it it automatically as the docs indicate and as it works on iOS.
  7. Alex Peckham 2014-01-07

    That's similar to what I've been doing, except I use a wrapper view and set the width/height on those and just leave width and height of image set to Ti.UI.FILL. When I tried width as just 100% or Ti.UI.FILL with an explicit height it didn't seem to always work - this seems robust but I don't like having to use a wrapper. Yes, the worst thing is I recall it did work in earlier versions of Ti and this is a regression from another bug fix. It's not ideal to have to keep fixing code that was tested and working due to API bugs :/
  8. Paul Hamilton 2014-01-28

    Any chance this could get in the next release? This breaks my UI with no real work-around. The image needs to scale to the width of the screen as well as preserve aspect ratio. The image could be smaller OR larger then the screen.
  9. Paul Hamilton 2014-01-28

    This stackoverflow question should be similiar to what is happening http://stackoverflow.com/questions/2521959/how-to-scale-an-image-in-imageview-to-keep-the-aspect-ratio {quote} If you want an ImageView that both scales up and down while keeping the proper aspect ratio, add this to your XML: android:adjustViewBounds="true" android:scaleType="fitCenter" Add this to your code:
       // We need to adjust the height if the width of the bitmap is
       // smaller than the view width, otherwise the image will be boxed.
       final double viewWidthToBitmapWidthRatio = (double)image.getWidth() / (double)bitmap.getWidth();
       image.getLayoutParams().height = (int) (bitmap.getHeight() * viewWidthToBitmapWidthRatio);
       It took me a while to get this working, but this appears to work in the cases both where the image is smaller than the screen width and larger than the screen width, and it does not box the image.
       
    {quote}
  10. Raymond Verbruggen 2014-03-12

    Could you please solve this soon? This issues has already som duplicates, and is very troublesome
  11. Randy Casey 2014-03-16

    I'm having this exact problem. Spent half a day trying to figure out why my image would not scale properly. (Works fine on iOS as everyone has mentioned). Would be nice if this could be addressed in a timely manner.
  12. Sunila 2014-04-11

    Updated PR with new fix.
  13. Mark Mokryn 2014-08-21

    This was is incredibly annoying and not so trivial to work around - please fix, thanks.
  14. Tim Richardson 2014-09-30

    How is this still not fixed!? It's ridiculously annoying
  15. Ping Wang 2014-10-24

    Actually, the original ticket is a duplicate of TIMOB-14395. The issue is due to a bug in the fix of TIMOB-14395 (https://github.com/appcelerator/titanium_mobile/pull/4738).
  16. Tim Richardson 2014-10-24

    [~pwang] so if this was fixed over a year ago, why has it not been included in the latest SDK releases?!
  17. Ping Wang 2014-10-24

    It's not completely fixed one year ago because there's a bug in that fix.
  18. Mark Mokryn 2014-10-29

    Marked as resolved but not seeing the PR in 3_4_X - thanks.
  19. Fabio 2014-10-29

    This is not solved in the SDK 3.4.0. Please fix this annoying issue.
  20. Paul Hamilton 2014-10-29

    it is marked as resolved in 3.5, have you tried a nightly build?
  21. Hieu Pham 2014-10-30

    3.4.X PR: https://github.com/appcelerator/titanium_mobile/pull/6293
  22. Mark Mokryn 2014-11-06

  23. Visalakshi Chidambaram 2014-11-25

    Test environment: Appc-Studio: 3.4.1.201410281743 Titanium SDK: 3.5.0.v20141124155715 Titanium CLI: 3.4.1 GA Alloy : 1.5.1 GA Device: Samsung Galaxy Tab 3 (4.4.2)
  24. Andrew Royce 2015-01-14

    Works for me in 3.5.0 GA Test environment: Appc-Studio: 3.4.1.201410281727 Titanium SDK: 3.5.0 GA Device: HTC One M8

JSON Source