1

Primera vez que me ocurre este problema, he creado una aplicación pequeñísima desde cero, en el diseño todo se muestra perfecto pero al ejecutar la app todo se junta a lado superior - izquierda. introducir la descripción de la imagen aquí

Aquí el código:

<?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>
1
  • A mi también me ha pasado, hoy que me puesto con aprender ese nuevo layout.
    – Codelaby
    Commented el 25 abr. 2017 a las 14:55

3 respuestas 3

2

Toda directiva tools solo afecta en ventana de diseño, como está usando valores absolutos te los posiciona correctamente en esta vista, pero en compilación no le asignas conectores entre los elementos, salen todos los componentes a la misma posición.

Documentación oficial de ConstraintLayout

Primero Conecta los pivotes de cada elemento:

Sitúate en la vista azul y el de la izquierda se alinea con el de arriba izquierda, te agregara un margen por defecto de 8, que verás que se sitúa como un sub-elemento, pero le indicas 0 y se establece como el de arriba. El elemento de abajo su pivote de arriba debe conectarlo con el de abajo del superior.

primer elemento

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

segundo elemento

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

Conectores: a2 -> a1 y b2 -> d1

Segundo paso Eliminar todo lo que es valor absoluto, te lo indica en mesajes de error en diseño.

tools:layout_editor_absoluteX y tools:layout_editor_absoluteY

Te dejo mi 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>
1

Estas usando un ConstraintLayout, tus vistas por default mostraran en la esquina superior izquierda (coordenadas en pantalla android 0,0), a menos que definas restricciones.

Puedes definir constraints horizontales y verticales para posicionar tu ImageView en determinada zona de la pantalla, esto arrastrando los circulos definidos en los bordes de la prevista:

introducir la descripción de la imagen aquí

de esta forma al ejecutar tu aplicación se mostraría en coordenadas diferente a 0,0:

introducir la descripción de la imagen aquí

1

Lo que intenté

  1. Quité tools:layout_editor_absoluteX y tools:layout_editor_absoluteYpero el diseño se "desarmó (osea no funcionó).
  2. Conecté los pivotes, es mucho trabajo cuando se tiene varios componentes, además que en el proceso estos "se mueven" (es muy complicado)

Cómo lo solucioné

  1. Hice clic derecho en un componente.
  2. Elegí la opción Constraint Layout.
  3. Hice clic en Infer Constraint.

introducir la descripción de la imagen aquí

Eso "automatiza" lo que antes intente pero no funcionó o es complicado hacerlo de forma manual.

2
  • también puedes recurrir antes de eliminar los absolutos, conectar manualmente y después eliminar absolutos, ya que los absolutos solo sirven para posicionar el elemento en tiempo de diseño. Es todo un mundo eso de constraint layout. Me ha gustado tu método de automatizar.
    – Codelaby
    Commented el 25 abr. 2017 a las 16:38
  • No todo es perfecto, el método "automatizado" esconde un secreto, probadlo ejecutando la app (especificamente girando) y vereis de lo que hablo, esto de la constraint me tiene un poco decepcionado
    – Jorny
    Commented el 25 abr. 2017 a las 16:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.