[TIMOB-17886] Android:ImageView does not STRETCH images to fill screen
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | n/a |
| Status | Open |
| Resolution | Unresolved |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | Android |
| Labels | TCSupportTriage, android, imageView, width |
| Reporter | Matt Moskal |
| Assignee | Unknown |
| Created | 2014-10-19T13:28:21.000+0000 |
| Updated | 2018-02-28T20:04:20.000+0000 |
Description
On Android. Not tried on iOS.
If set ImageView width = Ti.UI.FILL:
and image width (in pixels) > screen width (in pixels), then ImageView works fine, and image SHRINKS to fit screen width, while keeping aspect ratio.
However if image width (in pixels) < screen width (in pixels), ImageView will keep aspect ratio, but will not STRETCH image to full width of screen.
Try code below using an image (354 × 518 pixels) off Wikipedia. You will see the white border will be at screen edges, but actual images will not stretch that far. Image stretches some, but not all the way to FILL.
CAVEAT - make sure you are using a phone with a high density screen - for example a Nexus 5. Lower density phones this issue is not as apparent.
var imageView = Ti.UI.createImageView({
image: "http://upload.wikimedia.org/wikipedia/commons/1/14/Animal_diversity.png",
width: Ti.UI.FILL,
// height: Ti.UI.FILL,
// height: "300dp",
borderWidth: "3dp",
borderColor: "white",
borderRadius: "4",
});
$.win.add(imageView);
Based on your code, you have commented height property. You should user like:
var win = Ti.UI.createWindow({ backgroundColor: '#fff', }); var imageView = Ti.UI.createImageView({ image: "http://upload.wikimedia.org/wikipedia/commons/1/14/Animal_diversity.png", width: Ti.UI.FILL, height: Ti.UI.FILL }); win.add(imageView); win.open();Hi Shou Liang. Thank you for your reply. Several quick points. 1. To maintain aspect ratio of an image, as you describe, is not how ImageView is supposed to work. If you set BOTH the height & width, ImageView does not maintain aspect ratio. If you fix the height or the width (but no both), aspect ratio is supposed to be maintained. This behavior is documented. http://docs.appcelerator.com/titanium/3.0/#!/guide/Images_and_ImageView_APIs-section-29004912_ImagesandImageViewAPIs-TheImageView ===== If you specify a width and/or height property on the image, the image will be scaled to fit according to these considerations: If the ImageView's height and width are specified, the images will be scaled unproportionally to fit the dimensions. The graphic's aspect ratio will NOT be maintained. If either the ImageView's height or width are specified (not both), the image will be scaled to fit the specified dimension. The graphic's aspect ratio will be maintained. ===== 2. If you set both the width & height to FILL, ImageView acts somewhat oddly. Aspect ratio is maintained, but the ImageView (but not the image itself) appears to become very tall. You can see this if you set top="0dp". The image will not be at the top. In addition, this is not how ImageView is documented to work. The image should actually be stretched to fill the entire screen - losing aspect ratio. 3. The above is for images the need to be STRETCHED. There seems no problem if images are SHRUNK. 4. I have not tested for various aspect ratios - w>h, w=h, w
Is this ever going to be addressed or is there an alternate solution? From my testing on Android if the remote image width is less than the ImageView width than Ti.UI.FILL will not stretch the image to fill with width. I have also tried setting the left and right properties to 0 but that does not seem to work either. Again this is not an issue on iOS, just Android.