ConstraintLayout is disorder after running it using an emulator

Question

After creating a constraint layout, I run it using the AVD (Android virtual device). The objects are stuck at the top left corner all mashed together as result. (Please see the picture)

There is my XML file:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.pc.myapplication.MainActivity">

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="username"
    tools:layout_editor_absoluteX="232dp"
    tools:layout_editor_absoluteY="143dp" />

<EditText
    android:id="@+id/TFusername"
    android:layout_width="368dp"
    android:layout_height="40dp"
    android:ems="10"
    android:inputType="textPersonName"
    tools:layout_editor_absoluteX="376dp"
    tools:layout_editor_absoluteY="133dp" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="password"
    tools:layout_editor_absoluteX="232dp"
    tools:layout_editor_absoluteY="228dp" />

<EditText
    android:id="@+id/TFpassword"
    android:layout_width="368dp"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="textPassword"
    tools:layout_editor_absoluteX="376dp"
    tools:layout_editor_absoluteY="213dp" />

   <Button
    android:id="@+id/BLogin"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="onButtonClick"
    android:text="Login"
    tools:layout_editor_absoluteX="503dp"
    tools:layout_editor_absoluteY="307dp" />
 </android.support.constraint.ConstraintLayout>

I sawed some question talk about the same problem and the solution was to update the constraint layout version. But, in my case The constraint layout version installed is 1.0.2 (the new one). Is there a soution for this issue?

I don't see you add any constraint to the views, they should have some attribute like `app:constraint_top_toBottomOf`. Read some tutorial again — Tam Huynh, May 20 '18 at 14:49
Possible duplicate of [ConstraintLayout views in top left corner](https://stackoverflow.com/questions/42594033/constraintlayout-views-in-top-left-corner) — Zoe, May 21 '18 at 09:31

score -1 · Accepted Answer · answered May 20 '18 at 15:10

-1

you need to add constraints to your views to determine how are they displayed on the screen.

I think you need to read more about ConstrainLayout

if you face any issues in understanding it please tell me

answered May 20 '18 at 15:10

Moustafa EL-Saghier

1,721
1
13
43

ConstraintLayout is disorder after running it using an emulator

1 Answers1