Skip to content

fix(android): reapply tintColor when Image src changes#11145

Open
owenthcarey wants to merge 1 commit intoNativeScript:mainfrom
owenthcarey:fix/android-image-tintcolor-reapply
Open

fix(android): reapply tintColor when Image src changes#11145
owenthcarey wants to merge 1 commit intoNativeScript:mainfrom
owenthcarey:fix/android-image-tintcolor-reapply

Conversation

@owenthcarey
Copy link
Copy Markdown

On Android, ColorFilter is applied to the Drawable, not the ImageView itself. When src changes dynamically (e.g. via binding), the new drawable replaces the old one and the tint is lost. This differs from iOS, where tintColor is a view-level property that persists across image changes.

This adds _reapplyTintColor() to the Android Image implementation and calls it from both code paths that load a new image:

  • onImageLoaded -- for images loaded natively via setUri (file/resource paths)
  • [imageSourceProperty.setNative] -- for images set via setImageBitmap (font icons, data URIs, ImageSource/ImageAsset)

@nx-cloud
Copy link
Copy Markdown

nx-cloud bot commented Mar 24, 2026

View your CI Pipeline Execution ↗ for commit 09312a7

Command Status Duration Result
nx test apps-automated -c=android ✅ Succeeded 3m 38s View ↗
nx run-many --target=test --configuration=ci --... ✅ Succeeded 3s View ↗

☁️ Nx Cloud last updated this comment at 2026-03-24 22:54:42 UTC

@CatchABus
Copy link
Copy Markdown
Contributor

CatchABus commented Mar 27, 2026

@owenthcarey Thanks for the PR!

I tried to replicate your problem but I couldn't.
This is a video of switching between 2 bitmaps in 3 seconds using a timer while setting both src and imageSource properties.
I'm using core v9 and android 16.

The tint-color is applied using css:

#img {
  tint-color: red;
}
screen-20260327-190404.mp4

Also, regarding the following statement:

ColorFilter is applied to the Drawable, not the ImageView itself.

The ImageView class handles the color filter internally, so it should normally be persisted between bitmap changes.

Could you please create an issue related to the problem and post an app sample or a recording demonstrating the problem from your device? Maybe it could be a corner case we're unaware of.

Copy link
Copy Markdown
Contributor

@CatchABus CatchABus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awaiting response from the author.

@NathanWalker
Copy link
Copy Markdown
Contributor

NathanWalker commented Mar 27, 2026

I believe this case is with dynamic bindings, not css @CatchABus - if the toolbox image-handling is run with the index.android changes commented out the issue shows itself.
https://github.com/NativeScript/NativeScript/pull/11145/changes#diff-4a3d33d5aaebbf4b40756ca73c95fe2980910999c65e66a33334c40715c460b6R12

@CatchABus
Copy link
Copy Markdown
Contributor

I believe this case is with dynamic bindings, not css @CatchABus - if the toolbox image-handling is run with the index.android changes commented out the issue shows itself. https://github.com/NativeScript/NativeScript/pull/11145/changes#diff-4a3d33d5aaebbf4b40756ca73c95fe2980910999c65e66a33334c40715c460b6R12

Thanks for pointing this out @NathanWalker. I'll check it out and continue with the review.

@NathanWalker
Copy link
Copy Markdown
Contributor

This appears to be unique to Angular binding case, not directly represented in core (xml). We'll leave open until more clarity emerges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants