ConstraintLayout在Android API 21、22上布局错乱问题求助

Hey there, let’s work through this layout issue you’re facing on Lollipop devices. Based on the details you shared, two main issues are causing the misrendering:

1. Outdated ConstraintLayout Version #

ConstraintLayout 1.0.2 is an older release with known compatibility bugs on Android 5.x (Lollipop). Google addressed many layout calculation edge cases in later versions of the support library’s ConstraintLayout.

Update your dependency to a more stable, bug-fixed version. The last stable support-based ConstraintLayout release is 1.1.3, which handles older Android versions much better:

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

2. Circular Constraint Conflict #

Looking closely at your XML layout, there’s a critical circular constraint loop between myRectangleView and the login button:

• myRectangleView uses app:layout_constraintBottom_toBottomOf="@+id/login"
• The login button uses app:layout_constraintBottom_toTopOf="@+id/myRectangleView"

Newer Android versions might gracefully fall back from this impossible loop, but Lollipop’s layout engine can’t resolve it, leading to broken layouts.

To fix this, remove the conflicting constraint and anchor myRectangleView to non-conflicting elements. For example, if you want it to act as a background behind the login form, anchor it between app_name and login like this:

<View
    android:id="@+id/myRectangleView"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:background="@drawable/bg_rectangle_white_fade"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/app_name"
    app:layout_constraintBottom_toBottomOf="@+id/login" />

3. Lollipop-Specific Tweaks #

• Uniform EditText Heights: Using wrap_content for your password EditText’s height can cause inconsistent sizing on Lollipop. Set it to match the username field’s fixed height (46dp) for consistency:

  <EditText
      android:id="@+id/in_password"
      android:layout_width="wrap_content"
      android:layout_height="46dp"
      android:layout_marginEnd="8dp"
      android:layout_marginStart="8dp"
      android:layout_marginTop="12dp"
      android:ems="10"
      android:hint="Password"
      android:inputType="textPassword"
      app:layout_constraintBottom_toTopOf="@+id/login"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0.5"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/in_username" />
  

• Elevation Checks: While your login button’s elevation should work on Lollipop, if you still see odd rendering, you can test removing android:elevation temporarily to rule out z-axis issues.

After applying these changes, rebuild your app and test on Lollipop devices—this should resolve the layout错乱 you’re seeing.

内容的提问来源于stack exchange，提问作者Tri W. Herlambang