0

I've a problem while developing the app design of my mobile application in Appcelerator Titanium Studio. I want extend the navigation bar at the top (with back button and so on) in an optical way with a view below the real navigation bar. When I use the barColor attribute there's a shadow at the bottom of the navigation bar - I'm able to let this shadow disappear, if I use the barImage attribute instead. The problem is now the following: I'm using a PNG-image with a simple, colored background - it's the same HEX code as the view in the app is using. The problem is, that the PNG image is a little darker than the view below, which is working with the same HEX code.

Why the PNG image is still a little bit darker than the view of the app, using the same color? Is there any color profile, which I have to change? The PNG is generated in Adobe Illustrator with the sRBG color profile.

Thanks a lot in advance!

weblion
  • 30
  • 8
  • does the png have opacity? – dandavis Aug 01 '16 at 19:51
  • Not as far as I know, does it change something? I have created a simple image wirh Pixelmator and filled the only existing background layer with the color - that's it. It's only one layer of color... Is that an answer on your question? – weblion Aug 01 '16 at 19:55
  • well it could be color correction or gamma if there's no transparency or opacity in play, but i don't know how to "fix" that, if that's the case... – dandavis Aug 01 '16 at 20:10
  • It's very strange. The color has 100% opacity (no transparency) and only one layer filled with the color. When I place the image as barImage it's a bit darker then the original hex color... Anyone knows the barImage/barColor struggle? – weblion Aug 01 '16 at 21:18
  • How are you viewing the image? Firefox displays sRGB PNG images slightly differently from HTML/CSS elements by default. There are several ways to fix that which I'll describe in an answer if you are using Firefox. – Glenn Randers-Pehrson Aug 02 '16 at 00:22
  • Try to do one thing, do not create the image using HEX Code, but instead create a navigation bar in the iPhone (device or simulator both will work) using the HEX Code you are setting for **barColor** property and finally capture a screenshot of the navigation bar and then crop the solid color fill image from this screenshot.....Happily use this cropped image for **barImage** property. It really works when there are color differences especially on iOS devices due to some color profiles. So it is the best way to create same color image...crop it from the captured navigation bar screen. – Prashant Saini Aug 02 '16 at 04:46
  • I'm viewing the image on the iOS Simulator from XCode, while developing a mobile app using Appcelerator Titanium. On the simulator as well as on a native device I've also the same results... – weblion Aug 02 '16 at 04:46
  • Or just give me the hex code you are using for navigationBar...I will provide you the image for this. – Prashant Saini Aug 02 '16 at 04:46
  • Prashant, that's basically a good idea, you're right. Before I go into these kind of emergency solutions I want to understand why that happens. The used color is coming from a corporate identity styleguide and when I start to modify these colors, I'll have trouble in a later point - additionally it could change during an update (for example) and when I don't know why these colors differs, I cannot control the changes. Do you understand what I mean? – weblion Aug 02 '16 at 04:51
  • Yes, I have been through the same issues everytime I work on iOS app. But you have no need at all to worry about the color differences, just make sure that you are using same hex color code and you will see hundreds of color variations on different iOS + Android devices because color production really matters on the technology of mobile display. Let's say the hex code is **#00bbaa** (my favorite one) - Samsung display it different, iOS devices display different, Sony devices different..and that's why cameras of different devices also vary due to lens, image-processing, display and all that. – Prashant Saini Aug 02 '16 at 05:23
  • Yes, I understand the fact, that there are these platform specific differences, but does this mean I've to change my PNG image to another color, that it's matching with the correct color on iOS? So that means that the view in iOS has the correct HEX code and the image a wrong one - means the image has to be platform specific. Is that what you mean to solve the issue? Otherwise when I put both with the correct code I've the original issue described above :/ – weblion Aug 02 '16 at 14:15

1 Answers1

0

thanks a lot for responding on my initial question and your support. Finally I found the issue related to the darker color of the navBar. It was the attribute translucent which is initially and per default set to true. If you put translucent:false to your window, the slightly darker layer on your PNG (or barColor) disappears. Thanks you!

weblion
  • 30
  • 8