In Android development, text truncation within horizontal layouts is a frequent challenge. When a LinearLayout contains multiple views arranged horizontally, long text in one view can push subsequent views completely off-screen.
The Problem
Consider this layout structure:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/product_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:ellipsize="end"
android:maxLines="1"
android:text="Premium Wireless Headphones with Noise Cancellation"
android:textSize="15sp" />
<TextView
android:id="@+id/discount_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:paddingHorizontal="8dp"
android:paddingVertical="4dp"
android:text="20% OFF"
android:textColor="#4CAF50"
android:textSize="12sp"
android:background="@drawable/badge_background" />
</LinearLayout>
In this scenario, when the product name exceeds available space, the discount badge gets pushed entirely out of view. The text ellipsize attribute only handles the end of the text itself, not the redistribution of space among sibling views.
The Solution
The fix requires a single attribute that tells the layout system to proportionally distribute remaining space:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/product_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="12dp"
android:ellipsize="end"
android:maxLines="1"
android:text="Premium Wireless Headphones with Noise Cancellation"
android:textSize="15sp" />
<TextView
android:id="@+id/discount_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:paddingHorizontal="8dp"
android:paddingVertical="4dp"
android:text="20% OFF"
android:textColor="#4CAF50"
android:textSize="12sp"
android:background="@drawable/badge_background" />
</LinearLayout>
Two key modifications enable this behavior:
-
android:layout_width="0dp"— Setting the width to zero prevents the system from calculating the initial width. This is essential when using weight distribuiton in horizontal layouts. -
android:layout_weight="1"— This attribute assigns all available remaining space to the first TextView. The layout system calculates the remaining width after accounting for fixed-width views (the discount badge) and allocates it entirely to the weighted view.
Why This Works
The weight attribute operates after enitial measurements are complete. Views with layout_weight consume remaining space proportionally based on their weight value. Since only the product name has a weight of 1, it absorbs all leftover space while preserving the badge's intrinsic dimensions.
When the screen narrrows, the weighted view shrinks first, allowing the badge to remain visible. The ellipsize attribute then truncates the text within its allocated space, displaying an ellipsis instead of overflowing.
This technique eliminates the need for custom views or complex measurement logic, providing a declarative solution that adapts automatically across different screen sizes.