Using layout_weight to Prevent Text Truncation in Horizontal LinearLayout

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:

  1. 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.

  2. 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.

Tags: Android LinearLayout layout_weight UI Layout Text Truncation

Posted on Sat, 16 May 2026 21:15:32 +0000 by lathifmca