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' });
Reactions are currently unavailable
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 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' });