Cómo centrar los elementos en ConstraintLayout

8 minutos de lectura

avatar de usuario
N Sharma

estoy usando ConstraintLayout en mi aplicación para hacer el diseño de aplicaciones. Estoy tratando de crear una pantalla donde uno EditText y Button debe estar en el centro y Button debe estar debajo de EditText con un margen Superior solo 16dp.

Aquí está mi diseño y captura de pantalla de cómo se ve en este momento.

actividad_autenticar_contenido.xml

<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"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    tools:context="com.icici.iciciappathon.login.AuthenticationActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress" />

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toTopOf="@id/client_id_input_layout" />

</android.support.constraint.ConstraintLayout>

ingrese la descripción de la imagen aquí

avatar de usuario
papelera

Hay una forma más sencilla. Si establece restricciones de diseño de la siguiente manera y su EditText tiene un tamaño fijo, se centrará en el ConstraintLayout:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

El par izquierdo/derecho centra la vista horizontalmente y el par superior/inferior la centra verticalmente. Esto se debe a que cuando establece las restricciones izquierda, derecha o superior e inferior más grandes que la vista en sí, la vista se centra entre las dos restricciones, es decir, el sesgo se establece en 50%. También puede mover la vista hacia arriba/abajo o hacia la derecha/izquierda configurando el sesgo usted mismo. Juega un poco con él y verás cómo afecta la posición de las vistas.

  • Este es un enfoque mucho mejor que el uso de directrices.

    – arena

    17 de noviembre de 2017 a las 15:21

  • Esto es más apropiado y también lo he visto en muchas charlas y ejemplos de funcionarios.

    – TapanHP

    18 de septiembre de 2018 a las 7:32

  • Sencillo, fácil de entender.

    – Yohanim

    28 de diciembre de 2018 a las 4:27

  • Las pautas son mejores porque una vez que tiene un diseño complejo, lo que sucederá una vez que el marketing lo controle, el centrado simplista ya no funciona. Es mejor tener guías y centrar la guía para la parte superior e inferior.

    –Nick Turner

    18 de enero de 2019 a las 14:34


  • esto solo es útil si la vista de texto que desea centrar no se usa para ajustar la posición de otros objetos de vista …

    – Lago Bénédicte

    13 de marzo de 2020 a las 11:04

avatar de usuario
Pycpik

Actualizar:

Cadena

Ahora puede utilizar el chain característica en packed modo como se describe en la respuesta de Eugene.


Guía

Puede usar una guía horizontal en una posición del 50% y agregar restricciones inferiores y superiores (8dp) para editar el texto y el botón:

<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"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress"/>

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/login_auth"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        android:layout_marginTop="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

</android.support.constraint.ConstraintLayout>

Editor de diseño

  • Gracias @Pycpik No pude entender cuál es el uso de <android.support.constraint.Guideline ? ¿Necesitamos usar cada vez que usamos ConstraintLayout ?

    – N. Sharma

    31 de marzo de 2017 a las 15:10

  • Cuál es el uso de layout_constraintGuide_percent ?

    – N. Sharma

    31 de marzo de 2017 a las 15:13

  • Guideline es solo un elemento invisible en el que puede anclar sus puntos de vista. layout_constraintGuide_percent es el porcentaje en el padre. Aquí 0.5 es 50 % de altura

    – Pycpik

    31 de marzo de 2017 a las 15:15


  • Gracias. Entendido. ahora tengo dos TextInputEditText y uno Button. Quiero colocarlos en un centro de la pantalla. Pero a partir de ahora no es pastebin.com/iXYtuXHg aquí está la captura de pantalla dropbox.com/s/k7997q2buvw76cp/q.png?dl=0

    – N. Sharma

    31 de marzo de 2017 a las 15:38


  • Puede centrar el del medio y agregar uno arriba y otro abajo o ponerlos en un LinearLayout y céntralo.

    – Pycpik

    31 de marzo de 2017 a las 15:42

avatar de usuario
Eugenio Brusov

La solución con guía funciona solo para este caso particular con una sola línea EditText. Para que funcione para multilínea EditText Deberías usar layout_constraintVertical_chainStyle="packed".

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/authenticate"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress" />

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toBottomOf="@id/client_id_input_layout" />

</android.support.constraint.ConstraintLayout>

Así es como se ve:

Ver en Nexus 5

Puede leer más sobre el uso de cadenas en las siguientes publicaciones:

  • Esta es sin duda la mejor respuesta. Otras respuestas solo funcionan para una o dos vistas. Este es más escalable, ya que funciona para una, dos y tantas vistas como quieras.

    – mdelolmo

    6 de marzo de 2019 a las 16:07

  • por qué con Botón simple también sirve para android:layout_width="wrap_content"

    – Código para la vida

    23 de abril a las 6:22

avatar de usuario
vive el amor

Puede centrar una vista como un porcentaje del tamaño de la pantalla.

Este ejemplo usa el 50% del ancho y alto:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"></LinearLayout>

</android.support.constraint.ConstraintLayout>

Esto se hizo usando ConstraintLayout versión 1.1.3. No olvide agregarlo a sus dependencias en gradle y aumente la versión si hay una nueva versión disponible:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

ingrese la descripción de la imagen aquí

agregue estas etiquetas en su vista

    app:layout_constraintCircleRadius="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"

y puede hacer clic con el botón derecho en el modo de diseño y elegir el centro.

avatar de usuario
Aldán

Puedes usar layout_constraintCircle para vista central interior ConstraintLayout.

<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:id="@+id/mparent"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageButton
            android:id="@+id/btn_settings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_home_black_24dp"
            app:layout_constraintCircle="@id/mparent"
            app:layout_constraintCircleRadius="0dp" />

</android.support.constraint.ConstraintLayout>

con la restricción del círculo al padre y el radio cero, puede hacer que su vista sea el centro del padre.

avatar de usuario
Aldán

Solo agrega android:gravity="center" en tu diseño y listo 🙂

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad