Did you verify this is a real problem by searching the [NativeScript Forum]
https://discourse.nativescript.org/t/material-design-icons-in-action-bar/5793/18?u=manojdcoder
Tell us about the problem
ActionItem / TabView icon's resolution is too low when loaded from file system
Which platform(s) does your issue occur on?
Android
Please provide the following version numbers that your issue occurs with:
- CLI: 4.0.2
- Cross-platform modules: 4.0.0
- Runtime(s): 4.0.1
Please tell us how to recreate the issue in as much detail as possible.
This playground example below generates an image from font icon, it is loaded perfectly when used in Image component but when used with icons in ActionItem / TabViewItem the resolution is very low. The problem seems to be the method we use to convert Bitmap into Drawable - It's deprecated and Android official docs suggests to use a different method to create Drawable instance with right resolution.
https://play.nativescript.org/?template=play-tsc&id=DYLgPA&v=1
Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.
Replace the code below in app.ts of the playground example above which fixes the resolution issues.
import * as app from 'application';
import { isIOS, isAndroid } from 'platform';
import { Color } from 'color';
import { ActionBar, ActionItem } from 'ui/action-bar';
declare var android, java;
if (isIOS) {
(<any>ActionBar.prototype).originalUpdateColors = (<any>ActionBar.prototype).updateColors;
(<any>ActionBar.prototype).updateColors = function (navigationBar) {
this.originalUpdateColors(navigationBar);
this.nativeView.tintColor = new Color('green').ios;
};
}
if (isAndroid) {
(<any>ActionBar.prototype)._1addActionItems = function () {
let menu = this.nativeViewProtected.getMenu();
let items = this.actionItems.getVisibleItems();
menu.clear();
for (let i = 0; i < items.length; i++) {
let item = <ActionItem>items[i];
let menuItem = menu.add(android.view.Menu.NONE, (<any>item)._getItemId(), android.view.Menu.NONE, item.text + "");
let filePath = item.icon
if (filePath) {
const bitmap = android.graphics.BitmapFactory.decodeFile(filePath);
menuItem.setIcon(new android.graphics.drawable.BitmapDrawable(app.android.context.getResources(), bitmap));
}
menuItem.setShowAsAction(android.view.MenuItem.SHOW_AS_ACTION_ALWAYS);
}
};
}
app.start({ moduleName: 'home/home-page' });
Did you verify this is a real problem by searching the [NativeScript Forum]
https://discourse.nativescript.org/t/material-design-icons-in-action-bar/5793/18?u=manojdcoder
Tell us about the problem
ActionItem / TabView icon's resolution is too low when loaded from file system
Which platform(s) does your issue occur on?
Android
Please provide the following version numbers that your issue occurs with:
Please tell us how to recreate the issue in as much detail as possible.
This playground example below generates an image from font icon, it is loaded perfectly when used in
Imagecomponent but when used with icons inActionItem/TabViewItemthe resolution is very low. The problem seems to be the method we use to convertBitmapintoDrawable- It's deprecated and Android official docs suggests to use a different method to createDrawableinstance with right resolution.https://play.nativescript.org/?template=play-tsc&id=DYLgPA&v=1
Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.
Replace the code below in
app.tsof the playground example above which fixes the resolution issues.