CustomView is not appearing with the applied BackgroundColor only in Android

[Sridharan Gajendran]

Hi Team,

We are using version 25.2.7 and we found the style which we applied with different BackgroundColor is not getting applied only for Android. Tried to replicate in the simple sample with your provided code snippet in help.syncfusion.com. With that snippet also it's not working fine in Android.  Please find the code snippet. I need to apply a different BackgroundColor for the BoxView. Please help in achieving this. I have attached a simple view which I'm trying to achieve with your shimmer which it's already working fine in iOS but not in Android. Please find the image.

<shimmer:SfShimmer

            VerticalOptions="FillAndExpand"

            IsActive="True">

            <shimmer:SfShimmer.CustomView>

                <Grid

                    Padding="10"

                    ColumnSpacing="15"

                    RowSpacing="10">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="10" />

                        <RowDefinition Height="10" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                    </Grid.RowDefinitions>

                    <BoxView BackgroundColor="Red"

                             Grid.Row="0"

                             Grid.ColumnSpan="2"

                             HorizontalOptions="Start"

                             WidthRequest="300" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="1"

                             Grid.ColumnSpan="2"

                             HorizontalOptions="Start"

                             WidthRequest="250" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="2"

                             Grid.ColumnSpan="2"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="280" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="3"

                             Grid.ColumnSpan="2"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="260" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="5"

                             Grid.RowSpan="8" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="5"

                             Grid.Column="1"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="180" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="6"

                             Grid.Column="1"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="190" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="7"

                             Grid.Column="1"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="170" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="8"

                             Grid.Column="1"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="180" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="9"

                             Grid.Column="1"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="150" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="10"

                             Grid.Column="1"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="160" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="11"

                             Grid.Column="1"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="175" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="13"

                             Grid.RowSpan="3"

                             Grid.Column="1"

                             Margin="0,5,0,0" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="13"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="150" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="14"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="160" />

                    <BoxView BackgroundColor="Red"

                             Grid.Row="15"

                             HeightRequest="10"

                             HorizontalOptions="Start"

                             VerticalOptions="Start"

                             WidthRequest="175" />

                </Grid>

            </shimmer:SfShimmer.CustomView>

        </shimmer:SfShimmer>

[Vishal Omprasad]

Hi Sridharan,

Regarding “background color for custom view not applied only on Android”:
As per the current implementation, in the Xamarin.Forms SfShimmer control, the BackgroundColor provided to the custom view (such as BoxView) will not be applied to the shimmer. This is the expected behavior.

Please note that the custom view is used to replace the default view, but it does not impact the shimmer's appearance. You can customize the shimmer and wave colors using the Color and WaveColor properties.

Please refer to the following UG link to know more about Shimmer customization:
https://help.syncfusion.com/xamarin/shimmer/customization

We hope that this helps you. Please let us know if you need any further assistance.

Regards,
Vishal O.

[Surah Al Waqiah]

Have you checked for Android-specific style issues or overrides affecting BackgroundColor? It might help to test on different devices or emulators.

[Vidyalakshmi Mani]

Hi Sridharan,

The `BackgroundColor` of the `BoxView` does not impact the shimmer effect. The shimmer’s appearance relies on the `WaveColor` and `Color` properties of the `SfShimmer` control itself, rather than on the `BackgroundColor` of the `BoxView`. This behavior is expected.

The `BoxView` is primarily used for layout and positioning within the shimmer. To modify the shimmer's appearance, you should adjust the `WaveColor` and `Color` properties of the shimmer.

Please let us know if you have any other questions or need further assistance.

Regards,

Vidyalakshmi M.

[Sridharan Gajendran]

Hi Vidyalakshmi,

Yes, the suggestion which has been provided earlier resolved my issue. But try to have uniform behaviour for both the platforms. BoxView BackgroundColor was applying properly to iOS platform, it's not working for Android platform so, it will confuse the end users only when the behaviour is different for each platform. 

I guess you need to address Surah Al Waqiah's question

[Vishal Omprasad]

Hi Sridharan,

We have checked and we are able to replicate the reported scenario “background color being applied to CustomView of Xamarin.Forms SfShimmer control on iOS platform” from our end. We have logged issue report for the same. We will fix this issue and will include the fix in our upcoming weekly NuGet release update, which is expected to roll out on September 03, 2024. We appreciate your patience until then.

You can track the status of this report through the following feedback link.

Feedback link: https://www.syncfusion.com/feedback/60473/restrict-background-color-being-applied-to-customview-of-sfshimmer-on-ios-platform

Note: The provided feedback link is private, and you need to log in to view this feedback.

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization

Regards,
Vishal O.

[Vishal Omprasad]

Hi Sridharan,

We have fixed the reported scenario “background color was not applied to CustomView of Xamarin.Forms SfShimmer control on Android platform” from our end to have uniform behavior across all platforms. Due to the testing phase, we have prepared a custom patch (assembly) that includes the fix and have shared it below for your reference. Please test the patch and let us know if your issue is resolved.

Note:
Before installing the patch, kindly remove the bin and obj folders from all projects in the solution and clear the NuGet cache by following this link:  How to Clear NuGet Cache.

Disclaimer:

Please note that the custom assembly was created for version 26.2.12 specifically to address this issue. We will include the issue fix in our upcoming weekly NuGet release update. We appreciate your patience until then.

Regards,
Vishal O.

Attachment: Syncfusion_Xamarin_Shimmer_Assembly_26.2.12_4999cb8b.zip

[lucy victoria]

Here’s a concise approach to troubleshoot your issue:

1. Update Syncfusion: Ensure you’re using the latest version of Syncfusion libraries.

2. Check Overrides: Look for any Android-specific styles that might affect rendering.

3. Test BackgroundColor: Try a simple BoxView with BackgroundColor to isolate the issue.

4. Platform-Specific Code: Use OnPlatform to set properties differently for Android and iOS.

5. Review Documentation: Check Syncfusion’s documentation or support for known issues.

6. Contact Support: If the problem persists, reach out to Syncfusion support for further assistance.

[Vishal Omprasad]

Hi Lucy,

Thanks for the suggestion. We have already provided custom patch to fix this issue and we will include the fix in our upcoming weekly NuGet release update.

Regards,
Vishal O.

[Vishal Omprasad]

Hi Sridharan,

We have fixed the reported scenario “background color was not applied to CustomView of Xamarin.Forms SfShimmer control on Android platform” from our end to have uniform behavior across all platforms and included the fix in our latest weekly NuGet release update version 26.2.14, which is available for download in nuget.org.

Root-cause: CustomView background color was not considering in the existing implementation.

We thank you for your support and appreciate your patience in waiting for this update. Please feel free to reach out to us if you would require any further assistance.

Regards,
Vishal O.