Xamarincommunitytoolkit: [Bug] SnackBar visualisation problems

Created on 22 Nov 2020  ·  24Comments  ·  Source: xamarin/XamarinCommunityToolkit

Description

XCT's snack bar visualises strangely both on iOS and Android.

Android:
Screenshot 2020-11-22 at 21 51 35

The colors are correct (peach background + white text), but the actual message is not shown and the snack bar is very tall.

iOS:
Screenshot 2020-11-22 at 21 50 53

Message text is visible, but the colours and font are wrong (it doesn't seem to honor any defaults on iOS).

Steps to Reproduce

This is how I set up the snack bar defaults, done once at startup of app in App.xaml.cs's constructor:
```c#
SnackBarOptions.DefaultDuration = TimeSpan.FromSeconds((double)snackBarDuration);
SnackBarOptions.DefaultBackgroundColor = (Color)accentColor;
MessageOptions.DefaultForeground = (Color)navigationBarTextColor;
MessageOptions.DefaultFontSize = (OnPlatform)baseFontSize;
MessageOptions.DefaultFontFamily = (string)snackBarFontFamily;
SnackBarActionOptions.DefaultBackgroundColor = (Color)accentColor;
SnackBarActionOptions.DefaultForegroundColor = (Color)navigationBarTextColor;
SnackBarActionOptions.DefaultFontSize = (OnPlatform)baseFontSize;
SnackBarActionOptions.DefaultFontFamily = (string)snackBarFontFamily;


The values are read from a style dictionary, and are correctly fetched. Android seems to honor these values but not iOS.

The snack bar in the screenshots is shown via:

```c#
var snackBarOptions = new SnackBarOptions()
{
    MessageOptions = new MessageOptions()
    {
        Message = message
    },
    Actions = new SnackBarActionOptions[1]
    {
        new SnackBarActionOptions()
        {
            Text = "Go to Chat",
            Action = async () =>
            {
                // my action code here...
            }
        }
    }
};
await this.DisplaySnackBarAsync(snackBarOptions);

Expected Behavior

Default values should be honoured on all platforms, and message should be visible on Android.

Actual Behavior

Default values are not honoured on iOS, and message is not visible on Android. The snack bar's height is also far too tall on Android (probably follow-up problem of the message not displaying properly?).

Basic Information

  • Version with issue: 1.0.0-preview1104
  • Last known good version: ?
  • IDE: VS For Mac 8.9 Preview
  • Affected Devices: iOS simulator, Android simulator

Pinging @VladislavAntonyuk as he's been on point with these, feel free to ignore if it's not relevant for you.

Snackbar bug

Most helpful comment

it should fix android as well.

All 24 comments

Fix in PR #603

Fix in PR #603

Ah thank you! Hope it gets merged soon 👍

Do you have any idea what's up with Android's message though, it doesn't display the message and the notification is very tall?

Thanks again!

I think the text is displayed but it has the same color as background. Could you please play with different text colors?

I think the text is displayed but it has the same color as background. Could you please play with different text colors?

Thank you, I will try that.

The colors are currently set up as such:
SnackBarOptions.DefaultBackgroundColor = peach
MessageOptions.DefaultForeground = white
SnackBarActionOptions.DefaultBackgroundColor = peach
SnackBarActionOptions.DefaultForegroundColor = white

Maybe I misunderstood the properties? I tried to get a peach background with white text.

Could you please attach a small repro.
It works with default settings. I will review it again with the sample project

Could you please attach a small repro.
It works with default settings. I will review it again with the sample project

Hi and thank you for the information. I saw you committed https://github.com/xamarin/XamarinCommunityToolkit/pull/603/commits/790eb6a99d8b0cb3643583c7cbede66485207708 so do you still need a repro, or does that cover the Android color issue?

Thank you again.

it should fix android as well.

@Tommigun1980 please confirm if it is fixed for you

it should fix android as well.

Kinda, but there's still two problems with text:

1) Default font size doesn't seem to be honoured on Android as text is drawn with a very large size no matter what it's set to. This applies to both the message text and to button text, and doesn't happen on iOS.

1) FontFamily doesn't support font aliases (at least on iOS - can't say on Android as the font is so large).

  • Add a font to your shared project's Resources folder.
  • Add the following to your shared project's AssemblyInfo.cs:
    ```c#
    [assembly: ExportFont("SomeFont.ttf", Alias = "MyFont")]
* 'MyFont' can now be used anywhere a FontFamily is needed, for example in a label:
```xaml
<Label Text="Hello!" FontFamily="MyFont" />
  • ... except in MessageOptions.DefaultFontFamily and SnackBarActionOptions.DefaultFontFamily
  • On iOS it just crashes with a null reference exception when it's trying to assign a null font to the snackbar's internal label. On Android it doesn't crash but I can't say if the proper font is used.

Workaround: Don't use the font alias for MessageOptions.DefaultFontFamily and SnackBarActionOptions.DefaultFontFamily.

@VladislavAntonyuk are you able to work on this one? If so do you prefer to open a new issue and close this one?

as for the font I think it should be a separate issue.

@Tommigun1980 please create a small example of how you set and use Snackbar.

@Tommigun1980 can you create another issue for the font issue? Thanks, I'll close this for now.

Thank you, I’ll do that.

But the default font size not being honored on Android issue is related to this report I think, no?

@Tommigun1980 yes, it's. And thank you so much❣

@Tommigun1980 yes, it's. And thank you so much❣

You are welcome. Should this be reopened for the first issue then, or do you want me to put that in the other report also?

the issue with Android text color should be already fixed. The original issue with iOS colors as well.
As for the font alias, I think it is enhaunchement rather then bug.

the issue with Android text color should be already fixed. The original issue with iOS colors as well.
As for the font alias, I think it is enhaunchement rather then bug.

The original issue was fixed but I reported two new issues, of which one was that Android doesn’t honor default font size. The colors were fixed yes.

I’ll make a new issue for the font alias as we agreed. I don’t think it’s an enhancement though as Xamarin does support aliases in all font attributes.

What do you want to do with the default font size not being honoured on Android issue, keep it in this one or create a new one for it as well? Default font size does work properly on iOS now after the latest fixes so thanks a lot for that, and for the other fixes as well!

If you change the font size, does it work on Android?
Create a new issue, but link it to this one. I prefer 1 issue - 1 bug fix. If you describe all problems at once, it is easier to miss something.

If you change the font size, does it work on Android?
Create a new issue, but link it to this one. I prefer 1 issue - 1 bug fix. If you describe all problems at once, it is easier to miss something.

Here are the new issues when testing with your patch:
https://github.com/xamarin/XamarinCommunityToolkit/issues/607#issuecomment-735040571

@Tommigun1980 please check if it fixes all your cases: https://dev.azure.com/xamarin/public/_build/results?buildId=31623&view=artifacts&pathAsName=false&type=publishedArtifacts

Hi. I tested with the latest version and everything seemed to work, except the font size was extremely tiny on Android (like just a couple of pixels tall). It looks like the font size units between iOS and Android are probably not the same?

@Tommigun1980 For Android we use pixels. We used points, but you got a huge text. It should be fixed with the latest build.
I rewrote iOS and macOS implementation. You should have multiple action buttons and all platforms automatically use system colors, until you override them.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mhrastegary77 picture mhrastegary77  ·  3Comments

varyamereon picture varyamereon  ·  4Comments

SunnyMukherjee picture SunnyMukherjee  ·  3Comments

hnabbasi picture hnabbasi  ·  6Comments

jfversluis picture jfversluis  ·  5Comments