Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-18967] Nine-patch splash screen showing black blocks with 4.0.0.GA on Android 5.x

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionDone
Resolution Date2015-06-15T08:30:34.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAndroid
Labelslook1, splash-screen
ReporterFokke Zandbergen
AssigneeAshraf Abu
Created2015-05-29T17:16:19.000+0000
Updated2018-08-06T17:34:53.000+0000

Description

An app build with 4.0.0.GA (regardless of Android Build Tools version) that uses (as recommended) nine-patch splash images displays black blocks overlaid on the image when runs on an Android 5.x device. It is OK on Android 4.4.4 and when build with 3.5.1.GA it is OK on both Android devices.

Reproduce

Run the attached project on different environments. The project is created with ti create, has no modifications to the <android> section in tiapp.xml and nine-patch splash images according to the [guide](http://docs.appcelerator.com/platform/latest/#!/guide/Icons_and_Splash_Screens-section-29004897_IconsandSplashScreens-Androidsplashscreenconsiderations). Attached are screenshots for different SDK, Android and Tools versions.

Attachments

FileDateSize
background_fix_2.9.png2015-06-12T14:12:24.000+000028942
background_fix.9.png2015-06-12T14:03:40.000+000028909
background.9.png2015-06-12T11:36:35.000+000064692
fix_1.png2015-06-15T02:38:55.000+0000110597
fix_2.png2015-06-15T02:38:58.000+0000122805
fix_final.9.png2015-06-26T11:14:53.000+000052833
np.zip2015-05-29T17:17:08.000+0000173717
SDK 3.5.1 - Android 5.1.0 - Tools 21.1.2.png2015-05-29T17:13:58.000+000086711
SDK 4.0.0 - Android 4.4.4 - Tools 22.0.1.png2015-05-29T17:13:58.000+000081195
SDK 4.0.0 - Android 5.1.0 - Tools 21.1.2.png2015-05-29T17:13:58.000+000088378
SDK 4.0.0 - Android 5.1.0 - Tools 22.0.1.png2015-05-29T17:13:58.000+000088987

Comments

  1. Ashraf Abu 2015-06-12

    [~fokkezb] The Nine-patch in the sample has only the top and left set. Could you try and see what happens if you set the right and bottom (Padding box) in the Nine-patch image?
  2. Fokke Zandbergen 2015-06-12

    [~msamah] actually, the nine-patch in the sample already has right and bottom set. Here is the source: https://raw.githubusercontent.com/FokkeZB/Sample.RSS/alloy/platform/android/res/drawable-xxhdpi/background.9.png
  3. Fokke Zandbergen 2015-06-12

    Attached example nine-patch splash screen used for screenshots.
  4. Ashraf Abu 2015-06-12

    Tried this on native and the bug exists. This is a native issue whereby when you use a nine-patch image as background and don't specify the padding box / padding line [http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch] what happens is that it doesn't get the correct width and length for that activity. To solve it, one needs to add padding. It is no longer optional as it will cause a layout issue when not done correctly (even though the Android docs says it's optional). -Attached is background_fix.9.png Please try it and let me know if it works.-
  5. Ashraf Abu 2015-06-12

    [~fokkezb] Please take a look and let me know if it works for you.
  6. Ashraf Abu 2015-06-12

    I edited [^background_fix_2.9.png] This version should look better and nicer on the activity. Please try it and let me know if it works
  7. Fokke Zandbergen 2015-06-13

    [~msamah] both of your new versions work fine. I guess I'll have to update the TiCons CLI to add the padding box :( What's the difference between the two fixed versions? I see fix_2 has an extra black border but I don't see it anywhere.
  8. Fokke Zandbergen 2015-06-13

    Fixed TiCons CLI for Android API 21+: https://github.com/FokkeZB/TiCons-CLI/commit/02aa2663a1bab4f45f299a0ead1d8c1c056d21bf
  9. Ashraf Abu 2015-06-15

    I'm using a HTC Desire Eye and when I used the first background fix, I get the results as [^fix_1.png]. The red outline is traced out on the whole app including beyond the navigation and status bar. Thus, needed the 1 pix black frame to get a better result as shown in [^fix_2.png] If everything is okay, can I resolve this ticket?
  10. Fokke Zandbergen 2015-06-15

    [~msamah] well, that seems like a bug on its own. Do you get the same with a regular background image? As for the nine-patch blocks, yes we can close it. I'll cover this in the last of 3 images blog posts, which is about resizable images.
  11. Ashraf Abu 2015-06-15

    {quote}Do you get the same with a regular background image?{quote} [~fokkezb] Nope. It's only when I use Nine-Patch. A normal background image behaves as expected. I'll close this issue then. Thanks!
  12. Fokke Zandbergen 2015-06-26

    [~msamah] reproduced and found the other issues with the red outline. The padding line needed to cover the full width/height of the image to fix that. I'll cover that in the upcoming blog post. See fix_final.9.png
  13. David Loekito 2016-03-29

    i think we need to reopen this issue. 1. i used tiCons, and still happens. 2. if padding line full width and height, then what's purpose of 9-patch images? spesific use case that i must use 9-patch images is because we need to run our apps on blackberry Q10 which is detected as xhdpi and portrait, but screen resolution is somewhat is like landscape. this issue can be resolved by using usual 9-patch images, but it produces black blocks in android 5.x
  14. Ashraf Abu 2016-03-29

    [~David.Loekito] Could you give an example code of your use case?
  15. James O'Leary 2016-03-29

    I just wanted to comment to say I came across this post just yesterday and it helped me. I also had black boxes appear on my 9-patch splash screen I created. Just as @Fokke Zandbergen mentioned, when I changed the padding line to be the full height and width of the image, the strange box or boxes dissapeared. Thank you @Fokke!
  16. Carlos Henrique Zinato 2016-06-13

    same here...did it today - just filled the right and bottom side with a black line and the black weird blocks gone
  17. Eric Merriman 2018-08-06

    Closed as completed. If this is in error, please reopen.

JSON Source