205

Estoy usando ConstraintLayouten mi aplicación para hacer el diseño de las aplicaciones. Estoy tratando de crear una pantalla cada una EditTexty Buttondebería estar en el centro y Buttondebería estar debajo de EditTextcon un margen Superior solo 16dp.

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

activity_authenticate_content.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>

android android-layout android-constraintlayout N Sharma
fuente

145

Actualizar:

Cadena

Ahora puede usar la chainfunción en packedmodo 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>

Pycpik
fuente

1

Gracias @Pycpik No pude entender de qué sirve <android.support.constraint.Guideline. ¿Necesitamos usar cada vez que usamos ConstraintLayout?

N Sharma

¿De qué sirve layout_constraintGuide_percent?

N Sharma

1

Guidelinees solo un elemento invisible en el que puedes anclar tus vistas. layout_constraintGuide_percentes el porcentaje en el padre. Aquí 0.5 es 50% de altura

Pycpik

Gracias. Gotcha Ahora tengo dos TextInputEditTexty uno Button. Quiero colocarlos en un centro de 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

1

Puede centrar el del medio y agregar uno arriba y otro abajo o ponerlos en LinearLayouty centrarlo.

Pycpik

332

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

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, 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. Juegue un poco y verá cómo afecta la posición de las vistas.

binW
fuente

55

Este es un enfoque mucho mejor que usar pautas.

ssand

48

app:layout_constraintCenter_in="parent"Estaría mucho mejor. Pero como siempre Google no lo proporcionó.

Gojir4

1

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

TapanHP

Simple, fácil de entender.

Yohanes AI

2

Las pautas son mejores porque una vez que tiene un diseño complejo, lo que sucederá una vez que el marketing se apodere de él, entonces el centrado simplista ya no funciona. Es mejor tener pautas y centrarse en las pautas para la parte superior e inferior

Nick Turner

58

La solución con guía funciona solo para este caso particular con EditText de una sola línea. Para que funcione para EditText multilínea, debe usar una cadena "empaquetada".

<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:

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

Eugene Brusov
fuente

Esta es ciertamente 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 desee.

mdelolmo

21

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

Este ejemplo usa 50% de 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 el gradle, y aumente la versión si hay una nueva versión disponible:

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

vive el amor
fuente

12

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 derecho en el modo de diseño y elegir el centro.

Behrad
fuente

8

puede usar layout_constraintCircle para la vista central dentro de 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 restricciónCircle to parent y zero radius puede hacer que su vista sea el centro de la matriz.

Enakhi
fuente

La mejor solución. Al igual que una "aplicación: layout_constraintCenter_in =" parent "" (que no existe)

Bénédicte Lagouge

Cómo centrar los elementos en ConstraintLayout

Respuestas:

Actualizar: