Project Emulator does not look like what is not supposed to be. All the buttons and text are all togetor

I had this problem myself and I'm not sure why it does it, I've only just started learning android maybe one of the teachers here or someone better than I can explain it but the solution i found was to right click on the textview and button in design view and navigate to...

constraint layout > turn on autoconnect

This got my Fun Facts app looking like it should on my device.

Sometimes in the preview window elements aren't representative of where they're going to actually be (not sure why)

make sure you have layout constraints - easily added with the align button in the top toolbar of the preview window (for me its below the device name - Nexus 4/5 in this case)

Also in this example use the text editor to make sure they're not hard coded pixel dimensions

E.g. My code for centered text

    <TextView
        android:id="@+id/factTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ants stretch when they wake up in the morning"
        android:textSize="24sp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Problem hard coded

    <TextView
        android:id="@+id/factTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ants stretch when they wake up in the morning"
        android:textSize="24sp"
        tools:layout_editor_absoluteY="250dp"
        tools:layout_editor_absoluteX="73dp" />