Итак. Мы рассмотрели, как задавать размеры для наших UI элементов и рассмотрели первый базовый контейнер -  LinearLayout.
Как я уже писал раньше - есть два базовых основных контейнера - ConstraintLayout и LinearLayout. 

Давайте рассмотрим ConstraintLayout.  

ConstraintLayout - Это контейнер который позволяет расставлять элементы относительно друг друга или границ контейнера в котором он находится - то есть родителя. 

Что это значит? А значит то, что мы просто говорим этот элемент левым краем, примыкает к левому краю чего-либо (Родитель или другой элемент).  Верх элемента примыкает к верхнему краю чего-либо (Родитель или другой элемент) и т. д.  

Давайте рассмотрим список всех атрибутов, которые используются в ContraintLayout для размещения элементов.

• app:layout_constraintBottom_toBottomOf="" - наш элемент нижним краем примыкает к нижнему краю чего-либо.
• app:layout_constraintBottom_toTopOf="" - наш элемент нижним краем примыкат к верхнему краю чего-либо.
• app:layout_constraintStart_toStartOf="" - наш элемент левым краем примыкат к левому краю чего-либо.  
• app:layout_constraintStart_toEndOf="" - наш элемент левым краем примыкат к правому краю чего-либо. 
• app:layout_constraintEnd_toEndOf=""  - наш элемент правым краем примыкат к правому краю чего-либо.
• app:layout_constraintEnd_toStartOf="" - наш элемент правым краем примыкат к левому краю чего-либо.
• app:layout_constraintTop_toTopOf="" - наш элемент верхним краем примыкат к верхнему краю чего-либо.
• app:layout_constraintTop_toBottomOf="" - наш элемент верхним краем примыкат к нижнему краю чего-либо.

Вы сразу заметили, что раньше мы использовали приставку android: а сейчас app:. Да, все верно. ConstraintLayout это не часть Android. Это библиотека, выпущенная компанией Google. В наше время при создании проекта  эта и многие другие библиотеки уже подключены. Вы можете посмотреть их в файле  - app/build.gradle.kts.
Внизу файла строка - implementation(libs.constraintlayout) 

Значения данных атрибутов могут быть “parent” или id элемента. id - это уникальный идентификатор вашего элемента. Мы их еще не использовали и рассмотрим в следующем уроке.

Вы также могли заметить, что start - это левый край. А end - правый. Так в андроиде сделаны определения сторон во всем. left и right уже устарели и не используются.

Это все что нам нужно для создания адаптивной верстки. То есть элементы будут располагаться относительно друг друга и не будут нарушать свой порядок на разных размерах экрана.

Чтоб было более понятно давайте попробуем на практике и модифицируем наш activity_main.xml следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start Develop" 
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

И посмотрим результат:

У нас корневой элемент ConstraintLayout и 1 единственная кнопка в нем. Мы уже разобрали такие атрибуты как android:layout_width, android:layout_height,  android:text и видим новые атрибуты, которые характеры только ConstraintLayout:

• app:layout_constraintStart_toStartOf="parent" - указываем что наш элемент Button левым краем прилегает к левому краю родителя
• app:layout_constraintEnd_toEndOf="parent" - указываем что наш элемент Button правым краем прилегает к правому краю родителя
• app:layout_constraintTop_toTopOf="parent" - указываем что наш элемент Button верхний краем прилегает к верхнему краю родителя
• app:layout_constraintBottom_toBottomOf="parent" - указываем что наш элемент Button верхний краем прилегает к верхнему краю родителя

Сразу возникает вопрос - мы сказали, чтоб наш Button левым краем прилегал к левому, а правым к правому и также с верхом и низом. По логике наш Button должен был растянут. Но ConstraintLayout не просчитывает размеры элементов, а только их располагает. Именно поэтому наш элемент Button находится в центре подвешенный на неких синих веревочках. Эти веревочки и есть наши отношение что к чему прилегает. Это наша визуализация верстки.

Теперь давайте сделаем подобие цифры 5 на игровом кубике. То есть расположим еще 4 элемента на углах.  
Для этого добавим еще 4 элемента. Те же самые Button и дадим каждому по 2 привязки.
И вот что у нас вышло:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start Develop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start Develop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start Develop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start Develop"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start Develop"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Ну и выглядит это так:

Не всегда нам нужно располагать элементы  в притык один к одному. Иногда нам нужно добавлять отступы. А делается это при помощи атрибута android:margin.

Всего есть 7 атрибутов margin. Не переживайте - их легко запомнить:

• android:layout_margin="" - отступ со всех сторон
• android:layout_marginTop="" - отступ сверху
• android:layout_marginBottom="" - отступ снизу
• android:layout_marginStart="" - отступ слева
• android:layout_marginEnd="" - отступ справа
• android:layout_marginVertical="" - отступ вертикально. И сверху, и снизу
• android:layout_marginHorizontal="" - отступ горизонтально. И слева и справа 

Давайте теперь добавим атрибуты margin и видим следующий результат:

Полный пример кода я вам не даю. Это вам как домашнее задание. Попробуйте разобраться как это работает на практике.