205

Estou usando ConstraintLayoutno meu aplicativo para fazer o layout dos aplicativos. Estou tentando criar uma tela em que um EditTexte Buttondeve estar no centro e Buttondeve estar abaixo de EditTextcom uma margemTop apenas 16dp.

Aqui está o meu layout e a captura de tela como está agora.

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
fonte

145

Atualizar:

Corrente

Agora você pode usar o chainrecurso no packedmodo como descrito na resposta de Eugene.

Diretriz

Você pode usar uma diretriz horizontal na posição de 50% e adicionar restrições inferior e superior (8dp) ao edittext e ao botão:

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

1

Obrigado @Pycpik Não consegui entender de que serve <android.support.constraint.Guideline? Precisamos usar sempre que usamos ConstraintLayout?

N Sharma

Para que serve layout_constraintGuide_percent?

N Sharma

1

Guidelineé apenas um item invisível no qual você pode ancorar suas visualizações. layout_constraintGuide_percenté a porcentagem no pai. Aqui 0,5 é 50% de altura

Pycpik 31/03

Obrigado. Peguei vocês. Eu tenho agora dois TextInputEditTexte um Button. Eu quero colocá-los no centro da tela. Mas até agora não é pastebin.com/iXYtuXHg, aqui está a captura de tela dropbox.com/s/k7997q2buvw76cp/q.png?dl=0

N Sharma

1

Você pode centralizar o meio e adicionar um acima e outro abaixo ou colocá-los em um LinearLayoute centralizá-lo.

Pycpik 31/03

332

Existe uma maneira mais simples. Se você definir restrições de layout da seguinte maneira e seu EditText tiver tamanho fixo, ele será centralizado no layout da restrição:

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

O par esquerdo / direito centraliza a vista horizontalmente e o par superior / inferior centraliza-a na vertical. Isso ocorre porque quando você define as restrições inferior esquerda, direita ou superior, maiores que a vista, a vista fica centralizada entre as duas restrições, ou seja, o viés é definido em 50%. Você também pode mover a visualização para cima / baixo ou direita / esquerda, definindo o viés. Brinque um pouco e você verá como isso afeta a posição das visualizações.

binW
fonte

5

Essa é uma abordagem muito melhor do que usar diretrizes.

ssand

48

app:layout_constraintCenter_in="parent"seria muito melhor. Mas como sempre, o Google não forneceu.

Gojir4

1

Isso é mais apropriado e também já vi isso em muitas palestras e exemplos de autoridades.

TapanHP

Simples, fácil de entender.

Yohanes AI

2

As diretrizes são melhores porque, uma vez que você tenha um layout complexo, o que acontecerá assim que o marketing se apoderar dele, a centralização simplista não funcionará mais. Melhor ter diretrizes e centro para a orientação para cima e em baixo

Nick Turner

58

A solução com diretriz funciona apenas para este caso específico com uma única linha EditText. Para fazê-lo funcionar para o EditText com várias linhas, você deve usar a cadeia "compactada".

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

Veja como fica:

Você pode ler mais sobre o uso de cadeias nas seguintes postagens:

Eugene Brusov
fonte

Esta é certamente a melhor resposta. Outras respostas funcionam apenas para uma ou duas visualizações. Esta é mais escalável, pois funciona para uma, duas e quantas visualizações você desejar.

Mdelolmo 6/03/19

21

Você pode centralizar uma vista como uma porcentagem do tamanho da tela.

Este exemplo usa 50% de largura e altura:

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

Isso foi feito usando o ConstraintLayout versão 1.1.3. Não se esqueça de adicioná-lo às suas dependências no gradle e aumente a versão se houver uma nova versão disponível:

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

amor ao vivo
fonte

12

adicione essas tags na sua visualização

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

e você pode clicar com o botão direito do mouse no modo de design e escolher o centro.

behrad
fonte

8

você pode usar o layout_constraintCircle para a vista central dentro do 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>

com o comando restrição ao pai e raio zero, você pode fazer com que sua visualização seja o centro do pai.

Enakhi
fonte

best.solution.ever. Assim como um "app: layout_constraintCenter_in =" parent "" (que não existe)

Bénédicte Lagouge

Como centralizar os elementos no ConstraintLayout

Respostas:

Atualizar: