0

Buenas noches a todos,

Estoy creando una aplicación para practicar con los Constraint Layout y me gustaría saber como puedo centrar verticalmente los cuatro elementos que tengo, os dejo el código del 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=".MainActivity">

    <TextView
        android:id="@+id/tvBeforeTranslate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Intridici il tixti"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/etBeforeTranslate"
        android:layout_width="350dp"
        android:layout_height="200dp"
        android:layout_marginTop="30dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvBeforeTranslate" />

    <TextView
        android:id="@+id/tvAfterTranslate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="Intridici il tixti"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etBeforeTranslate" />

    <EditText
        android:id="@+id/etAfterTranslate"
        android:layout_width="350dp"
        android:layout_height="200dp"
        android:layout_marginTop="30dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvAfterTranslate" />


</android.support.constraint.ConstraintLayout>

Solamente tengo esos cuatro elementos, y lo dicho, necesito centrarlos a los 4 verticalmente, ya que horizontalmente ya los tengo centrados. Muchas gracias.

2
  • Selecciona en modo Editor, selecciona todos los elementos y presiona click izquierdo ->Center->Vertically, Documentacion Oficial, Codelabs quizas es lo que intentas lograr.
    – A. Palacio
    Commented el 27 jun. 2019 a las 19:31
  • Si y no, porque esto me centra cada elemento, yo quería centrar los cuatro en conjunto
    – Ludiras
    Commented el 27 jun. 2019 a las 19:37

2 respuestas 2

0

Vale, ya lo he solucionado yo mismo, he creado otro Constraint Layout que encierre los elementos, de tamaño wrap content tanto alto como ancho, le añado las constrains y listo, dejo el código para quien le sirva, aunque si hay una solución mejor soy todo ojos:

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

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tvBeforeTranslate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Intridici il tixti"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/etBeforeTranslate"
            android:layout_width="350dp"
            android:layout_height="200dp"
            android:layout_marginTop="30dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvBeforeTranslate" />

        <TextView
            android:id="@+id/tvAfterTranslate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:text="Intridici il tixti"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/etBeforeTranslate" />

        <EditText
            android:id="@+id/etAfterTranslate"
            android:layout_width="350dp"
            android:layout_height="200dp"
            android:layout_marginTop="30dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvAfterTranslate" />

    </android.support.constraint.ConstraintLayout>




</android.support.constraint.ConstraintLayout>
0

Qué onda amigos.

Una solución más fácil es crear un chain a los cuatro elementos. Para hacer eso lo único que tienes que hacer es seleccionar el primer TextView y presionar/mantener "shift" y seleccionar los demás elementos. (Esto en la pestaña de Design).

Una vez seleccionados todos los elementos debes de dar click derecho en cualquier elemento y seleccionar Chains -> Create vertical chain.

Y listo. por default se acomodan centrados de forma vertical, ocupando toda la pantalla.

Dejo el código generado por el IDE Android Studio.

<?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">

    <TextView
        android:id="@+id/tvBeforeTranslate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Intridici il tixti"
        app:layout_constraintBottom_toTopOf="@+id/etBeforeTranslate"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/etBeforeTranslate"
        android:layout_width="350dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toTopOf="@+id/tvAfterTranslate"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvBeforeTranslate" />

    <TextView
        android:id="@+id/tvAfterTranslate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Intridici il tixti"
        app:layout_constraintBottom_toTopOf="@+id/etAfterTranslate"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etBeforeTranslate" />

    <EditText
        android:id="@+id/etAfterTranslate"
        android:layout_width="350dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvAfterTranslate" />
    
</android.support.constraint.ConstraintLayout>

2
  • Pero estamos en el mismo supuesto que la respuesta que me ha dado el compañero, lo centra verticalmente a lo largo de toda la vista padre, yo quiero que me centre los elementos juntos.
    – Ludiras
    Commented el 30 jun. 2019 a las 9:48
  • Lo unico que tienes que hacer es agregar este atributo a los cuatro elementos de tu constraint app:layout_constraintVertical_chainStyle="packed"
    – piragna
    Commented el 2 jul. 2019 a las 15:06

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.