Skip to content

Instantly share code, notes, and snippets.

@txusballesteros
Last active October 24, 2017 06:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save txusballesteros/a2da097a4fb721769e499a82cccb0b71 to your computer and use it in GitHub Desktop.
Save txusballesteros/a2da097a4fb721769e499a82cccb0b71 to your computer and use it in GitHub Desktop.
4 Segments ConstraintLayout
<?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"
android:background="#b2ebf2">
<android.support.constraint.ConstraintLayout
android:layout_width="110dp"
android:layout_height="110dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.Group
android:id="@+id/view1_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="view1" />
<android.support.constraint.Group
android:id="@+id/view2_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="view2,view1_divider" />
<android.support.constraint.Group
android:id="@+id/view3_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="view3,view3_divider" />
<android.support.constraint.Group
android:id="@+id/view4_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="view4,view4_divider,view4_vertical_divider" />
<TextView
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#3f51b5"
android:gravity="center"
android:text="1"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="@+id/view4_divider"
app:layout_constraintEnd_toStartOf="@+id/view1_divider"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<View
android:id="@+id/view1_divider"
android:layout_width="4dp"
android:layout_height="0dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="@+id/view1"
app:layout_constraintEnd_toStartOf="@+id/view2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/view1"
app:layout_constraintTop_toTopOf="@+id/view1" />
<TextView
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#2196f3"
android:gravity="center"
android:text="2"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="@+id/view3_divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/view1_divider"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<View
android:id="@+id/view3_divider"
android:layout_width="0dp"
android:layout_height="4dp"
android:background="#ffffff"
app:layout_constraintBottom_toTopOf="@+id/view3"
app:layout_constraintEnd_toEndOf="@+id/view3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="@+id/view3"
app:layout_constraintTop_toBottomOf="@+id/view2" />
<TextView
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#03a9f4"
android:gravity="center"
android:text="3"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/view2"
app:layout_constraintTop_toBottomOf="@+id/view3_divider" />
<View
android:id="@+id/view4_divider"
android:layout_width="0dp"
android:layout_height="4dp"
android:background="#ffffff"
app:layout_constraintBottom_toTopOf="@+id/view4"
app:layout_constraintEnd_toEndOf="@+id/view4_vertical_divider"
app:layout_constraintStart_toStartOf="@+id/view4"
app:layout_constraintTop_toBottomOf="@+id/view1" />
<View
android:id="@+id/view4_vertical_divider"
android:layout_width="4dp"
android:layout_height="0dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="@+id/view4"
app:layout_constraintEnd_toStartOf="@+id/view3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/view4"
app:layout_constraintTop_toBottomOf="@+id/view4_divider" />
<TextView
android:id="@+id/view4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#00bcd4"
android:gravity="center"
android:text="4"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/view4_vertical_divider"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view4_divider" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
@txusballesteros
Copy link
Author

txusballesteros commented Oct 23, 2017

screen shot 2017-10-23 at 20 30 40
screen shot 2017-10-23 at 20 30 20
screen shot 2017-10-23 at 20 31 14
screen shot 2017-10-23 at 20 31 38

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment