๐๏ธ ๐
ConstraintLayout
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.
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:
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.3")
}
If using ConstraintLayout with Jetpack Compose, add:
dependencies {
implementation("androidx.constraintlayout:constraintlayout-compose:1.0.0")
}
Additionally, for MotionLayout with Jetpack Compose, you require to opt-in to ExprimentalMotionApi:
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 includeandroid.useAndroidX=true
) - Min SDK 14+
- Java 8+
โจ ๐คฉ ๐ฑ Key Features
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>
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" />
<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"/>
<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" />
<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" />
<androidx.constraintlayout.helper.widget.CircularFlow
android:id="@+id/circularFlow"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:circularflow_angles="0,40,80,120"
app:circularflow_radiusInDP="90,100,110,120"
app:circularflow_viewCenter="@+id/view1"
app:constraint_referenced_ids="view2,view3,view4,view5" />
๐ ๐ฉโ๐ซ Learning Materials
- Build a Responsive UI with ConstraintLayout
- ConstraintLayout Codelab
- Introduction to MotionLayout Part I | Part II | Part III | Part IV
- MotionLayout Codelab
๐ค Contributing
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.
๐ป Authors
See also the list of contributors who participated in this project.
๐ License
This project is licensed under the Apache 2.0 License - see the LICENSE file for details