I will try to explain in detail‚ please help. I opened a new project‚ in the new project the "theme" section was opened twice‚ one light one dark. I added black text to the app ‚the text looked white because my phone is a dark theme. This is very good but incomprehensible. I only have one color.xml file (not for the night version) How did the text change to white? This is fine but the icon (vector ‚xml) I added and gave it a gray color ‚but now it was incomprehensible. The color of the icon changed from gray to black in the dark. I wanted him to change to white. I also opened for Colors.xml for the night. Now that I think there will be no mistakes, nothing has changed. The night is getting black in them.
How can I make an icon (vector ‚xml) gray in light and white in the dark theme?
I have a dark and light "theme" file ‚Do I have to separate the "colors" into dark and light themes?
I hope I was able to explain ‚Thank you so much!
The text's color has changed to white because you didn't set a color, and it's inherits from the default android settings.
If you want to change (customise) the colors depending on the theme, I suggest you to override the colors.xml file for the night mode.
Declare the color that you want for your icon.
colors.xml
<color name="iconColor">#FF808080</color>
colors.xml (night)
<color name="iconColor">#FFFFFFF</color>
In your drawable, you must set this new color.
android:fillColor="#color/iconColor"
It's also a good thing to override the others colors (primary, primaryLight, etc.) to lighter variants.
You can practice here if you want to exercise the theme changed on android (this is in Kotlin, but the same course exists in Java).
Related
Suppose I have my own two custom defined themes in the styles.xml, one for Dark and one for Light. When a user goes into their smartphones settings and change to dark mode, how do I have my application use my own custom dark theme? Same with my Light theme.
In general, I suppose my question is more like how do I control what color my application uses when a user changes between light and dark mode. I do not want to use the default colors that come in each mode.
You can override the colors that you use in your layout and put them in values-night/colors.xml. So, in light theme values/colors.xml will be used and in the night theme, values-night/colors.xml will be used.
Let's say you have a color assigned to a button, you write following line, make sure the color name is same:
values/colors.xml
<color name="colorButton">#6d85c9</color>
values-night/colors.xml
<color name="colorButton">#color/colorWhite</color>
And then you can assign the color to the button you do normally.
Let me know if you have more questions.
I am trying out with Dark Mode Theme Support for Android 10 for my App.
I am able to work with all other things in Dark Mode except App Launcher Icon.
For reference, I was using below link
https://developer.android.com/guide/topics/ui/look-and-feel/darktheme
I know there is no such mention of App Icon change as per Day/Night theme changes.
Just for confirmation, need all your inputs on will it be possible to change the app icon as per change in theme from normal to dark and vice versa.
Thanks in advance.
Have you checked the Themes and styles section in documentation?
Your themes and styles should avoid hard-coded colors or icons
intended for use under a light theme. You should use theme attributes
(preferred) or night-qualified resources instead.
Here are the two most important theme attributes to know about:
?android:attr/textColorPrimary This is a general purpose text color. It is near-black in Light theme and near-white on Dark themes. It contains a disabled state.
?attr/colorControlNormal A general-purpose icon color. It contains a disabled state.
So the ?android:attr/textColorPrimary and ?attr/colorControlNormal will change based on the theme (black -> white & white -> black). I'm assuming we can set those colors as android:tint property to achieve the dark/white theme for vector icons. The con is your icons need to be black and white only.
To achieve Dark Mode for Icons in Android:
Create the separate resource folder named values-night
Inside values-night folder define your night theme (ex. theme.xml)
Define all the desired colours you want in Dark mode inside theme.xml
Now, inside your icon drawable define the icon tint attribute as follows-
<vector android:height="24dp" android:tint="?attr/colorPrimaryDark" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp"
Using the above code, the icon colour will change based on colours defined in Dark and Light mode theme in your project
Pictures:
res folder values-night
define your Dark mode theme
change icon tint attribute of your Icons
light mode
Dark mode
No, the app icon does not support dark mode.
Apart from the app icon, other images colour can be modified :
Try using
android:drawableTint="#color/black"
OR
app:tint="#color/black"
[
Add xml import by presing ALT+Enter or use following:
xmlns:app="http://schemas.android.com/apk/res-auto"
]
with your desired image.
UPDATE:
or Just use:
ivMyImageView.setColorFilter(ActivityCompat.getColor(context, android.R.color.holo_green_light))
PS:
(Attribute drawableTint is only used in API level 23 and higher)
I think it possible, just launcher doesn't support display it.
BTW, I created new color resource into values-night and values, eg:
<!-- values-night/colors.xml -->
<color name="icon_background">#000000</color>
<!-- values/colors.xml -->
<color name="icon_background">#FFFFFF</color>
Then set background color into app icon:
<!-- mipmap/ic_launcher.xml -->
...
<background android:drawable="#color/icon_background" />
...
<!-- mipmap/ic_launcher_round.xml -->
...
<background android:drawable="#color/icon_background" />
...
App's icon now change when toggle dark mode..., but only for app swicher (icon display on top of window), but lancher does't update...
I've tested on Android 11 on Pixel 4XL phone (using Google Launcher).
Anyone else?
Dark mode is not supported for app icons (launcher icons).
Reason for this:
Some resource qualifiers like locale/density/version code do not
change in day-to-day use and changing icons on those are supported.
But we do not recommend changing app icons and labels based on
frequently changing parameters and it is not supported at most places
in system UI. Users create a memory map between apps and their
corresponding icons/labels. Changing these frequently is disruptive to
the user.
There is an issue filed with google for this and the decision is:
Won't Fix (Intended Behavior)
Issue tracker: https://issuetracker.google.com/issues/147521650?pli=1
Well, you can use ure resource colors. Add night mode variation (right click values, New -> Values resource file, set file name "colors" and qualifier "Night mode". You can do variation of drawable specifically if you want.
The main drawback - it doesn't really stable. I don't know if it's just me, but I'm getting weird behaviour in emulator (sorry, can't test on device right now). Right after install icon is set with correct mode, but when you change to other it doesn't get updated. When you try to move icon it using current theme variation however.
Try to add mipmap-anydpi-v26 & mipmap-night-anydpi-v26 icons in your source code. I tried to add but is a little bit buggy. I theory icons support dark theme XD
Here is an example
On a part of my layout I need to force the background to the same color of the default background color of the light theme (actually Theme.AppCompat.Light).
So I added this attribute : android:background="?android:attr/colorBackground".
But this background color is lighter than the default I have in the rest of my app.
From the android themes.xml, in the holo light theme, ?android:attr/colorBackground targets #android:background_holo_light which is equals to #f3f3f3. But the default background color is more something like #eeeeee, I really wonder where this color came from ?
The problem occurs on Kitkat, I don't have color discrepancy under Gingerbread.
Finally find the answer, for hardware accelerated devices, android:attr/windowBackground points to a gradient, not a plain color like I expected.
So when I use android:background="?android:attr/colorBackground" for on of my view, depending to where it is located in the screen height, we can see a color discrepancy.
The solution is to override windowBackground with colorBackground in the theme :
<item name="android:windowBackground">?android:attr/colorBackground</item>
android:minSdkVersion="14" android:targetSdkVersion="18"
In theory simple thing. What is the background color for holo.light as I want to use the same color for something else? It's not white neither background_light. Moreover my question is not how to determine its value but what android predefined constant to use (as if one day google change this light background color in holo light, my color would also change).
Btw, transparent color is not the solution in this case. :(
<color name="background_holo_light">#fff3f3f3</color>
You can find this by using the awesome chrome extension Android Resource Navigator.
https://chrome.google.com/webstore/detail/android-resource-navigato/agoomkionjjbejegcejiefodgbckeebo
You should be able to use #android:color/background_holo_light or android.R.color.background_holo_light I think.
I tried
<color name="background_holo_light">#26f3f3f3</color>
It's the right color for the background Holo light Theme
I am making an app using Holo dark theme, though I want the action bar to be the same grey like color in Holo light/ default theme. What is the color code that i can use for that?
Thanks
All colors are stored here :
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/colors.xml
The color you looking for is : #fff3f3f3
#ddd
I couldn't figure out how to reference the one already defined, so I just made my own.
<color name="action_bar_background">#ddd</color>