Search Unity

  1. Unity 2018.3 is now released.
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. We've updated our Terms of Service. Please read our blog post from Unity CTO and Co-Founder Joachim Ante here
    Dismiss Notice
  4. Want to provide direct feedback to the Unity team? Join the Unity Advisory Panel.
    Dismiss Notice
  5. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice

Unity UI layout groups

Discussion in 'Unity UI & TextMesh Pro' started by JeffreyA, Jun 8, 2018.

  1. JeffreyA


    Jun 6, 2017

    With Unity UI and as less scripting as possible i want to achieve a "chat dialogue" layout.

    Currently I have a scene where text-messages spawn left and right and below each other, just like chat applications have (e.g. Whatsapp layout).

    So far so good.

    The only thing that i cant create is the length of an individual text-bubble (blue or red panel).
    It does fit to the size of the text (shorter text = shorter bubble, longer text = longer bubble), but it has to stop
    halfway the screen.

    Unfortunately i cant give a MAX width to the chatbubble, which results in a chatbubble that behaves like:
    • It doesnt end where i want it to end (halfway parent panel) and it goes outside the screen (chatcontainer)
    • I can give it a preferred size which is halfway the screen. But in that case the blue "background" of the chat-bubble already has the size. If the text is shorter than that size, there is to much space on the right side of the text (in other words, the bubble is to large).

    How can I achieve this result? I am not afraid of programming, but if i can only use the layout-elements and UI elements of Unity itself, it is a bit easier.

    Currently is use the following settings and vertical, as said in the pictures, the textbox and background grow vertical when they need to. But horizontally, i have to give a preferred width, so when the text is really short like "OK", than the textbox is way to large.

    My hierarchy is:
    * Chatcontainer (is the parent of all and vertical layout group)
    *** Contentpanel (contains everything)
    *******npcMessageprefab (takes full width and is height of its child)
    **********Outline (is the chat-bubble itself and contains the text component, has to expend width till 60% and increase in height is necessary )
    *************Message (is the text itself and content size fitter)

    Can someone help me please? I am struggling with this problem for a couple days now and i cant find a solution on the internet.

    Below i have added screenshots of my setup and settings for the different objects for reference.
    Contentpanel = parent and vertical layout group to put the messages underneath its other.
    npcMessagePrefab (and playerPrefab) contain the text and timestamp

    Outline contains the actually text-message component and is the chatbubble.
  2. Hosnkobf


    Aug 23, 2016
    Hi @JeffreyA ,
    with the next version of my Asset BetterUI this will be possible. Unfortunately it will take some time until I can release the next version because I am involved in another project which hinders me from doing anything else right now...

    However, I achieved it by extending the ContentSizeFitter and add an option for maximum width / height to it.
    I cannot post my code, because it is full of Better UI related stuff...
    but basically you can override SetLayoutHorizontal() call the base implementation and after that call rectTransform.SetSizeWithCurrentAnchors() to apply the maximum width if necessary.