[TIMOB-9209] Android: backgroundRepeat returns black view when using density images (xhdpi, hdpi etc...)

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-02-05T23:16:47.000+0000
Affected Version/s	Release 2.0.1, Release 3.0.0
Fix Version/s	Release 3.1.0, 2013 Sprint 03 API, 2013 Sprint 03
Components	Android
Labels	api, community, module_window, parity, qe-manualtest
Reporter	Peter Willemsen
Assignee	Ping Wang
Created	2012-05-20T07:50:37.000+0000
Updated	2014-08-08T23:47:44.000+0000

Description

So I was trying to repeat a background, which always works. But when using density images (xhdpi, hdpi etc...) it's not working. It returns a black view. To reproduce: Put an image in your Resources directory, according to the docs: https://wiki.appcelerator.org/display/guides/Using+density-specific+resources+on+Android I have this code:

var win = Ti.UI.createWindow({
	navBarHidden : true,
	exitOnClose : true
});
var logo = Ti.UI.createView({
	left : 0,
	top : 0,
	right : 0,
	height : "44dp",
	zIndex : 3,
	backgroundImage : "/images/barbg.png",
    backgroundRepeat : true
});
win.add(logo);
win.open();

The view will be black instead of a repeated image. Thanks!

Comments

Betty Tran 2012-05-22

Hi Peter, Could you provide another code snippet that reproduces the problem? There are some errors in the code that you have included. Thanks, Betty
Paul Dowsett 2012-05-22
Peter Willemsen 2012-05-22

Hi Paul, Oops, no I'm very sorry. I totally missed that. I'll remember the next time. I changed the code. It looked normal in the edit window :( Anyway, yes I tested it myself by moving the images outside the hdpi folder into the /Resources/ folder, and it works. I'm using it right now as a temporary workaround.

Paul Hamilton 2012-05-23

happening for me as well. There really isn't a perfect test case with a default app as you need to have images that will tile in the android resources folders. Android w/2.0.1.GA2 First off you can't repeat on Heavy Weight windows at all Note this is lightweight and works as expected:

   var win = Titanium.UI.createWindow({  
       title:'tiling bug',
       backgroundImage: "KS_nav_ui.png",
       backgroundRepeat: true
   }).open();

This is heavyweight and ignores the repeat property:

   var win = Titanium.UI.createWindow({  
       title:'tiling bug',
       backgroundImage: "KS_nav_ui.png",
       backgroundRepeat: true,
       navBarHidden: false
   }).open();

Now as a base case take this piece of code which works as expected:

   var win = Titanium.UI.createWindow({  
       title:'tiling bug',
   	backgroundColor: 'red',
       navBarHidden: false
   });
   
   var view = Ti.UI.createView({
       backgroundImage: "KS_nav_ui.png",
       backgroundRepeat: true,
       width: "100%",
       height: "100%"
   });
   
   win.add(view)
   win.open();

Now move (don't just copy) "KS_nav_ui.png" to the resolution specific image folders. Run with this slight modification of the image location to reference the images folder:

   var win = Titanium.UI.createWindow({  
       title:'tiling bug',
   	backgroundColor: 'red',
       navBarHidden: false
   });
   
   var view = Ti.UI.createView({
       backgroundImage: "images/KS_nav_ui.png",
       backgroundRepeat: true,
       width: "100%",
       height: "100%"
   });
   
   win.add(view)
   win.open();

Peter Willemsen 2012-05-23

I'll make a nice template with some random images to let users reproduce this bug.
Paul Hamilton 2012-07-05

This is actually more then just android. Occurs with iOS as well with retina and the @2x images. When trying to tile with both the regular image and the @2x on a retina device, the image will just stretch rather then tile. The only exception to this so far i found is with tableviews for some reason. Though i can't tell if perhaps the tableview is just ignoring the @2x and using the regular image, or is tiling the image appropriately.
Dan Tamas 2012-10-03

Any news on this? Thank you.

Ping Wang 2013-01-30

PR: https://github.com/appcelerator/titanium_mobile/pull/3826 For FR, please run the three test cases attached below. Note: put "image.png" in /Resources/android/images/[high|medium|low]/ Test case 1:

   var win = Titanium.UI.createWindow({  
       title:'tiling bug',
       backgroundImage: "images/image.png",
       backgroundRepeat: true,
       navBarHidden: false
   }).open();

Test case 2:

   var win = Titanium.UI.createWindow({  
       title:'tiling bug',
       backgroundImage: "images/image.png",
       backgroundRepeat: true
   }).open();

Test case 3:

   var win = Titanium.UI.createWindow({  
       title:'tiling bug',
       backgroundColor: 'red',
       navBarHidden: false
   });
   
   var view = Ti.UI.createView({
       backgroundImage: "images/image.png",
       backgroundRepeat: true,
       width: "100%",
       height: "100%"
   });
   
   win.add(view)
   win.open();

Paras Mishra 2013-03-15

backgroundRepeat property is working as expected. Tested by executing the above three testcases. Verified on: Device : Google Nexus, Android Version: 4.1 SDK version: 3.1.0.v20130314163255 CLI version : 3.0.24 OS : MAC OSX 10.7.5 XCode : 4.5.1
Michael Gangolf 2013-05-18

Can someone verify that this is also working on alloy? In my case its using the normal image and not the one out of the res-notlong-* folder: https://developer.appcelerator.com/question/152480/android-backgroundimage-repeat-ignoring-retina-images SDK: 3.1.0 GA Android 4.0.2 (device and emulator)

JSON Source