1

recien estoy iniciando con android siguiendo videos de youtube, al momento de diseñar mi activity todo se ve bien, pero cuando la ejecuto, no se ve igual al diseño, espero obtener ayuda. como ven en las imagenes uso un constrainyLayout, en el diseño todo esta bien dimensionado aparentemente, pero cuano se ejecuta es como si estuviera incompleto,y si pongo todo mas arriba, es solo alli cuando se obtiene un mejor resultado, pero estoy seguro que esa no es la mera correcta.

este es el diseño en android studio

y asi se ve al ejecutarla, es como si le faltara espacio

<androidx.constraintlayout.widget.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=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="96dp"
        android:text="ESTA ES SOLO UNA PRUEBA DE DISEÑO"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="92dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.0" />

    <EditText
        android:id="@+id/editTextTextEmailAddress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="112dp"
        android:ems="10"
        android:hint="Ingresa tu correo"
        android:inputType="textEmailAddress"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="68dp"
        android:ems="10"
        android:hint="password"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextEmailAddress" />
</androidx.constraintlayout.widget.ConstraintLayout>
2
  • Muchas veces puede depender de la densidad de pixeles del emulador. Probalo en un telefono fisico. el 9 jun. 2020 a las 2:45
  • si, lo he probado, pero funciona igual e incluso se ve peor. el 9 jun. 2020 a las 3:44

2 respuestas 2

1

Okay, esto puede ser debido a varias razones.

Primeramente, asegúrate de que estés previsualizando tu XML en el mismo modelo que estas haciendo que tu emulador (o dispositivo) corra el programa. Para ello, en la barra de opciones que te aparece al abrir un archivo XML, te aparecerá una donde salen varios modelos por defecto con su resolución y densidad de pixeles por pulgada (ppi), selecciona el mismo modelo que estes utilizando al momento de correr tu programa (emulador), debido a que las resoluciones entre el modelo que eliges en tu diseño y tu emulador deben de ser las mismas para que se vea exactamente igual (en caso de que no hayas hecho un diseño responsivo correctamente).

Ademas, puedo ver que al diseñar tu XML no tienes activas las decoraciones (que te muestre la actionBar en la parte de arriba), lo cual muestra mas espacio del que realmente tienes en pantalla para diseñar. Para activarla, hay una opcion en las herramientas del XML que tiene el logo de un "OJO", activa la que dice "SHOW LAYOUT DECORATIONS" (Mostrar decoraciones) para que te renderize la actionBar en el XML.

Por ultimo, tienes que entender correctamente como funcionan los pixeles independientes por pulgada (dp) para que puedas hacer un diseño que se adapte a todo dispositivo, ademas de manejar correctamente el constraintLayout para generar las restricciones correctas y tus Views dentro de tus Activitys se comporten de manera adecuada. Pero a lo que veo en tus capturas, verifica primero que renderizes en un mismo modelo que tenga la misma densidad de pantalla (ppi) y activa las decoraciones para tu diseño.

Espero te ayude!

PD: te adjunto algunas imagenes.

Aqui puedes ver que no esta activadas las decoraciones.

Aqui he activado las decoraciones y me muestra la action bar

Aqui se muestran los modelos con los que se renderiza tu XML mientras lo estas diseñando

0

Todos los dispositivos son distintos al tamaño. Coloca todos los magiTop en parent igual que el button. Al ser todos automáticos, debería igualartelos todos y centrarlos en pantalla automáticamente. Pero si quieres limitar la parte superior como la parte inferior. Ponle limite solo en el top en la primera en el nombre i/o en el button en bottom.

3
  • Agrega codigo para que sea una pregunta completa, sino podrias haberlo colocado como comentario. el 9 jun. 2020 a las 11:31
  • Queria comentar, pero no me dejaba colocar comentarios. En la respuesta creo que me he explicado bien, no creo que haga falta codigo para eso.
    – Alejandro
    el 13 jun. 2020 a las 6:43
  • Es una respuesta valida es con codigo, para ti sera facil, pera para el que no sabe no lo es. el 13 jun. 2020 a las 14:07

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.