ConstraintLayout views in top left corner

Question

Every time I create views like Button and TextView in ConstraintLayout, they all get stuck at the top corner instead of where I placed them.

I tried to create new activities and change the emulator, but the result is still the same.

This is a screenshot of what's happening:

What may be the issue?

Commensurate

show your xml code. – Stafani

Do you want to show your button and text at the centre ? – Stafani

yes this is exactly what im trying to do – Commensurate

Use Relative Layout Instead. At least thats how I tackled the problem now. – Modestine

As mentioned in the previous answers if you do not provide constraints in constraint layout It will sett the element to top left corner. If you are new android, you should start with basic activity and if you want move UI elements in layout editor freely use a relative layout instead. – Deuteron

Answer 1

As stated in Constraint Layout guides:

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).

You must add at least one horizontal and one vertical constraint for the view.

I guess you haven't applied any constraints.

Either manually apply constraints to the view, or let the layout editor do it for you using "Infer constraints" button:

Joella

Answer 2

When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints... this is only to make editing easier

In other words, the View will "stay where you leave it" until you add constraints.

The reason it looks different in the Preview vs your app is because anything in your XML with tools: is going to be removed from the code when your app runs. These options are only for the Android Studio layout editor, not representative of what you should expect to see when the code runs.

And it may be troublesome for beginners because

a missing constraint won't cause a compilation error

However

the Layout Editor indicates missing constraints as an error in the toolbar. To view the errors and other warnings, click Show Warnings and Errors (red button with number). To help you avoid missing constraints, the Layout Editor can automatically add constraints for you with the Autoconnect and infer constraints features

More details

Algonkian

I find that this happens even in the Layout Editor. For example, if I drop an ImageView into the middle of the layout, it will still get stuck in the upper left corner. I have to change its dimensions before I can move it, or do anything with it. This doesn't seem to be the documented behavior. – Martica

Yes, that is exactly what "stays where you leave it" means – Algonkian

Answer 3

A quick, easy way to fix this is to click on the component (TextView, ImageView, etc.) and click the infer constraints button. It looks like 2 yellow plus signs.

infer constraints image

Kovno

Answer 4

add this in xml to the button etc

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.57"

then play with it in the design.

Good luck! :)

Cultivator

Answer 5

Basically this type of problem happens when you use ConstraintLayout .

• So Go to Preview From Android Studio.

• Select That button you want to set at the specific position

• At last just click the infer constrains button as i mention in the picture below on a red circle.

Thats All run the project and see magic

Thank you

Thielen