Different Android devices have different themes.
That means, that background colors, like in dialogs, may differ among Android versions and among manufacturers.
This may result into icons getting "invisible":
The problem with stock Android themes could be solved relatively easy, by providing different colored icons in target specific folders, e.g. white icons in a folder drawable-v14, and black ones in drawable-v10.
But that does not solve the issue that comes with customized themes from manufacturers, may it be TouchWiz, Blur or Sense.
It is simply not possible to cover every device by this method.
Another way would be, to draw a small black border around white icons, and vice versa.
But if the background would be gray, like in ICS, it wouldn't look good, either.
So, the question is: How to provide custom icons, that will work well on every theme, without touching the theme itself?
Accounting for all vendor choices (and mistakes) would be a pain.
I see a couple of options:
Explicitly select a stock theme and hope for the best
Select a custom theme derived from a stock theme, where you control the background color
Dynamically evaluate the background color for the chosen theme, and set the icon based by a tipping point (e.g. dark icons if background is light enough). Not sure if this would be practical, but at least it should be somewhat universal.
I recently went with the hard-coded colors in a derivative theme to fix a bug in the Nook dialog color selections for a dialog. More extensive testing would probably show me another platform that I just made worse with that.
Hopefully someone has a better answer than those, because none of those seem completely clean and universal. Reading your post again, it looks like none of those options meet your criteria of not touching the theme, either.
Related
I have created some images and set some colors using photoshop and applied them to our app in android studio, but for the same hex code, colors arent same, I do not understand why this is happening. I took a screen shot of the color im working in photoshop and then opened the image in photoshop, surprisingly the color code changed, and it was same as android studio was showing and its not the actual color, I have even checked the RGB/ CMYK mode, it is in RGB mode, i even tried CMYK mode, in the both the cases the problem persists. No matter how many times i have tried, the problem persists. Please help me out
I agree with Rodrigo, you should set a color workflow.
If you are mainly working on documents viewed on the web or mobile devices :
1) in Photoshop go to Edit>Colors Settings and set your RGB Colorspace to "sRGB".
2) Make sure Proof Colors is unchecked in the View menu.
3) Make sure your document has the "sRGB" color profile attributed (can be fixed by using "Attribute color profile" or "Convert color profile" in the Edit menu).
This should ensure color consistency across most devices and web browsers.
It very strongly depends on device screen. I have 4 devices, and colors are different on all of them
You have to setup your color profile in photoshop, by default photoshop gives you different colors when you save for web. Check out this tutorial step by step and let me know if this fixed your problem.
http://viget.com/inspire/the-mysterious-save-for-web-color-shift
If you have an activity and you need to set the background color of the activity, simply you would set the background color as
android:background="#0000FF"
or prefer to use an image as
android:background="#drawable/bgimg"
, taking performance and space requirement into consideration?
I think as using image consume space, when ever possible this approach should be avoided. Is it so, or this really does not make a significant difference? Just need to be sure from the experts.
thanks.
First of all this depends upon your need. If you only want a plain Red background then applying background color should be the preferred one.
As working with images may have few odds,
Scaling of the image for various screen sizes.
They definitely consume memory.
May not give the desired effect (blurry at times) if re-sized by the OS automatically.
On the other hand if you need something like a combination of colors then Gradient will help us. (not for the complex ones though :))
At last if you have an image type of background then drawable images will certainly be the choice.
color would be better, since you might have to use different image sizes to suit different screens, which in turn will increase the app size and you might not be very sure that the images are well displayed. And if you opt for higher resolution images, chances are that the app might crash with a fatal signal error just because it runs out of memory.
And #Atul O Holic's answer is complete too.
As little as the difference could be, the color approach is always going to be cheaper when we think in the space required, because you don't need to have a file with the image resource. Also, you can always use a native color from android using android:color/[color].
Using an image as background is only better when you can't have the same effect by just using a single color as background.
If it's one solid colour just set the background colour (you can also set the colour in your resources so you wouldn't need to keep setting it!).
Totally agree with joa2fast4u, when targeting multiple devices, especially ones with low memory, any optimizations you can make to save memory/reads/writes is preferred. Also, you can specify many preset styles in your styles/themes resource files to propagate and control the entire theme of your app from the default background to the text color on your widgets.
1) Solid Color - Apply a background color
2) Multiple Colors - Use a Gradient
3) Anything more complex - Use images
Please note that the usage of images involves optimization of multiple screen resolutions & sizes. File size & device form factor is also an important factor to be considered here.
According to the android iconography documentation here
and also here the icons in the status bar are supposed to be entirely white with transparent background. However, even the built in icons don't all follow this pattern it seems. The signal quality (for wifi and cell), battery indicator, and some others have the holo blue background on some icons on newer devices. Is this color built into the icon itself?
I am looking to implement a status bar icon with my app that will indicate the status of a connection to an external (bluetooth) device. I was planning on doing my company logo (which is a fairly simple, mostly circular shape) filled in with a color to indicate the status of the connection (connected - green, not connected - red). But since I'm not supposed to use a color these seems much more complicated. Is it really that bad to use a non white icon, and if it's so bad why does google do it?
It's convention, like creating accessors for your private fields, but it's not strict that you follow it. That being said, it is a good idea to follow the color scheme of the OS, simply because that way everything looks uniform. Therefore, I would suggest that rather than green and red, you choose holo blue and grey. It is completely your choice as the developer.
I have realized that there are at least two background colors on Option menu of Android. On the HTC Hero, the background is white and on Samsung Galaxy S II, the background is black.
This became a problem when I set the icons for the background menus. Is there some way to detect the background color of the Option menus in Android?
Possible solutions:
Don't use icons.
Design icons according to the guidelines - http://developer.android.com/guide/practices/ui_guidelines/icon_design_menu.html. There are three different guidelines for up to 2.2 (white background), 2.3 (black background) and 3.0+, so it's a lot of work...
As Profete162 suggested, use #android:drawable/ic_menu_*
For Android 4.0+, you can also set the light / dark Holo theme, which is guaranteed (at least in theory) to remain unchanged across different phone manufacturers - so it'll look the same in HTC Sense, Samsung TouchWiz etc.
That's indeed a very annoying issue.
On my implementation, I always try to use standards icons from android.R.drawable.IC_menu_*, so I am sure these icons are part of the framework and users are always positively surprised to see their generic icons in my app!
That gives a really good continuity in the user experience on the device, but that doesn't answer your question, but at least provide a workaround.
Here are for instance all android 2.2 icons: http://androiddrawableexplorer.appspot.com/
You can trust me, using these icons will always fit your colors.
First of all to answer your title question:
You can reference and read the background of the options menu by reading the attributes of the current theme. The attribute for this is panelFullBackground. E.g. set it as the background of a textview in XML¹:
<TextView android:background="?android:attr/panelFullBackground"
... />
Note that the background seems to be a solid color, but it's not - it's actually a bitmap. If you look closely you can see a grey border at the top (android 2.3+), or a drop shadow (<= android 2.2), so its'a bit difficult. Luckily there is a different attribute called panelColorBackground which matches the background color of the drawable as close as possible. So if you want just the normal background color, use this instead.
¹ This can surely also be read from code, but I don't know how from the top of my head at the moment, maybe I'll look it up and edit it in later.
Regarding icons
So you have the color as stated above, but you still have to process it to know if it's a dark or a bright color. You can do that, but that's not the usual way to deal with these icons and probably a good bit of work until you cover all the possible cases - not to mention that you have to create icons for each variant.
Normally you should adopt the platform menu icon style. This works across all devices and looks familiar to your users (custom icons that dont follow this often look "wrong" - e.g. astro file manager does this I believe).
You can do that by hand (see the guidelines), but the way better alternative is the Android Asset Studio.
It comes in two flavors:
As a webapp
Integrated in the latest version of the ADT plugin for eclipse
(under File->New->Other->Android Icon Set)
The workflow for both is pretty similar, select the point "Menu Icon" and follow the wizard. It will promt you to enter a simple, black and white bitmap of your desired icon that just outlines it's shape. After you specified one, the asset studio will generate everything for you. Play a bit around with the "clipart" option, that has a few example bitmaps ready to see how it works. When finished, the webapp gives you a simple zip which can be extracted into your project directory, the eclipse version adds it directly to the project that you select in the wizard.
The background color can be anything, because its implemented in Framework by manufacturer. You can't read it, in fact you will never need to read it.
Just create your custom menu layout in res/menu folder, set style and use it.
I'm working on an application for Honeycomb and have tried out various themes for it, including the default Holo theme, Holo Light and Holo Wallpaper. My layout is using a HorizontalScrollView with ImageViews and I've found that it gets a bit laggy when using the default Holo and Holo Light themes. It's super fluid with the Holo Wallpaper theme, though, despite it including a bitmap background.
I've even tried making my own theme with a bitmap background, but that just slows down everything even more.
I'd like to have a speedy ScrollView, so if anyone has an answer to why some are faster than others, please let us know :-)
It sounds like you are drawing too many layers. The Holo theme, especially when hardware accelerated, has a default background image on the window. Try to remove it if it's not visible.
I feel like such a noob. Here's how to enable hardware acceleration in Honeycomb. Add this to your manifest file in the application tag:
android:hardwareAccelerated="true"