Skip to content

fix(android): reset background color when it becomes transparent or is removed #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
farfromrefug merged 1 commit into from
Oct 8, 2026
Merged

fix(android): reset background color when it becomes transparent or is removed #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions apps/automated/src/ui/view/view-tests.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,66 @@ export function testSetAndRemoveBackgroundColor() {
});
}

function getNativeBackgroundColor(v: View): number {
const drawable = (<android.view.View>v.android).getBackground();
if (drawable instanceof org.nativescript.widgets.BorderDrawable) {
return drawable.getBackgroundColor();
} else if (drawable instanceof android.graphics.drawable.ColorDrawable) {
return drawable.getColor();
}

return drawable ? undefined : 0;
}

export function testSetTransparentAndRemoveBackgroundColorWithBorderRadius() {
const lbl = new Label();
lbl.text = 'segment';
lbl.borderRadius = 8;
lbl.backgroundColor = new Color('red');
helper.buildUIAndRunTest(lbl, function (views: Array<View>) {
helper.waitUntilLayoutReady(lbl);
TKUnit.assertEqual(getNativeBackgroundColor(lbl), new Color('red').android, 'BackgroundColor not applied correctly!');

lbl.backgroundColor = new Color('transparent');
TKUnit.assertEqual(getNativeBackgroundColor(lbl), 0, 'transparent BackgroundColor not applied!');

lbl.backgroundColor = new Color('red');
TKUnit.assertEqual(getNativeBackgroundColor(lbl), new Color('red').android, 'BackgroundColor not applied correctly!');

lbl.backgroundColor = unsetValue;
TKUnit.assertEqual(getNativeBackgroundColor(lbl), 0, 'BackgroundColor not removed!');
});
}

export function testToggleClassBackgroundColorFromCssVariableWithBorderRadius() {
const stack = new StackLayout();
stack.className = 'segments';
stack.css = `
.segments { --tile-color: red; }
.segment { border-radius: 8; background-color: transparent; }
.segment-selected { background-color: var(--tile-color); }
.no-transparent-segment { border-radius: 8; }
`;
const lbl = new Label();
lbl.text = 'segment';
lbl.className = 'segment segment-selected';
stack.addChild(lbl);
helper.buildUIAndRunTest(stack, function (views: Array<View>) {
helper.waitUntilLayoutReady(lbl);
const red = new Color('red').android;
TKUnit.assertEqual(getNativeBackgroundColor(lbl), red, 'selected BackgroundColor not applied!');

lbl.className = 'segment';
TKUnit.assertEqual(getNativeBackgroundColor(lbl), 0, 'BackgroundColor should be transparent after deselection!');

lbl.className = 'no-transparent-segment segment-selected';
TKUnit.assertEqual(getNativeBackgroundColor(lbl), red, 'selected BackgroundColor not applied!');

lbl.className = 'no-transparent-segment';
TKUnit.assertEqual(getNativeBackgroundColor(lbl), 0, 'BackgroundColor should be reset after deselection!');
});
}

export function testBackgroundImage() {
const lbl = _createLabelWithBorder();
lbl.className = 'myClass';
Expand Down
18 changes: 16 additions & 2 deletions packages/core/ui/core/view/index.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1283,13 +1283,14 @@ export class View extends ViewCommon {
const nativeView = this.nativeViewProtected as NativeScriptAndroidView;
const canUseOutlineProvider = !background.hasBorderWidth() && !background.hasBoxShadows() && !background.clipPath && !background.image && SDK_VERSION >= 21 && (SDK_VERSION >= 33 || background.hasUniformBorderRadius());
if (onlyColor || canUseOutlineProvider) {
const backgroundColor = background.color?.android;
if (isBorderDrawable) {
// We need to duplicate the drawable or we lose the "default" cached drawable
backgroundDrawable = nativeView._cachedDrawable != null ? AndroidHelper.getCopyOrDrawable(nativeView._cachedDrawable, nativeView.getResources()) : null;
nativeView.setBackground(backgroundDrawable);
}
if (backgroundColor) {
// do not test the native color for truthiness: `transparent` is 0
if (background.color) {
const backgroundColor = background.color.android;
if (this.needsNativeDrawableFill && backgroundDrawable) {
backgroundDrawable.mutate();

Expand All @@ -1298,6 +1299,19 @@ export class View extends ViewCommon {
} else {
nativeView.setBackgroundColor(backgroundColor);
}
} else if (!isBorderDrawable && background.clearFlags & BackgroundClearFlags.CLEAR_BACKGROUND_COLOR) {
// background color was removed: restore the default background
if (this.needsNativeDrawableFill && backgroundDrawable) {
backgroundDrawable.mutate();

AndroidHelper.clearDrawableColor(backgroundDrawable);
backgroundDrawable.invalidateSelf();
} else {
const defaultDrawable = nativeView._cachedDrawable ?? null;
if (backgroundDrawable !== defaultDrawable) {
nativeView.setBackground(defaultDrawable);
}
}
}
// borderDrawable is slow
// let s use outline provider when we can
Expand Down
Loading