Created
September 3, 2023 04:40
-
-
Save senamit2708/4f2f2ae9e950473361f62eb57092d156 to your computer and use it in GitHub Desktop.
chaining in constraint layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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