如何在Android ConstraintLayout中实现双TextView多分辨率适配布局

I totally get the frustration here—layouts that look perfect on flagship devices breaking on smaller screens is such a common headache. Let's fix this so your two TextViews play nicely together no matter the screen resolution, all using just ConstraintLayout.

What's Wrong With the Original Layout? #

The root issue is that your two TextViews are only constrained to the parent's start/end edges, but not to each other. When the screen is too narrow to fit both side-by-side, they just overlap instead of adjusting to fit the available space. We need to add horizontal constraints between them and adjust their width properties to ensure both contents stay visible without ellipsizing.

The Solution Code #

Here's the adjusted ConstraintLayout that meets all your requirements:

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingVertical="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:gravity="center_vertical"
        android:text="Mar 30 2020 12:34 PM"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textView2"
        app:layout_constraintHorizontal_bias="0.0"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="16dp"
        android:gravity="center_vertical"
        android:text="ref no : 2144561237867219487387i948039463"
        android:singleLine="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView1"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Key Changes Explained #

• Parent Layout Height: Changed from 32dp to wrap_content so it expands to fit wrapped text in textView2 on small screens instead of clipping content.
• Vertical Padding: Added android:paddingVertical="8dp" to the parent to meet your 8dp top/bottom margin requirement for both TextViews (cleaner than setting margins on each individually).
• TextView1 Constraints: Added app:layout_constraintEnd_toStartOf="@+id/textView2" and app:layout_constraintHorizontal_bias="0.0" to lock it to the left, right next to textView2, ensuring no overlap. Its wrap_content width guarantees the date is always fully visible.
• TextView2 Adjustments:
  • Set android:layout_width="0dp" (match constraint) so it takes up all available space between textView1 and the parent's right edge (minus margins).
  • Enabled android:singleLine="false" to let the long reference number wrap onto multiple lines instead of being truncated or causing overlap.
  • Added android:layout_marginStart="8dp" for better readability between the two TextViews (adjust this value if needed).

How It Behaves #

• High-Resolution Screens: Both TextViews stay on a single line, aligned left and right with required margins—just like on your Pixel 3.
• Low-Resolution Screens: textView1 stays fully visible on the left, and textView2 wraps its long content onto multiple lines within the remaining space, keeping all text visible without ellipses. No more overlapping!

内容的提问来源于stack exchange，提问作者user13352267