In Android Studio, I've added a bunch of icons to my app via res -> New -> Vector Asset. When I tested my app on a device with darkmode, I noticed, that some icons changed their color with the text color, while some remained black.
Upon further investigation I found the ones that changed their color had this attribute:
<vector
android:tint="?attr/colorControlNormal"
while the ones that did not change their color had this one:
<vector
android:tint="#000000"
The fix was easy: I just had to change the tint attribute accordingly.
My question is this: where is the tint attribute controlled in Android Studio? The dialog does have a color attribute, which is set to 000000. But I don't recall doing anything special before to end up with tint="?attr/colorControlNormal".
How can I make Android Studio to always set tint to ?attr/colorControlNormal?
Related
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).
I work on application which supports multi themes, dark and light, with min sdk version 21.
I found out that it's possible to use theme attribute (e.g. ?attr/logo_color) inside VectorDrawable.
So for example, If I set theme attribute to fill color of desired path
<vector ...>
<path
android:pathData="..."
android:fillColor="?attr/logo_color"/>
</vector>
or set theme attribute to tint whole vector
<vector android:tint="?attr/logo_color">
...
</vector>
I run the app (light theme), it sets color correctly, but when I change theme Activity.setTheme() (light to dark), color is not changed. Color is always 'cached' to previous theme's color. Interesting is that this doesn't work on lollipop and marshmallow, however on Android 10 it changes correctly.
On the other hand hand if I set android:tint="" color inside ImageView
<ImageView
...
app:srcCompat="#drawable/ic_logo"
android:tint="?attr/logo_colo"/>
It works with all versions but it of course change color of whole drawable.
Is it any bug or is it possible to use theme attributes inside VectorDrawable on lower apis with run time theme change?
Was facing the same issue, what I did was the following things
In the build.gradle file (app level), set the following (Suggesting this point since you have not mentioned what is the minSdk you are supporting)
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
If you are setting such drawables to any kind of views during run time or dynamically then
Instead of this (which is now deprecated)
context.getResources().getDrawable(/*Your resource id*/)
Use this
ContextCompat.getDrawable(context, /*Your resource id*/)
Explanation: What the ContextCompat class does is make sure that the drawable you get is complying to whatever theme is currently being used in your app (Android 5.0+)
If you support even below that, then you can use a ContextThemeWrapper to wrap your current context and apply a specific theme to the drawable and then use it whenever you like
Good things to read
Jorge Castillo's Article about ContextThemeWrapper
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
is there any way to change the "Default Color" for Controls in Xamarin Forms (particularly in Android)? The Controls, which you see in the Pictures all use the same color, and because of that i think there is something like a default resource. I have seen that you can change the colors manually, but i don't want to make a template for the picker, and each other control that hasn't a property built in for this color.
ListView:
The Underline of the Picker when clicked:
and The Window which opens when the Picker is clicked:
Can i somehow change this default color?
You need to check your styles in android.
Droid Project-> Resourse folder -> Values folder -> styles.xml
There is colorPrimary and colorAccent. So you need to change it to your color
You can customize your app with styles.xml. For mode details look at android styles and themes.
Edit:
Also if you click on the 3 dots on background in Attributes, you can edit and add color resources.
See example picture
Change the colorPrimary and colorAccent of your AppTheme in Styles.xml
There are a few attributes you can change in your AppTheme that you use which you declared in your styles.xml
There are a few like colorPrimary, colorPrimaryDark, colorAccent, colorControlNormal, etc.
I found this cheat sheet in the past, which might be outdated but might come in handy for you: Android Color Control Cheat Sheet.
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>