Gradual Colour Blend between multiple colours - Android - android

I have a list of colours (generated from rgb values). I want to be able to draw all the colours to something on the screen at the same time. Ideally, the colours would blend through each change (typically the colour change will be gradual, but it is possible to have sudden changes) so that the colour change isn't abrupt. Eventually I'd like to be able to crop the result using another image, but my main concern is getting the colours drawn in the first place.
So something like this effect, except where the colours are defined by the ones in the array:

Related

setTextColor and setColorFilter not the same color in Kotlin

I have an ImageView and a TextView. They both use ?attr/somecolor to see what color they have to use depending on what theme is selected. This somecolor is either black or white depending on theme.
Now when I say they both need to be red using R.color.red, the TextView has a more brighter red then the ImageView.
sometext.setTextColor(ContextCompat.getColor(this,R.color.green))
someimage.setColorFilter(ContextCompat.getColor(this, R.color.green))
Is there any reason why these colors don't match up?
For what it's worth, here's what I get for an ImageView with app:tint="#color/black and a TextView with android:textColor="#colorBlack, and then
someText.setTextColor(Color.RED)
someImage.setColorFilter(Color.RED)
It's hard to say exactly what you need to do, but there are two different things going on here. For the TextView, you're literally just telling it what colour to draw with. That should always come out looking how you expect.
But for images, it's a little more complicated. You're applying a tint over existing image data, which interacts with the original colours and alpha to produce a final mixed image. For a bitmap image, that colour is in the individual pixels. For a vector drawable, it's in attributes like the fillColor.
For example, that fill colour on the arrow is #color/white, but here's what happens if I knock the alpha down by setting android:fillColor="#AAFFFFFF":
You can see the colour is different - it's actually partially transparent so it's blending with the white background. Applying full-alpha red over it didn't change the overall alpha - and it can't really, it's the alpha that says which parts of that square image are "empty" and which are "the arrow". (Well, you can do that with a different PorterDuff mode, but by default it doesn't!)
The alpha of your tint matters too - here's a partially transparent tint applied to the #color/white arrow (and the text):
someText.setTextColor(Color.parseColor("#99FF0000"))
someImage.setColorFilter(Color.parseColor("#99FF0000"))
And here's the same tint applied when the arrow's fill colour is #color/black
So the colour tint, when it's partially transparent, only really shifts the overall colour appearance, rather than fully replacing it. So check your R.color.green value and make sure it's actually fully opaque. If it's not, and that's how you want it, then pay attention to the fillColor you're using - you can see there that I'm applying the exact same colour to the text, but it matches more closely when the arrow is white
The other thing is the different PorterDuff tinting modes you can apply with setColorFilter - I can't really go into them right now (some info here and here) but you can control how the tint colour and the image are composited, how they're blended together.
Ideally you'd just make your image's fillColor white and apply your tint to it and call it a day, but if you can't do that (because it's in use elsewhere) or you need to tint bitmaps, you can look into that stuff!
Instead of using the ?astr which is for the main portion of the app user interface example navbar and things like that. You can create your color as Third Primary Color and just call it from there. I only use the ?astr for main color of the title bar or nav bar.
When you define the color as a third primary define the same color in both themes. You should get the same color for both. I do this a lot on all of my apps.
Also Android Studio is yelling at me saying that the ?astr is no longer needed. So I have a feeling that it will be done away with in the future.
Also defining your own colors will ensure the colors are the same. Be sure to set the same #13345fg(not actual color) with both themes that are pre-built for the app.

Android Bitmap - Replace an object's color keeping Anti-Aliasing

I have an image in my assets folder on which I am drawing stuff using an external program and then using them in my app. The problem is that the bitmaps are blank (transparent) with black and white objects in them. Note that the objects are created with Anti-Aliasing on to look better. I know this was asked before but I couldn't find what I want. I need to replace all the black and white pixels in the image (even the transparent anti-aliased ones!) to the colors given by the user. Below are some images to show what I want to do:
Please note that this is just an example and I have even some very complicated shapes and the final colors aren't known (as inputed by the user in RGB style).
Any help is appreciated. Thanks! :)
Usually you can tint the images you load apliying them a color at runtime.
The problem is that color applies to the whole image and it only matchs exactly the same color in white pixels, with or without alpha.
So you could separate all the areas of the image with the same color, save them as white and then tint them at runtime while overlapping one over another.
It depends on the framework you are using.

How to change GreyScale images to Colored variants?

I'm working on a little side-project that uses images with only grey-hues and no colors. I was wondering if it's possible to throw something like an opaque (is that the right word?) 'filter' or 'layer' over these images to color them according to the strenght of the Grey color.
Say I want the images to be blue, do I get the pixel-data and up the 'B', or is there an easyer way?
Basically what it boils down to is this: Everytime the app starts, a different color is selected (Orange, Blue, Green, Pink, etc.) and thrown over the grey images. But how does one achieve this?
-Zubaja
As #DerGolem mentioned above, if you want to do it programmatically, it looks like one of these tutorials could help you solve your problem:
Example to apply ColorFilter on ImageView
Swap color using ColorFilter
However, there might be an easier way. I haven't tried this myself, but this is what I would do:
In Gimp, or some other photo editor, convert the grey in your images to alpha (transparent). Then put your image in an ImageView in a FrameLayout. At runtime you can programmatically set the background color of the FrameLayout. Whatever color you set should show through the transparent areas of your image, making it look as if you changed the image color.
You'll have to apply it pixel by pixel.Pretty much like you already mentioned.Look here for inspiration:
Image Editing Filters Tutorials
Scroll down to "Android: Image Processing"

Strokefont Stroke Color Overwritten after setColor()

I have some Text that I sometimes want to have a black outline, and sometimes green. I thought I could accomplish this by having two StrokeFonts, one with black outline, and one with a green outline, and then when I instantiate my Text object I just use the font I want.
The problem is that after that, I ALSO need to set the main color (inside, not stroke) of the font based on other conditions. While my logic works, when I do setColor() the stroke always is black, rendering my first logic useless.
Is there something I'm missing here, or another way to get around this? I have commented out the setColor() calls after I decide which StrokeFont to use and I see the stroke properly, so I know it's getting overwritten with the setColor() call.
Set color multiplies the value of the existing color. So black (value 0) will never change color. But white will become any color you want.
So if you want to make a sprite or text that will assume any color, it has to start out as white.
I think you may still have a problem though, since the stroke of the stroke font is drawn to the same texture as the fill, so that any color adjustment made to the stroke will equally tint the fill.
You're either goiuing to need more Fonts, or choose another way to render them, such as using an outline font and a fill font to that you are actually displaying two Text objects.
Either way, you should be able to find your way if you understand that setColor multiplies the values times the existing value.

how can i add two colors and get the combination of both in a new button

I am creating an app in which user chooses two colors and the result of the two colors would be displayed in another box. No how can i do that ?
Do i need to add hex code of both the colors or what ?
Two ways to do it.
Assuming your choice of colors does not include alpha, just create two separate views that overlap each other (good visuals if they just overlap on an area but don't entirely cover each other - just to distinguish between the two). Set each view to the chosen color with an alpha of 50%. These views will blend and you will get your desired output.
If you want to "mix colors" to produce another "useable" value, the easiest computation is to just "average" each of the RGB values. That, or find a color mixing algorithm somewhere.

Categories

Resources