https://github.com/anitaa1990/constraintlayout-sample
A demo app to showcase constraint layout implementation in Android
https://github.com/anitaa1990/constraintlayout-sample
android android-app android-development constraint-layout data-binding
Last synced: 7 months ago
JSON representation
A demo app to showcase constraint layout implementation in Android
- Host: GitHub
- URL: https://github.com/anitaa1990/constraintlayout-sample
- Owner: anitaa1990
- Created: 2018-05-11T18:39:29.000Z (almost 8 years ago)
- Default Branch: new_changes
- Last Pushed: 2019-03-20T10:23:21.000Z (about 7 years ago)
- Last Synced: 2025-03-26T00:51:23.386Z (about 1 year ago)
- Topics: android, android-app, android-development, constraint-layout, data-binding
- Language: Java
- Size: 12.1 MB
- Stars: 106
- Watchers: 7
- Forks: 38
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ConstraintLayout-Sample
[](https://android-arsenal.com/details/3/7050)
A demo app to showcase constraint layout implementation in Android
Please checkout the medium article [here](https://medium.com/@anitaa_1990/learning-to-implement-constraintlayout-in-android-8ddc69fe0a1a) for a detailed explanation on how to build the above user interface.
Some of the common concepts in ConstraintLayout
1. How to set Aspect Ratio:
Using ``` app:layout_constraintDimensionRatio="H,3:1" ```
H,3:1 will always make the ImageView appear 3 times wider than height. The prefix H or W tells ConstraintLayout which dimension should respect the ratio. If it is H then it means width will be first computed from other constraints and then height will be adjusted according to the aspect ratio.
```
```
2. Some commonly used attributes in ConstraintLayout:
a. layout_constraintEnd_toEndOf — The end of the widget will be aligned to the end of the parent view.
b. layout_constraintStart_toStartOf — The start of the widget will be aligned to the start of the parent view.
c. layout_constraintTop_toTopOf — The top of the widget will be aligned to the top of the parent view.
d. layout_constraintTop_toBottomOf — The top of the widget will be aligned to the bottom of the parent view.
e. layout_constraintBottom_toTopOf — The bottom of the widget will be aligned to the top of the parent view.
f. layout_constraintBottom_toBottomOf — The bottom of the widget will be aligned to the bottom of the parent view.
g. layout_constraintLeft_toTopOf — The left of the widget will be aligned to the top of the parent view.
h. layout_constraintLeft_toBottomOf — The left of the widget will be aligned to the bottom of the parent view.
i. layout_constraintLeft_toLeftOf — The left of the widget will be aligned to the left of the parent view.
j. layout_constraintLeft_toRightOf — The left of the widget will be aligned to the right of the parent view.
k. layout_constraintRight_toTopOf — The right of the widget will be aligned to the top of the parent view.
l. layout_constraintRight_toBottomOf — The right of the widget will be aligned to the bottom of the parent view.
m. layout_constraintRight_toLeftOf — The right of the widget will be aligned to the left of the parent view.
n. layout_constraintRight_toRightOf — The right of the widget will be aligned to the right of the parent view.
Note: Within a ConstraintLayout, side margins for a child view will only take effect if that side is constrained to another view.
3. How to center a view vertically or horizontally?
Using Horizontal Bias: This means that the position of a view along the horizontal axis can be defined using a bias value. For example: ``` app:layout_constraintHorizontal_bias="0.5" ``` will center a view horizontally.
Using Vertical Bias: This means that the position of a view along the vertical axis can be defined using a bias value. For example: ``` app:layout_constraintVertical_bias="0.5" ``` will center a view vertically.
4. How to resize a view?
Using ```app:layout_constrainedHeight="true"```
This will wrap the CardView height according to its contents.
Using ```app:layout_constrainedWidth="true"```
This will wrap the CardView width according to its contents.
You can checkout some of the other constraints we have not looked at in this article.
* [Chains](https://developer.android.com/reference/android/support/constraint/ConstraintLayout#Chains)
* [Guideline](https://developer.android.com/reference/android/support/constraint/Guideline)
* [Dimension Constraints](https://developer.android.com/reference/android/support/constraint/ConstraintLayout#DimensionConstraints)
* [Circular Positioning](https://developer.android.com/reference/android/support/constraint/ConstraintLayout#CircularPositioning)
* [Visibility Behaviour](https://developer.android.com/reference/android/support/constraint/ConstraintLayout#VisibilityBehavior)