Android components together when running app

Question

Android components together when running app

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

1

First time this problem happens to me, I created a very small application from scratch, everything is perfect in the design, but when you run the app, everything comes together on the top - left side.

Here the code:

<?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.galeki.suma.clsMain">

    <TextView
        android:id="@+id/lblNum1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Número 1"
        tools:layout_editor_absoluteX="29dp"
        tools:layout_editor_absoluteY="28dp" />

    <EditText
        android:id="@+id/txtNum1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        tools:layout_editor_absoluteX="110dp"
        tools:layout_editor_absoluteY="16dp" />

    <EditText
        android:id="@+id/txtNum2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        tools:layout_editor_absoluteX="110dp"
        tools:layout_editor_absoluteY="84dp" />

    <TextView
        android:id="@+id/lblNum2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Número 2"
        tools:layout_editor_absoluteX="29dp"
        tools:layout_editor_absoluteY="96dp" />

    <Button
        android:id="@+id/btnSumar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="ClicSumar"
        android:text="SUMAR"
        tools:layout_editor_absoluteX="148dp"
        tools:layout_editor_absoluteY="231dp" />

    <TextView
        android:id="@+id/lblTotal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Total"
        tools:layout_editor_absoluteX="29dp"
        tools:layout_editor_absoluteY="161dp" />

    <EditText
        android:id="@+id/txtTotal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        tools:layout_editor_absoluteX="110dp"
        tools:layout_editor_absoluteY="149dp" />

</android.support.constraint.ConstraintLayout>

android android-layout

asked by Jorny 25.04.2017 в 01:29

source

3 answers

2

Any directive tools only affects in the design window, since you are using absolute values, you correctly position them in this view, but in compilation you do not assign connectors between the elements, all the components go to the same position.

Official documentation of ConstraintLayout

First Connect the pivots of each element:

Situate yourself in the view azul and the one on the left is aligned with the top left, you will add a default margin of 8, which you will see that is placed as a sub-element, but you indicate 0 and it is established like the one above. The element below its top pivot must connect with the bottom of the top.

first element

------b1-------
a1           c1
------d1-------

second element

------b2-------
a2           c2
------d2-------

Connectors: a2 -> a1 and b2 -> d1

Second step Eliminate everything that is absolute value, it tells you in error tables in design.

tools:layout_editor_absoluteX and tools:layout_editor_absoluteY

I leave you my layout

<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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.webserveis.app.testrecyclerviews.MainActivity"
    tools:showIn="@layout/activity_main">

    <Button
        android:id="@+id/btn_edit_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Edit and Delete items"
 />

    <Button
        android:id="@+id/btn_only_read"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Only Read"
        android:layout_marginLeft="0dp"
        app:layout_constraintLeft_toLeftOf="@+id/btn_edit_delete"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/btn_edit_delete" />


</android.support.constraint.ConstraintLayout>

answered by 25.04.2017 в 16:57

1

You are using a ConstraintLayout , your default views will show in the upper left corner (coordinates on android screen 0,0), unless you define restrictions .

You can define horizontal and vertical constraints to position your ImageView in a certain area of the screen, this by dragging the circles defined in the edges of the one planned:

This way, when you run your application, it would be shown in coordinates other than 0.0:

answered by 25.04.2017 в 17:06

Position one div inside another in the upper part and the others below JavaScript jquery selector in typescript

score 1 · Accepted Answer

What I tried

I removed tools:layout_editor_absoluteX and tools:layout_editor_absoluteY but the design was "disarmed (so it did not work).

I connected the pivots, it's a lot of work when you have several components, besides that in the process these "move" (it's very complicated)

How I solved it

I right click on a component.

I chose the Constraint Layout option.

I click on Infer Constraint.

That "automates" what I tried before but it did not work or it's complicated to do it manually.