Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/androidx/constraintlayout
ConstraintLayout is an Android layout component which allows you to position and size widgets in a flexible way
https://github.com/androidx/constraintlayout
Last synced: 12 days ago
JSON representation
ConstraintLayout is an Android layout component which allows you to position and size widgets in a flexible way
- Host: GitHub
- URL: https://github.com/androidx/constraintlayout
- Owner: androidx
- License: apache-2.0
- Created: 2019-10-02T18:08:50.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-10-24T22:10:06.000Z (about 1 year ago)
- Last Synced: 2024-10-15T09:05:00.541Z (26 days ago)
- Language: Java
- Size: 34.8 MB
- Stars: 1,074
- Watchers: 36
- Forks: 177
- Open Issues: 105
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ConstraintLayout 🗜️📏
# Sample Code
* [MotionLayout Compose Examples](https://github.com/androidx/constraintlayout/tree/main/demoProjects/ExamplesComposeMotionLayout#motionlayout-for-compose-examples) JSON & **DSL** samples
* [ConstraintLayout Compose Examples](https://github.com/androidx/constraintlayout/tree/main/demoProjects/ExamplesComposeConstraintLayout#constraintlayout-for-compose-examples)
* [MotionLayout & RecyclerView Examples](https://github.com/androidx/constraintlayout/tree/main/demoProjects/ExamplesRecyclerView#motionlayout-recyclerview-sample)
* [Compose Grid Helper Examples](https://github.com/androidx/constraintlayout/tree/main/demoProjects/ExampleComposeGrid#grid-for-compose-examples)
 [](https://www.apache.org/licenses/LICENSE-2.0)
ConstraintLayout is a layout manager for Android which allows you to position and size widgets in a flexible way. It's available for both the Android view system and Jetpack Compose.
This repository contains the core Java engine, Android library, validation tools, and experiments.
[Android Reference Docs](https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout)
[Reference Docs for Compose](https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/package-summary)
Have a question that isn't answered here? Try StackOverflow for [ConstraintLayout](https://stackoverflow.com/questions/tagged/android-constraintlayout) or [MotionLayout](https://stackoverflow.com/questions/tagged/android-motionlayout).
## Using ConstraintLayout
### ⬇️ Installation
Add the Gradle dependency:
You need to make sure you have the Google repository included in the `build.gradle` file in the root of your project:
```gradle
repositories {
google()
}
```
Next add a dependency in the `build.gradle` file of your Gradle module.
If using ConstraintLayout with the Android View system, add:
```gradle
dependencies {
implementation("androidx.constraintlayout:constraintlayout:2.1.4")
}
```
If using ConstraintLayout with Jetpack Compose, add:
```gradle
dependencies {
implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")
}
```
Additionally, for MotionLayout with Jetpack Compose, you require to opt-in to ExprimentalMotionApi:
```gradle
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
kotlinOptions {
// For Kotlin 1.6.0+
freeCompilerArgs += "-opt-in=androidx.constraintlayout.compose.ExperimentalMotionApi"
// For older than Kotlin 1.6.0
freeCompilerArgs += "-Xopt-in=androidx.constraintlayout.compose.ExperimentalMotionApi"
}
}
```
### 🎒🥾 Requirements
- AndroidX (Your `gradle.properties` **must** include `android.useAndroidX=true`)
- Min SDK 14+
- Java 8+
### ✨🤩📱 Key Features
Hello World
```xml
```
📐 [Aspect Ratio](https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout#ratio) defines one dimension of a widget as a ratio of the other one. If both `width` and `height` are set to `0dp` the system sets the largest dimensions that satisfy all constraints while maintaining the aspect ratio.
```xml
```
⛓️ [Chains](https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout#Chains) provide group-like behavior in a single axis (horizontally or vertically). The other axis can be constrained independently.
🦮 [Guidelines](https://developer.android.com/reference/androidx/constraintlayout/widget/Guideline) allow reactive layout behavior with fixed or percentage based positioning for multiple widgets.
```xml
```
🚧 [Barrier](https://developer.android.com/reference/androidx/constraintlayout/widget/Barrier) references multiple widgets to create a virtual guideline based on the most extreme widget on the specified side.
```xml
```
☂️ [Group](https://developer.android.com/reference/androidx/constraintlayout/widget/Group) controls the visibility of a set of referenced widgets.
```xml
```
💫 [MotionLayout](https://developer.android.com/reference/androidx/constraintlayout/motion/widget/MotionLayout) a subclass of ConstraintLayout that supports transitions between constraint sets defined in MotionScenes. See [projects/MotionLayoutExperiments](projects/MotionLayoutExperiments) for examples.
🌊 [Flow](https://developer.android.com/reference/androidx/constraintlayout/helper/widget/Flow) is a VirtualLayout that allows positioning of referenced widgets horizontally or vertically similar to a Chain. If the referenced elements do not fit within the given bounds it has the ability to wrap them and create multiple chains. See [projects/CalculatorExperiments](projects/CalculatorExperiments) for examples.
🌀 [CircularFlow](https://developer.android.com/reference/androidx/constraintlayout/helper/widget/CircularFlow) is a VirtualLayout that easily organize objects in a circular pattern. See [projects/CarouselExperiments](projects/CarouselExperiments) for basic examples and [projects/MotionLayoutVerification](projects/MotionLayoutVerification) for examples with MotionLayout.
```xml
```
## 📚👩🏫 Learning Materials
- [Build a Responsive UI with ConstraintLayout](https://developer.android.com/training/constraint-layout)
- [ConstraintLayout Codelab](https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0)
- Introduction to MotionLayout [Part I](https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d) | [Part II](https://medium.com/google-developers/introduction-to-motionlayout-part-ii-a31acc084f59) | [Part III](https://medium.com/google-developers/introduction-to-motionlayout-part-iii-47cd64d51a5) | [Part IV](https://medium.com/google-developers/defining-motion-paths-in-motionlayout-6095b874d37)
- [MotionLayout Codelab](https://codelabs.developers.google.com/codelabs/motion-layout#0)
## 🤝 Contributing
If you'd like to get involved and contribute please read [CONTRIBUTING](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## 💻 Authors
- **John Hoford** : MotionLayout ([jafu888](https://github.com/jafu888))
- **Nicolas Roard** : ConstraintLayout ([camaelon](https://github.com/camaelon))
See also the list of [contributors](https://github.com/androidx/constraintlayout/graphs/contributors) who participated in this project.
## 🔖 License
This project is licensed under the Apache 2.0 License - see the [LICENSE](LICENSE) file for details