How to Create an overlap chain in ConstraintLayout Android Studio

Question

I want to create an overlap chain which keep needed margin than other elements and they may have more elements next to each other. Like this:

Answer 1

This can be achieved using Guidelines. Try something like this:

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

  <View
      android:id="@+id/view_1"
      android:layout_width="200dp"
      android:layout_height="200dp"
      android:background="#f00"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <android.support.constraint.Guideline
      android:id="@+id/guideline_1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      app:layout_constraintGuide_percent="0.26" />

  <View
      android:id="@+id/view_2"
      android:layout_width="200dp"
      android:layout_height="200dp"
      android:background="#0f0"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toEndOf="@id/guideline_1"
      app:layout_constraintTop_toTopOf="parent" />

  <android.support.constraint.Guideline
      android:id="@+id/guideline_2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      app:layout_constraintGuide_percent="0.52" />

  <View
      android:id="@+id/view_3"
      android:layout_width="200dp"
      android:layout_height="200dp"
      android:background="#00f"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toEndOf="@id/guideline_2"
      app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>