Search code examples
xmlandroid-layoutpreview

Regular preview and garbled layout output

I'm a beginner in programming and I have a problem in my very first project.

I have just added a button and a textview between the default ConstraintLayout tags.
But what program shows in preview box will not take place in run app output:

Preview tab and codes

But elements will nesting together like this

Solution

  • Your Button and TextView do not have run time constraints. Here is a tutorial on ConstraintLayout that discusses constraints.

    When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints. However, this is only to make editing easier; if a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).

    btw, when posting code in a Stack Overflow question, you should paste it as code and not as an image. (Click the "?" then "advanced help" in the upper right corner of the Stack Overflow editor to see how to do this.) Pasted text helps those who would like to answer your question to work with your code if needed.