ConstraintLayout

ConstraintLayout
A flexible layout manager for Android that allows you to create complex layouts with a flat view hierarchy. It enables you to position and size widgets in a way that is responsive to different screen sizes and orientations.

Characteristics
– Flat View Hierarchy: Reduces the number of nested views, improving performance.
– Flexible Positioning: Widgets can be constrained to other widgets or the parent layout, allowing for dynamic positioning.
– Guidelines: Vertical and horizontal guidelines can be added to help align views.
– Barriers: Allows you to create invisible barriers that can help manage the positioning of views based on other views’ sizes.
– Chains: Groups of views can be linked together to create a more complex layout behavior.

Examples
– Basic Usage: A simple layout with a TextView and a Button constrained to the edges of the parent layout.

“`xml

  <TextView
      android:id="@+id/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"/>

  <Button
      android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Click Me"
      app:layout_constraintTop_toBottomOf="@+id/textView"
      app:layout_constraintStart_toStartOf="parent"/>

“`

• Using Guidelines: A layout with guidelines to center a TextView vertically and horizontally.

“`xml

  <androidx.constraintlayout.widget.Guideline
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      app:layout_constraintGuidePercent="0.5"/>

  <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Centered Text"
      app:layout_constraintStart_toStartOf="@+id/guideline"
      app:layout_constraintEnd_toEndOf="@+id/guideline"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintBottom_toBottomOf="parent"/>

“`