Класс ConstraintLayout

Класс ConstraintLayout из библиотеки androidx.constraintlayout позиционирует дочерние элементы ограничениями. В XML нужен namespace app и атрибуты layout_constraint*. Так задают привязку к родителю и к соседним View. Подходит для сложных экранов без вложенных LinearLayout.

Синтаксис

<androidx.constraintlayout.widget.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">
	<!-- constrained views -->
</androidx.constraintlayout.widget.ConstraintLayout>

Параметры

Параметр	Описание
`android:layout_width`	Ширина корневого layout.
`android:layout_height`	Высота корневого layout.
`app:layout_constraintTop_toTopOf`	На дочернем View: верх привязан к верху другого id или parent.
`app:layout_constraintStart_toStartOf`	Начало View привязано к началу цели.
`app:layout_constraintEnd_toEndOf`	Конец View привязан к концу цели.
`app:layout_constraintBottom_toBottomOf`	Низ View привязан к низу цели.

Пример

Давайте центрируем текст в родителе:

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

	<TextView
		android:id="@+id/label"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="abcde"
		app:layout_constraintTop_toTopOf="parent"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

На экране текст "abcde" окажется по центру экрана.

Пример

Давайте поставим кнопку под текстом:

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

	<TextView
		android:id="@+id/label"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="abcde"
		app:layout_constraintTop_toTopOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		android:layout_marginTop="48dp" />

	<Button
		android:id="@+id/action"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="12345"
		app:layout_constraintTop_toBottomOf="@id/label"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		android:layout_marginTop="16dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

На экране кнопка "12345" встанет под текстом "abcde" по центру.

Смотрите также

класс LinearLayout,
простой ряд или столбец без constraint
класс FrameLayout,
стопка View без привязок
класс RecyclerView,
список, который часто кладут в constraint экран
класс View,
базовый класс каждого виджета в layout