CODEWITHSUNDEEP
androidiosxamarinxamarin.forms
Alan2
Alan2

Reputation: 24572

How does Xamarin Forms change the color of a png icon that I use in a bottom navigation area?

My application uses png images like this:

navHomeTabPage.IconImageSource = "ionicons_2_0_1_home_outline_25.png";

My code changes the icon color here:

android:TabbedPage.BarItemColor="{DynamicResource LabelTextColor}" 
android:TabbedPage.BarSelectedItemColor="{DynamicResource 
DroidBarSelectedItemColor}" TabBar.SelectedImageTintColor = UIColor.Red;

But can someone explain to me, how is the color changed. I though a png image already had just one color, so how does Android or iOS change this to a different color?

How about for svg? Do the mobile apps do a better job of changing a png or svg image? Is it better to use one than the other for a Botton navigation tab area?

Upvotes: 1

Views: 1871

Answers (1)

Ax1le
Ax1le

Reputation: 6643

For iOS, the tab bar on iOS won't use the image's original color by default. From this documentation, it says:

By default, unselected and selected images are automatically created from the alpha values in the source images. To prevent system coloring, provide images with UIImageRenderingModeAlwaysOriginal.

It means it will create a new image from the source image and use the system color or you can set the colors using the code above: TabBar.SelectedImageTintColor = UIColor.Red;. If you want to display the original image's color, you have to create a custom renderer for TabbedPage, and replace the icons with the api: UIImageRenderingModeAlwaysOriginal.

For Android, the bottom navigation page will create an extra layer called BottomNavigationView to control the color. It overlaps the original icon to show the colors you set using:

android:TabbedPage.BarItemColor="{DynamicResource LabelTextColor}" 
android:TabbedPage.BarSelectedItemColor="{DynamicResource 
DroidBarSelectedItemColor}"

If you prefer the original color, you can remove its ItemIconTintList in your custom tabbed page's renderer. See this thread: https://forums.xamarin.com/discussion/comment/376630#Comment_376630 for more information.

Upvotes: 2

Related Questions