Android: automatically truncate a text when no more space is available in a LinearLayout

Question

I want to create some kind of toolBar in my app. On the left I'm displaying a fixed size imageView, on the right another one and in the middle I want to display a text, but it need to be truncated in case there isn't enought space... and that's where I'm failing

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionBar"
    android:layout_width="match_parent"
    android:layout_height="32dp"
    android:background="@android:drawable/title_bar"
    android:orientation="horizontal"
    android:paddingBottom="5dp"
    android:paddingTop="5dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:gravity="left|center_vertical"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/actionBarIcon"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginRight="7dp"
            android:adjustViewBounds="true"
            android:background="@drawable/podcast_addict"
            android:gravity="center_vertical"
            android:onClick="onHome" >
        </ImageButton>

        <TextView
            android:id="@+id/actionBarTitle"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:singleLine="true"
            android:text="@string/app_name"
            android:textColor="#FFFFFF"
            android:textSize="15sp"
            android:textStyle="bold" >
        </TextView>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="15dp"
        android:layout_weight="2"
        android:gravity="right|center_vertical"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="1px"
            android:layout_height="match_parent"
            android:layout_marginBottom="3dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="3dp"
            android:background="@android:drawable/status_bar_item_app_background" />

        <ImageView
            android:id="@+id/actionButton"
            android:layout_width="22dp"
            android:layout_height="22dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:adjustViewBounds="true"
            android:background="@android:drawable/stat_notify_sync_noanim"
            android:gravity="center_vertical"
            android:onClick="onAction" >
        </ImageView>

        <ImageView
            android:layout_width="1px"
            android:layout_height="match_parent"
            android:layout_marginBottom="3dp"
            android:layout_marginTop="3dp"
            android:background="@android:drawable/status_bar_item_app_background" />

        <ImageButton
            android:id="@+id/showHideButton"
            android:layout_width="22dp"
            android:layout_height="22dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:adjustViewBounds="true"
            android:background="@android:drawable/ic_menu_view"
            android:gravity="center_vertical"
            android:onClick="onShowHide" >
        </ImageButton>

        <ImageView
            android:layout_width="1px"
            android:layout_height="match_parent"
            android:layout_marginBottom="3dp"
            android:layout_marginTop="3dp"
            android:background="@android:drawable/status_bar_item_app_background" />

        <ImageButton
            android:id="@+id/markReadButton"
            android:layout_width="22dp"
            android:layout_height="22dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:adjustViewBounds="true"
            android:background="@android:drawable/checkbox_on_background"
            android:gravity="center_vertical"
            android:onClick="onMarkRead" >
        </ImageButton>
    </LinearLayout>

</LinearLayout>

when the text is short it seems to work, but when it's too long the 1st imageView on the right is hidden behind the text... How can I fix this ?

possible duplicate of [Android: TextView automatically truncate and replace last 3 char of String](http://stackoverflow.com/questions/1666736/android-textview-automatically-truncate-and-replace-last-3-char-of-string) — Mackie Messer, Jun 01 '15 at 21:30

yorkw · Answer 1 · 2011-12-02T01:35:00.413

5

Try using android:ellipsize:

<TextView
  android:singleLine="true"
  android:ellipsize="end"
  android:text="This is a long long text"/>

This will give you This is a long... on your screen when text is longer than TextView width.

edited Dec 02 '11 at 01:35

answered Dec 02 '11 at 00:11

yorkw

40,926
10
117
130

score 2 · Answer 2 · answered Dec 01 '11 at 22:07

2

Use layout weights on the linearlayouts

android:layout_weight="1"

will give both views equal space in the layout ie half and half, you can play around with the weights until you find the right balance for what you want.

answered Dec 01 '11 at 22:07

triggs

5,890
3
32
31

no weight won't work. I can't presume the text length nor the screen width. – user1026605 Dec 01 '11 at 22:52
equal layout_weight will ensure that both item stay on screen, the textview if its too long will start a new line ( or use maxlines =1 and singleLine to true to have only a single line of text, essentially truncating it) – triggs Dec 01 '11 at 22:58
But I don't want them to be equal size... I just want the text to adapt to the available space (on a single line) – user1026605 Dec 03 '11 at 09:41
they dont have to be equal size, different weight values will produce different results, try find a set of weight that will give the desired result – triggs Dec 03 '11 at 11:11
yes but it doesn't adapt to the available space! using weights you need to choose the proportions – user1026605 Dec 04 '11 at 00:08

score 0 · Answer 3 · answered Dec 01 '11 at 22:15

Try this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/actionBar"
android:layout_width="fill_parent"
android:layout_height="32dp"
android:background="@android:drawable/title_bar"
android:orientation="horizontal"
android:paddingBottom="5dp"
android:paddingTop="5dp" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_marginLeft="15dp"
    android:layout_weight="2"
    android:layout_gravity="right|center_vertical"
    android:layout_alignParentRight="true"
    android:orientation="horizontal" 
    android:id="@+id/buttons">

    <ImageView
        android:layout_width="1px"
        android:layout_height="fill_parent"
        android:layout_marginBottom="3dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="3dp"
        android:background="@android:drawable/status_bar_item_app_background" />

    <ImageView
        android:id="@+id/actionButton"
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:adjustViewBounds="true"
        android:background="@android:drawable/stat_notify_sync_noanim"
        android:gravity="center_vertical"
        android:onClick="onAction" >
    </ImageView>

    <ImageView
        android:layout_width="1px"
        android:layout_height="fill_parent"
        android:layout_marginBottom="3dp"
        android:layout_marginTop="3dp"
        android:background="@android:drawable/status_bar_item_app_background" />

    <ImageButton
        android:id="@+id/showHideButton"
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:adjustViewBounds="true"
        android:background="@android:drawable/ic_menu_view"
        android:gravity="center_vertical"
        android:onClick="onShowHide" >
    </ImageButton>

    <ImageView
        android:layout_width="1px"
        android:layout_height="fill_parent"
        android:layout_marginBottom="3dp"
        android:layout_marginTop="3dp"
        android:background="@android:drawable/status_bar_item_app_background" />

    <ImageButton
        android:id="@+id/markReadButton"
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:adjustViewBounds="true"
        android:background="@android:drawable/checkbox_on_background"
        android:gravity="center_vertical"
        android:onClick="onMarkRead" >
    </ImageButton>
</LinearLayout>
<LinearLayout
    android:layout_toLeftOf="@id/buttons"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:gravity="left|center_vertical"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/actionBarIcon"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginRight="7dp"
        android:adjustViewBounds="true"
        android:background="@drawable/podcast_addict"
        android:gravity="center_vertical"
        android:onClick="onHome" >
    </ImageButton>

    <TextView
        android:id="@+id/actionBarTitle"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:singleLine="true"
        android:text="loooooooooooooooooooooooooooooooooooooooooooooooong"
        android:textColor="#FFFFFF"
        android:textSize="15sp"
        android:textStyle="bold" >
    </TextView>
</LinearLayout>

Android: automatically truncate a text when no more space is available in a LinearLayout

3 Answers3