Nativescript: [ANDROID] TabBarItem icon size

[devlfm]

Hi,

I'm facing a problem with iconSource on TabView:

I was able to use font-icon on 2nd tab and the size is ok.
I couldn't find any place to set the icon size or TabViewItem size.

Thank you

[tsonevn]

Hi @devlfm,
You can try setting up the font-size for the TabView component. For example:
CSS

TabView{
   font-size: 18;
}

[devlfm]

Hi @tsonevn, that just works for font icon and not iconSource.

I eventually found the right icon size:
mdpi = 48x48 pixels, then the multipliers for ldpi(0.75) hdpi(1.5) xdpi(2) xxdpi(3) xxxdpi(4). BUT!! for ActionBar/TabBar the mdpi should be 32x32 with a transparent padding of 8px so the inner icon gets the true size of 24x24 > +info here: http://www.gargasz.info/android/

This is a pain is the a** because there are no official tool for batch all icons on a folder, and I have to make manually one by one..

[hanglearning]

I'm facing the similar issue for iOS. I'm trying to find the solution.

[RamyTalal]

Same issue here.

[tsonevn]

Hi @hanglearning @RamyTalal,
Can you provide more info about your problem? Also, it will help if you send us sample project, which could be used for debugging.
In the meantime make sure that the image, which you are loading, are defined in the App_Resources folder and follows the iOS and Android guidelines. More info could be found here.

[RamyTalal]

Hello @tsonevn,

I followed this guide to create a Tab View: https://docs.nativescript.org/angular/cookbook/tab-view-ng
And I've placed the images in drawable-nodpi, the images are converted from svg to png.

The problem is that I can change the dimensions in the <Image> tag, but there is no such flexibility with tabs.

[tsonevn]

Hi @RamyTalal,
The TabView component follows the design guidelines required by both platforms Android and iOS. Regarding that, both platforms do not provide any straightforward functionality, which can allow setting up further styling options to the icons in the TabView component. Regarding that, if you need the images in the tab to be scaled properly on the screen, you should define the needed images in the App_Resources folder and use them in the component.

[RamyTalal]

@tsonevn so I also need to place the images in the other drawable directories? And the scaling happens automatically?

[NickIliev]

@RamyTalal yep on Android, you should provide differently scaled images via the drawable resources and on iOS you could use scale factor for your resources images

[patrikengborg]

Thanks @devlfm your info got me on the right track. Adobe XD lets you batch-export images to all different sizes required by both iOS and Android, so that takes away a bit of the pain in the assy-ness at least.

[geilix10]

@patrikengborg @devlfm
Found a another simple way to convert a .png file to all android sizes. (For those who do not want to download Adobe XD).
Just open Android Studio create an empty project and do a right click on the folder "res" and click "Add Image Asset". There you can choose an image and convert it to all sizes with some more options than in Adobe XD.