How to debug an unexpected Android layout?

Question

My ConstraintLayout is showing some strange plotting of items on app. It is showing the elements correct positions on the preview screen of the android studio but while running app on the phone the positions of the elements are strange.

Here is the screen shot of app:

My layout is:

<?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"
android:background="@drawable/background"
>
 <android.support.v7.widget.Toolbar 
 xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="34dp"
    android:layout_height="56dp"
    android:text="appbar"
    android:background="@android:color/transparent"
    tools:layout_editor_absoluteY="25dp"
    tools:layout_editor_absoluteX="8dp" />
<ImageView
    android:id="@+id/imgBooks"
    android:layout_width="272dp"
    android:layout_height="302dp"
    android:src="@drawable/books"
    tools:layout_editor_absoluteY="81dp"
    tools:layout_editor_absoluteX="56dp"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/toolbar" />

<ImageView
    android:id="@+id/imgName"
    android:layout_width="40dp"
    android:layout_height="35dp"
    app:srcCompat="@drawable/name"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="373dp"
    android:layout_below="@+id/imgBooks"
    android:layout_alignParentStart="true" />
<EditText
    android:id="@+id/etEmail"
    android:layout_width="320dp"
    android:layout_height="43dp"
    android:ems="10"
    android:text="Email"
    android:inputType="textEmailAddress"
     tools:layout_editor_absoluteX="67dp"
    tools:layout_editor_absoluteY="417dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:layout_above="@+id/etPhone"
    android:layout_toEndOf="@+id/imgPhone" />
<ImageView
    android:id="@+id/imgEmail"
    android:layout_width="38dp"
    android:layout_height="34dp"
    app:srcCompat="@drawable/email"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="417dp"
    android:layout_alignTop="@+id/etEmail"
    android:layout_toStartOf="@+id/etEmail" />

<EditText
    android:id="@+id/etName"
    android:layout_width="320dp"
    android:layout_height="43dp"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="Name"
    tools:layout_editor_absoluteX="67dp"
    tools:layout_editor_absoluteY="373dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:layout_above="@+id/etEmail"
    android:layout_alignEnd="@+id/btn" />
<ImageView
    android:id="@+id/imgPhone"
    android:layout_width="35dp"
    android:layout_height="31dp"
    app:srcCompat="@drawable/phone"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="463dp"
    android:layout_alignTop="@+id/etPhone"
    android:layout_alignParentStart="true" />
<EditText
    android:id="@+id/etPhone"
    android:layout_width="320dp"
    android:layout_height="43dp"
    android:ems="10"
    android:inputType="phone"
    android:text="Phone"
    tools:layout_editor_absoluteX="67dp"
    tools:layout_editor_absoluteY="463dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:layout_above="@+id/btn"
    android:layout_alignStart="@+id/etName"
    android:layout_alignEnd="@+id/btn" />

<Button
    android:id="@+id/btn"
    android:layout_width="344dp"
    android:layout_height="48dp"
    android:text="Download Brochure"
    android:layout_gravity="center_vertical|center_horizontal"
    tools:layout_editor_absoluteX="20dp"
    tools:layout_editor_absoluteY="514dp"
    android:fontFamily="AvenirLTStd Light"
    android:textColor="#ffffff"
    android:background="@drawable/curves"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true" />

</android.support.constraint.ConstraintLayout>

Possible duplicate of [ConstraintLayout views in top left corner](https://stackoverflow.com/questions/42594033/constraintlayout-views-in-top-left-corner) — Ben P., Jul 28 '17 at 06:49
Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Jul 28 '17 at 08:21
Once you get a useful answer, please do not remove essential parts of the question. That makes the question less useful for future readers, who may be able to learn from it. — halfer, Aug 23 '17 at 07:34

score 2 · Answer 1 · edited Jul 28 '17 at 08:22

2

The problem is you are not using constraints at all which is the whole point of constraint layout.

For example, if you don't use constraints on Download Brochure button and use only tools:layout_editor_absoluteX and tools:layout_editor_absoluteY attributes, the button stays at the position where you put it on the editor but when you compile the app, the button goes top left corner.

You need to add those to Download Brochure button, then set its location. So it will be on the same position in every possible situation.

app:layout_constraintLeft_toLeftOf="parent",
app:layout_constraintRight_toRightOf="parent"

But I suggest you to do it on editor while playing around with constraint layout which is much easier.

You can also watch this video. https://www.youtube.com/watch?v=sO9aX87hq9c. It helps a lot.

edited Jul 28 '17 at 08:22

halfer

19,824
17
99
186

answered Jul 28 '17 at 07:34

gunesevitan

882
10
25

app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" by adding these lines the button is going on the top of the screen but not at its orignal postion :( @gunessun – varun pandey Jul 28 '17 at 07:53
even the small image views and edittext are running away please see my code properly and help @gunessun – varun pandey Jul 28 '17 at 07:55
As I said It is hard for me to do it on xml by looking at it. You can watch the video and do it yourself on editor much easier – gunesevitan Jul 28 '17 at 08:32

How to debug an unexpected Android layout?

1 Answers1