I want to implement UI layout in Unity:
Final look

And here's what I've already done in Unity using an scroll view and putting a Vertical Layout Group and a Content Size Fitter on its content

enter image description here enter image description here

Now the problem is because I'm using Vertical Layout Group on scroll view's content I'm unable to assign the x value of these chat bubbles because I have to align the other user's chat bubbles to the left and align the self chat bubbles to the right just like the first image. Any ideas on that?

Chat bubblr rect transform component

  • 1
    \$\begingroup\$ Hint: not every GameObject is one you see. You can vertically stack "slices" that span the whole width of your chat, then horizontally align the speech bubbles and icons within that "slice" container. \$\endgroup\$
    – DMGregory
    Jul 7, 2019 at 11:39
  • \$\begingroup\$ How a bubble's width and height are computed? \$\endgroup\$ Jul 8, 2019 at 7:55

1 Answer 1


Here is a quick proof of concept of how I would do this:

canvas hierarchy

Wrap each text bubble in another object which has the width of the whole chat box.

  1. The ChatBox has a Vertical Layout Group with "Force Child Expand" on. This causes the "Wrapper" child objects to always have the width of the full chat box.
  2. The "Wrapper" child objects is solely responsible for defining the space in which the chat bubble should be aligned. You might want to hide this object by removing the Image and CanvasRenderer components so it's nothing but a RectTransform. I just left them visible in this screenshot to better illustrate what is going on.
  3. The "ChatBubble" is then placed within the "Wrapper". To switch between left-aligned and right-aligned boxes, set the Anchor and Pivot positions like this:

inspector for chat bubles

You can use the Width of the ChatBubble and the Height of the Wrapper to control the horizontal and vertical size of the bubble.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .