How to fix overlapping objects

Question

I have recently started understanding on how to code in Android Studio and want to set up basic coding. I created 2 number objects and 1 button, 1 plain text object. Without writing any piece of code, when I click on Run App button on Android Studio and select any Emulator, all the objects stack up on each other. Is there a simple way to fix this?

Following is the text in activity_main.xml:

<?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.myapplication70.MainActivity">

    <EditText
        android:id="@+id/editText3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Result"
        android:inputType="numberDecimal"
        tools:layout_editor_absoluteX="67dp"
        tools:layout_editor_absoluteY="223dp" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number"
        tools:layout_editor_absoluteX="67dp"
        tools:layout_editor_absoluteY="60dp" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="numberSigned"
        tools:layout_editor_absoluteX="67dp"
        tools:layout_editor_absoluteY="134dp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:layout_editor_absoluteX="100dp"
        tools:layout_editor_absoluteY="319dp" />

</android.support.constraint.ConstraintLayout>

You can't just expect it to work just because it looks good in the layout builder ;). Android has a plethora of different screen sizes and formats that you have to keep in mind. I see you picked ConstraintLayout (perhaps because you're familiar with the similar workflow as iOS InterfaceBuilder?) however for someone who has just started Android this layout might be difficult to understand.I suggest you look at LinearLayout: https://developer.android.com/guide/topics/ui/layout/linear.html — nbokmans, Mar 29 '17 at 12:41
See this docs for learning the Constraintlayout as Best. https://medium.com/exploring-android/exploring-the-new-android-constraintlayout-eed37fe8d8f1 — Noorul, Mar 29 '17 at 13:30
Thanks for info. I didnt pick any Constraint Layout, it is what is being set up Android Studio IDE by default. Hence I mentioned the AS version number :) — 9 PENCE, Mar 29 '17 at 13:48

score 1 · Answer 1 · answered Mar 29 '17 at 18:20

Seeing your layout, you are currently missing constraints. COnstraints are critical for the objects to stay in the same place as they are in the editor on an actual device.

You can add them manually by dragging and dropping to create them, or automatically using "Infer constraints"

score 1 · Answer 2 · answered Dec 07 '17 at 06:27

In Constraint Layouts you can easily overcome overlapping using Blue print adjusting objects. For eg. select one object and drag to the top edge using the point arrow(you will find while dragging) and to the left edge and to the right edge and to the bottom edge and then you can now adjust the position of the object.

score 0 · Answer 3 · edited Mar 29 '17 at 13:05

0

You're using a constraint layout as your main layout, which means that elements within the layout are going to be placed according to constraints, please check the Android Documentation for using constraint layouts.

edited Mar 29 '17 at 13:05

Dimitar

4,402
4
31
47

answered Mar 29 '17 at 12:44

Ilias Yahia

1
1

To add: In the editor it looks okay because of the (generated) `tools:layout_editor_absolute` attributes. Any attribute in the tools namespace is just for the editor. They do not make it to the apk. So yeah, you need constraints to properly lay out the children or just choose a different layout. – RobCo Mar 29 '17 at 12:49
Yes, I understand now. Will update this post if I find the right documentation and it should help avoid headaches to other newbies like me. Thanks a bunch. :-D – 9 PENCE Mar 29 '17 at 13:50

score 0 · Answer 4 · answered Mar 29 '17 at 13:05

As @RobCo mentioned, the tools namespace attributes are for the editor only:

When you build your app, the build tools remove these attributes so there is no effect on your APK size or runtime behavior.

The tools:layout_editor_absolute attributes in your layout file are automatically generated when you move the views in the layout editor, and are only meant to be used as a reference for you when designing your layouts.

Instead, you should take advantage of the app:layout_constraint... attributes, which can also be created in the layout editor. I suggest you take a look at the training documentation to learn how to do this.

Otherwise, as @nbokmans mentioned, you may want to consider a LinearLayout; which could be a little easier to wrap your head around.

I guess lot of more reading and studying is involved, cant just rely on default options provided by IDE. Thanks for your update :) — 9 PENCE, Mar 29 '17 at 13:49

score 0 · Answer 5 · answered Dec 07 '17 at 07:02

Remove all your tools:layout_editor_absoluteX & tools:layout_editor_absoluteY attributes.

As per Documentation

When you build your app, the build tools remove these attributes so there is no effect on your APK size or runtime behavior

If you want to align all your attributes according to your displayed preview and using ConstraintLayout, I suggest learn more about ConstraintLayout and how to Build a Responsive UI with ConstraintLayout

Also, to fix your current layout, you can make changes like:

<?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.myapplication70.MainActivity">

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:ems="10"
        android:inputType="numberSigned"
        app:layout_constraintEnd_toEndOf="@+id/editText1"
        app:layout_constraintStart_toStartOf="@+id/editText1"
        app:layout_constraintTop_toBottomOf="@+id/editText1" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:ems="10"
        android:hint="Result"
        android:inputType="numberDecimal"
        app:layout_constraintEnd_toEndOf="@+id/editText2"
        app:layout_constraintStart_toStartOf="@+id/editText2"
        app:layout_constraintTop_toBottomOf="@+id/editText2" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="@+id/editText3"
        app:layout_constraintStart_toStartOf="@+id/editText3"
        app:layout_constraintTop_toBottomOf="@+id/editText3" />

</android.support.constraint.ConstraintLayout>

score 0 · Answer 6 · answered Mar 06 '18 at 14:55

0

In android studio you have a button called "infer contraints".

Press that button and it will automatically place constrants for you.

answered Mar 06 '18 at 14:55

Daniel Healy

1

How to fix overlapping objects

6 Answers6