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.
Use CENTER_CROP for scaletype to scale and fit the image https://github.com/appcelerator/titanium_mobile/pull/5019
Another test case:
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.
Any progress on this issue?
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
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.
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 :/
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.
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:
{quote}
Could you please solve this soon? This issues has already som duplicates, and is very troublesome
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.
Updated PR with new fix.
This was is incredibly annoying and not so trivial to work around - please fix, thanks.
How is this still not fixed!? It's ridiculously annoying
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).
[~pwang] so if this was fixed over a year ago, why has it not been included in the latest SDK releases?!
It's not completely fixed one year ago because there's a bug in that fix.
Marked as resolved but not seeing the PR in 3_4_X - thanks.
This is not solved in the SDK 3.4.0. Please fix this annoying issue.
it is marked as resolved in 3.5, have you tried a nightly build?
3.4.X PR: https://github.com/appcelerator/titanium_mobile/pull/6293
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)
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