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.
Have a question that isn't answered here? Try StackOverflow for ConstraintLayout or MotionLayout.
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:
repositories {
google()
}
Next add a dependency in the build.gradle
file of your Gradle module.
If using ConstraintLayout with the Android View system, add:
dependencies {
implementation("androidx.constraintlayout:constraintlayout:2.1.0")
}
If using ConstraintLayout with Jetpack Compose, add:
dependencies {
implementation("androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02")
}
- AndroidX (Your
gradle.properties
must includeandroid.useAndroidX=true
) - Min SDK 14+
- Java 8+
Hello World
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
๐ Aspect 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.
<ImageView
android:id="@+id/image_1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:src="@tools:sample/avatars" />
โ๏ธ Chains provide group-like behavior in a single axis (horizontally or vertically). The other axis can be constrained independently.
๐ฆฎ Guidelines allow reactive layout behavior with fixed or percentage based positioning for multiple widgets.
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
๐ง Barrier references multiple widgets to create a virtual guideline based on the most extreme widget on the specified side.
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="button1,button2" />
โ๏ธ Group controls the visibility of a set of referenced widgets.
<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="button4,button9" />
๐ซ MotionLayout a subclass of ConstraintLayout that supports transitions between constraint sets defined in MotionScenes. See projects/MotionLayoutExperiments for examples.
๐ 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 for examples.
- Build a Responsive UI with ConstraintLayout
- ConstraintLayout Codelab
- Introduction to MotionLayout Part I | Part II | Part III | Part IV
- MotionLayout Codelab
If you'd like to get involved and contribute please read CONTRIBUTING for details on our code of conduct, and the process for submitting pull requests to us.
See also the list of contributors who participated in this project.
This project is licensed under the Apache 2.0 License - see the LICENSE file for details