How to add any number in notification icon in Xamarin.Forms

Question

I want to create a notification icon and showing all unread message as count, How to achieve this. This tool is best for this.

Answer 1

I'm sharing the one I build. It's picture with a badge on top of it with Xamaring controls only.

Just fine tune the Height and Width of the "badge" on the Frame and the content on the Label.

Position the X-Axis of the badge with the ConstraintExpression: "Constant=14"

<RelativeLayout>
    <Image Source="picture.png" WidthRequest="28" HeightRequest="28" />
    <Frame BackgroundColor="#FF0000" OutlineColor="White"
        RelativeLayout.HeightConstraint="22"
        RelativeLayout.WidthConstraint="22"
        CornerRadius="11"
        HorizontalOptions="Center"
        Padding="0"
        IsClippedToBounds="True"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=14}"
        RelativeLayout.YConstraint="-6">
        <StackLayout WidthRequest="22">
            <Label Padding="2" Text="+5" RelativeLayout.WidthConstraint="22" TextColor="White" FontSize="12" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
        </StackLayout>                                            
    </Frame>
</RelativeLayout>

Picture of the above code on my app (the "+5" badge):

Answer 2

First, you need to have a BadgeView, to represent the notification counter. In order to achieve this, you can use the BadgeView NuGet Package

After adding to your solution, you can add in XAML a badge indicator:

<badge:BadgeView Text="{Binding BadgeNumber}" BadgeColor="{Binding BadgeColor}" VerticalOptions="Center" HorizontalOptions="End" />

The next step, is putting all together, so you need to have a Image (your bell), and pack the image with the Badge View. Since you want to overlay both elements, you can use a Grid.

<Grid>
     <Image Source="bell.png" HorizontalOptions="Center" VerticalOptions="Center"
    <badge:BadgeView Text="{Binding BadgeNumber}" BadgeColor="{Binding BadgeColor}" VerticalOptions="End" HorizontalOptions="Start" />
</Grid>

Here you are setting the image, to be in the center, and the badge to be in the Top Left Corner. After this, you should manipulate the Badge Position with Margins, in order to put the badge in the correct position that you want.