Why does wrap_content to width in TextView holds the full width?

Question

I have a simple TextView in a LinearLayout . When I set the TextView width to wrap_content it gets flexible with the content but as I set the orientation of my layout to vertical then the text gets the full width of the screen.

I have set the background color for both layout and textview, so I can see the actual occupying space of my text

I have read the difference between wrap_content and match_parent but in my case, it doesn't actually do what it is supposed to do.

Here's my XML:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#fe4236"
    android:layout_width="match_parent"
    android:layout_height="match_parent"  
    android:orientation="vertical"
    >


<TextView
    android:text="Hi there!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="36sp"
    android:textColor="@android:color/black"
    android:background="#ccddff"
   />

</LinearLayout>

Answer 1

Update

Apologies if I sounded like I was chastising your or if it sounded like a personal attack on my original Answer; I didn't have the full picture and assumed you were looking for a solution to the problem.

What I truly wanted to articulate was that the snippet of XML you posted doesn't produce the same output in my environment (and it shouldn't to the best of my knowledge); when I looked at it, it looked fine even before attempting to run it, so it made me frown at the possibility which also let me to believe you were doing something else that I wasn't aware of , hence why I asked for more info.

Now that we know you're using an online visualizer... let me tell you that I've never seen it before, but for context, the Android Studio visualizer looks like this:

The only modification I made to your snippet is to add the missing XML header:

<?xml version="1.0" encoding="utf-8"?>

at the top of the file (Udacity visualizer gives an error if you add it).

So in summary, what I tried to say in my original answer, is that there's nothing you need to do here, for your assumption that the wrap_content in the TextView should be enough for the text to wrap its content, is correct .

Udacity is wrong and it's not correctly rendering a Vertical Linear Layout with wrapping children on the horizontal axis.

Good luck with your training!

_{For what is worth, (and only to make sure you see where I come from), if you would have posted the Udacity thing when you first posted this question, I would have been able to save you the trouble and potentially frustrating experience of having to read my original answer.}

ORIGINAL ANSWER BELOW, NO LONGER RELEVANT.

I'm not sure where/how are you seeing this, but I think you need to understand how the Layout engine works on Android first.

What's going on

I pasted your code in my Android Studio (3.4.1) and here's what I see:

It doesn't matter if it's vertical or horizontal for there's plenty of space to put both in either orientation.

What can you do?

If you feel like doing it using ConstraintLayout (I would) then this is how you'd achieve the same result:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"                                             
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#fe4236"
  >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"

        android:text="Hi there!"
        android:background="#ccddff"
        android:textColor="@android:color/black"
        android:textSize="36sp"
        />
</android.support.constraint.ConstraintLayout>

(Not posting a screenshot, but trust me it looks the same).