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:

you can use the [`Space`](https://developer.android.com/reference/android/widget/Space) to achieve that — Francis, Dec 20 '18 at 22:59
Not sure that ContraintLayout is they way to go. If you want views to overlap then RelativLayout is your friend. — Haroun Hajem, Dec 21 '18 at 23:52

score 1 · Accepted Answer · answered Dec 21 '18 at 02:53

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>

How to Create an overlap chain in ConstraintLayout Android Studio

1 Answers1