XamarinForms RelativeLayout: Can't get relative layout to resize correctly in a row

Question

Here is my issue:

The red block is meant to be the avatar for the person sometime, and the blue balloon a chat message. The chat message object is a RelativeLayout with a Label and an Image positioned one of top of each other, but not matter what I do, I can't get it to be centered. I only have one View:

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace TestChat
{
    public partial class ChatPage : ContentPage
    {
        public ChatPage ()
        {
            this.Title = "Chat page";
            InitializeComponent ();
        }

        void OnChatClick (object sender, EventArgs args) { 
            Image pic = new Image {
                Source = "bubble.png",
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Aspect = Aspect.Fill
            };

            Label textLabel = new Label {
                Text = "Hello",
                TextColor = Color.White,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.EndAndExpand
            };

            Frame picFrame = new Frame {
                HasShadow = false,
                BackgroundColor = Color.Red,
                Padding = new Thickness (0),
                Content = pic
            };

            Frame textFrame = new Frame {
                HasShadow = false,
                BackgroundColor = Color.Transparent,
                Padding = new Thickness (0,0,15,0),
                Content = textLabel
            };

            RelativeLayout overlayLayout = new RelativeLayout { BackgroundColor = Color.Blue, HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand };

            overlayLayout.Children.Add (picFrame,
                xConstraint: Constraint.RelativeToParent((parent) => parent.X),
                yConstraint: Constraint.RelativeToParent((parent) => parent.Y),
                widthConstraint: Constraint.RelativeToParent((parent) => parent.Width-2),
                heightConstraint: Constraint.RelativeToParent((parent) => parent.Height-2)
            );

            overlayLayout.Children.Add (textFrame,
                xConstraint: Constraint.RelativeToParent((parent) => parent.X),
                yConstraint: Constraint.RelativeToParent((parent) => parent.Y),
                widthConstraint: Constraint.RelativeToParent((parent) => parent.Width-2),
                heightConstraint: Constraint.RelativeToParent((parent) => parent.Height-2)
            );

            Frame overlayContainerFrame = new Frame {
                HasShadow = false,
                BackgroundColor = Color.Red,
                Padding = new Thickness(1),
                HeightRequest = 100,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                Content = overlayLayout
            };

            StackLayout horizontalLayout = new StackLayout {
                Orientation = StackOrientation.Horizontal
            };

            BoxView avatarImage = new BoxView {
                Color = Color.Red,
                HeightRequest = 50,
                WidthRequest = 50
            };

            horizontalLayout.Children.Add (avatarImage);

            horizontalLayout.Children.Add (overlayContainerFrame);

            ChatScrollViewStackLayout.Children.Add (horizontalLayout);

            //ChatStackLayout.Children.Add (pic);
        }

        void CreateChatBubble() {

        }
    }   
}

Does anyone have any ideas why I can't get the relative layout to resize accordingly so it doesn't go out of range of the screen? I tried setting its WidthConstraint to parent.With-52 to make up for the avatar taking up 50 units horizontally, but instead I get this:

I've been stuck at this for at least 8 hours now, and I'm pretty much out of ideas. Any tips would be greatly appreciated. Here is the project's git repo so you can clone it if you would like to test anything: https://github.com/sgarcia-dev/xamarin-chat.git

Any help would be greatly appreciated, and feel free to completely ignore my code if it looks messy if you can replicate what I want. (One image on the left, and a message bubble on the right with an underlying image background)

Answer 1

Check out this implementation

    void OnChatClick (object sender, EventArgs args) { 
        var pic = new Image {
            Source = "bubble.png",
            Aspect = Aspect.Fill
        };

        var textLabel = new Label {
            Text = "Hello",
            TextColor = Color.White,
            VerticalOptions = LayoutOptions.Center,
            LineBreakMode = LineBreakMode.WordWrap
        };

        var relativeLayout = new RelativeLayout {
            BackgroundColor = Color.Navy,
//          HeightRequest = 1000
        };

        var absoluteLayout = new AbsoluteLayout { 
            VerticalOptions = LayoutOptions.Center,
            BackgroundColor = Color.Blue
        };

        var frame = new Frame {
            BackgroundColor = Color.Red
        };

        absoluteLayout.Children.Add (pic,
            new Rectangle (0, 0, 1, 1),
            AbsoluteLayoutFlags.All);

        absoluteLayout.Children.Add (textLabel,
            new Rectangle (0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize),
            AbsoluteLayoutFlags.PositionProportional);

//      textLabel.SizeChanged += (object label, EventArgs e) => {
//          relativeLayout.HeightRequest = textLabel.Height + 30;
//          absoluteLayout.HeightRequest = textLabel.Height + 30;
//      };

        relativeLayout.Children.Add (frame,
            heightConstraint: Constraint.RelativeToParent (parent => parent.Height),
            widthConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.3));

        relativeLayout.Children.Add (absoluteLayout,
            xConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.3),
            widthConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.7));


        ChatScrollViewStackLayout.Children.Add (relativeLayout);
    }

If you need to auto-adjust height of the chat message for long text uncomment all five commented lines.