Center a label on a badge

Question

I’m not able to center a label inside a badge. It seems that the label is outside the badge. See the code:

<Grid      
    xmlns="http://xamarin.com/schemas/2014/forms"      
    xmlns:local="clr-namespace:Operacional"     
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
    x:Class="Operacional.BadgeView" 
        Padding="5"
        Margin="1"
        HeightRequest="16"     
        WidthRequest="32">

    <local:CircleView x:Name="BadgeCircle"
                      HeightRequest="16" 
                      WidthRequest="32" 
                      CornerRadius="16" 
                      VerticalOptions="Start" 
                      HorizontalOptions="Start" />

    <Label x:Name="BadgeLabel"
           TextColor="White" 
           VerticalOptions="Start"           
           HorizontalOptions="Start" 
           VerticalTextAlignment="Center" 
           HorizontalTextAlignment="Center"
           FontSize="10"/>
</Grid>

This is the Behind

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class BadgeView : Grid
    {
        public static BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(BadgeView), "0", propertyChanged: (bindable, oldVal, newVal) =>
        {
            var view = (BadgeView)bindable;
            view.BadgeLabel.Text = (string)newVal;
        });

        public static BindableProperty BadgeColorProperty = BindableProperty.Create("BadgeColor", typeof(Color), typeof(BadgeView), Color.Blue, propertyChanged: (bindable, oldVal, newVal) =>
        {
            var view = (BadgeView)bindable;
            view.BadgeCircle.BackgroundColor = (Color)newVal;
        });

        public string Text
        {
            get
            {
                return (string)GetValue(TextProperty);
            }
            set
            {
                SetValue(TextProperty, value);
            }
        }
        public Color BadgeColor
        {
            get
            {
                return (Color)GetValue(BadgeColorProperty);
            }
            set
            {
                SetValue(BadgeColorProperty, value);
            }
        }
        public BadgeView()
        {
            InitializeComponent();
            BadgeLabel.Text = Text;
            BadgeCircle.BackgroundColor = BadgeColor;
        }
    }

the screenshot below shows how it appears in the app

Answer 1

Just change the HorizontalOptions and VerticalOptions Label inside the Grid for Center. I would also recommend to make clear in the elements within the Grid their position:

<Grid      
    xmlns="http://xamarin.com/schemas/2014/forms"      
    xmlns:local="clr-namespace:Operacional"     
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
    x:Class="Operacional.BadgeView" 
    Padding="5"
    Margin="1"
    HeightRequest="16"     
    WidthRequest="32">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
    </Grid.RowDefinitions>
    <local:CircleView Grid.Row="0" Grid.Column="0"
                      x:Name="BadgeCircle"
                      HeightRequest="16" 
                      WidthRequest="32" 
                      CornerRadius="16" 
                      VerticalOptions="Start" 
                      HorizontalOptions="Start"/>
    <Label Grid.Row="0" Grid.Column="0"
           x:Name="BadgeLabel"
           TextColor="White" 
           VerticalOptions="Center"           
           HorizontalOptions="Center" 
           VerticalTextAlignment="Center" 
           HorizontalTextAlignment="Center"
           FontSize="10"/>
</Grid>

The Grid is one of the Layouts that allow Views to overlap, unlike StackLayout, for example. The components inside it will be organized in a row-column scheme according to the location definition and the components last declared will be on the previous ones. When this location is not explicit it becomes more difficult to understand the visual organization of the components in the layout in case you need to add or change the views later.

To better design the layout layout, it is also interesting to enable the option of Mostar limites do layout in the android developer options.

Issue 1: In your case, you need to set the size of the grid row and column, because when omitted the view takes up all available space, but you need it to take up only the space necessary to hold your label and Circle view.