How do I work with different icons for different theme? (iOS AssetCatalog& Android drawable)

Question

Hi Xamarin family !

I developed an application. I want to change the theme colors and the color of my icons according to the user packages in my application. For example, if the user is using a professional package, all my application colors and icons should be orange, if using a standard package, all my application colors and icons should be blue. I can manage application colors with resource from App.xaml. But how do I give different icons according to different packages?

For example, I currently have 100 orange icons for the professional package in my project's Asset Catalog. I have to add 100 blue icons with the same name for the standard package. They must have the same name because my screens are common. So they must have the same name on the xaml side.

I read documents like this one to solve this problem;
In this article, an example is made for direct application icons, not for in-app icons.
How do you think if I apply such a method for in-app icons? I'm waiting for your help.

Thanks in Advance

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

in-app icons.

Do you develop application like App store?

If so, you want to change the different in-app icons for different theme, Here are screenshots about different theme for different images.

First of all, I use following demo to make test.

https://github.com/MGohil/XFThemesSample

Then open the ThemeResources folder, Here are serveral themes,

I open BlueTheme.xaml, I add following code in <ResourceDictionary> tag.

   <Style x:Key="ShowImage" TargetType="Image">  
           <Setter Property="Source" Value="icon.png"/>  
       </Style>  

I open DarkTheme.xaml, I add following code in <ResourceDictionary> tag.

   <Style x:Key="ShowImage" TargetType="Image">  
           <Setter Property="Source" Value="monkeyprofile.jpg"/>  
       </Style>  

Note: I use different names for different images. If you want to change others theme, please add style as well.

Then, I apply style to Images, open the DashboardPage.xaml, found imageCircle:CircleImage, change the Source=xxxxx to Style="{StaticResource ShowImage}"

   <imageCircle:CircleImage  
                               Grid.Column="1"  
                               Aspect="AspectFill"  
                               HeightRequest="100"  
                               HorizontalOptions="End"  
                               Style="{StaticResource ShowImage}"  
                               VerticalOptions="End"  
                               WidthRequest="100">  
                               <imageCircle:CircleImage.GestureRecognizers>  
                                   <TapGestureRecognizer Command="{Binding GoToProfilePageCommand}" NumberOfTapsRequired="1" />  
                               </imageCircle:CircleImage.GestureRecognizers>  
                           </imageCircle:CircleImage>  

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hello @Anonymous

Thank you very much for answering my question very quickly and creating sample code. My application is being tested in TestFlight and I am continuing to develop my application.

Your answer actually solves my problem 80%. But I just have a problem like this.

There are too many screens in my project and changing the theme based on user packages is a later decision. Images change according to the theme chosen in your example. Thats right. But I want this;

When the application is opened, I get the user's package information from the API. And according to this information I received, I want to change the colors and icon colors of my application. For example, I normally have 100 orange icons in AssetCatalog. icon1, icon2, icon3 etc ... I will create another asset catalog and put blue icons in it with the same name but this time. For example icon1, icon2, icon3 etc ...

According to the information I got from the API when the application is opened, can I set AssetCatalog1 if the professional package is, and AssetCatalog2 if the standard package is? If I do this, I won't need to set the image name in xaml again by giving the same icon names to the new asset catalog.