Skip to content

Instantly share code, notes, and snippets.

@senamit2708
Created September 3, 2023 04:40
Show Gist options
  • Save senamit2708/4f2f2ae9e950473361f62eb57092d156 to your computer and use it in GitHub Desktop.
Save senamit2708/4f2f2ae9e950473361f62eb57092d156 to your computer and use it in GitHub Desktop.
chaining in constraint layout
To chain these seven CardViews in a ConstraintLayout with equal distance between them, you can use chains and guidelines. Here's how you can do it:
1. First, define horizontal guidelines to create equal spacing between the CardViews. Add these lines to your ConstraintLayout:
```xml
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
```
These guidelines define the start and end points of the horizontal space within which you want to evenly distribute the CardViews. Adjust the `app:layout_constraintGuide_percent` values if you want to change the spacing.
2. Next, update your CardViews' constraints to use these guidelines and create a horizontal chain. Remove any absolute positioning attributes (`tools:layout_editor_absoluteX` and `tools:layout_editor_absoluteY`) from the CardViews.
Here's how the updated CardViews should look:
```xml
<androidx.cardview.widget.CardView
android:id="@+id/cardOne"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toStartOf="@+id/guideline_start"
app:layout_constraintEnd_toStartOf="@+id/cardTwo"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<androidx.cardview.widget.CardView
android:id="@+id/cardTwo"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardOne"
app:layout_constraintEnd_toStartOf="@+id/cardThree"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<androidx.cardview.widget.CardView
android:id="@+id/cardThree"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardTwo"
app:layout_constraintEnd_toStartOf="@+id/cardFour"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<androidx.cardview.widget.CardView
android:id="@+id/cardFour"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardThree"
app:layout_constraintEnd_toStartOf="@+id/cardFive"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<androidx.cardview.widget.CardView
android:id="@+id/cardFive"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardFour"
app:layout_constraintEnd_toStartOf="@+id/cardSix"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<androidx.cardview.widget.CardView
android:id="@+id/cardSix"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardFive"
app:layout_constraintEnd_toStartOf="@+id/cardSeven"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<androidx.cardview.widget.CardView
android:id="@+id/cardSeven"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardSix"
app:layout_constraintEnd_toStartOf="@+id/guideline_end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
```
With these changes, the CardViews will form a horizontal chain, and the guidelines will help create equal spacing between them. You can adjust the spacing by changing the `app:layout_constraintGuide_percent` values in the guidelines as needed.
<androidx.cardview.widget.CardView
android:id="@+id/cardcalendar"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="@+id/btnDelete"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cardDay" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:id="@+id/cardSeven"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardSix"
app:layout_constraintEnd_toStartOf="@+id/guideline_end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="@+id/cardSix"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardFive"
app:layout_constraintEnd_toStartOf="@+id/cardSeven"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.cardview.widget.CardView
android:id="@+id/cardFive"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardFour"
app:layout_constraintEnd_toStartOf="@+id/cardSix"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.cardview.widget.CardView
android:id="@+id/cardFour"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardThree"
app:layout_constraintEnd_toStartOf="@+id/cardFive"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.cardview.widget.CardView
android:id="@+id/cardTwo"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardOne"
app:layout_constraintEnd_toStartOf="@+id/cardThree"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/cardOne"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="16dp"
app:layout_constraintStart_toStartOf="@+id/guideline_start"
app:layout_constraintEnd_toStartOf="@+id/cardTwo"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.cardview.widget.CardView
android:id="@+id/cardThree"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintStart_toEndOf="@+id/cardTwo"
app:layout_constraintEnd_toStartOf="@+id/cardFour"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.01" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.99" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment