Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Badge still rectangular (no corner radius) on iOS and Android #14

Open
sweldon opened this issue Jul 14, 2020 · 1 comment
Open

Badge still rectangular (no corner radius) on iOS and Android #14

sweldon opened this issue Jul 14, 2020 · 1 comment

Comments

@sweldon
Copy link

sweldon commented Jul 14, 2020

Hello, I checked out the closed issues related to square badges, and tried to initialize the CircleViewRenderer, but the badges are still square on both iOS and Android. I'm on the latest stable version of xamarin, latest version of BadgeView. Any ideas what else could be causing this?

Example of my AppDelegate on iOS

        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            // Some more code here
            CircleViewRenderer.Initialize();
            return base.FinishedLaunching(app, options);
        }

Example of what I'm seeing:
Screen Shot 2020-07-13 at 8 27 22 PM

@sweldon
Copy link
Author

sweldon commented Jul 15, 2020

For anyone still stuck on this, I did create a simple workaround. Since BadgeView is essentially only a CircleView and a Label packaged up inside a Grid, I just used this structure manually in my xaml, and set CornerRadius on the CircleView:

<Grid>
    <Grid.Margin>
        <OnPlatform
        x:TypeArguments="Thickness"
        Android="18, -20, 0, 0" iOS="18, -15, 0, 0"/>
    </Grid.Margin>
<badge:CircleView
    BackgroundColor="Red"
    x:Name="BadgeCircle"
    HeightRequest="18"
    WidthRequest="18"
    CornerRadius="18"
    VerticalOptions="Center"
    HorizontalOptions="Center" />
<Label FontAttributes="Bold"
       x:Name="BellBadge"
       TextColor="White"
       VerticalOptions="Center"
       HorizontalOptions="Center"
       VerticalTextAlignment="Center"
       HorizontalTextAlignment="Center"
       FontSize="10"/>
</Grid>

You can play around with the margins and the alignment, but that got me the corner radius I was looking for. I'm going to leave this issue open though just in case, since there does seem to be a problem with <views:BadgeView ... /> getting the corner radius even when the circleview renderer is initialized/linked. Nevertheless super cool plugin @SuavePirate thank you for your hard work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant