CODEWITHSUNDEEP
androidandroid-layouttextview
Marcus
Marcus

Reputation: 6717

Android limit a text view length

I have a layout containing two text views and an image button, like below figure.

textview1

This is the code of the layout

<LinearLayout
    android:id="@+id/llGlobalControl"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/gc_background"
    android:gravity="center"
    android:padding="6dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:orientation="vertical"
        android:weightSum="2" >

        <TextView
            android:id="@+id/tvGlobalControlTitle"
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1"
            android:text="Text View"
            android:textColor="@color/green"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tvGlobalControlArtist"
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1"
            android:text="Text View"
            android:textColor="@color/green" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="right"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/ibGlobalControlPlayPause"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_pause_over_video" />
    </LinearLayout>
</LinearLayout>

My problem is that if the text in either of the text views gets too long, the button "gets pushed away", like the figure below.

enter image description here

Instead, I would like that the text view limits the text contained, something like the red underline in the figure below.

enter image description here

How do I do this?

Upvotes: 0

Views: 383

Answers (6)

Antimonit
Antimonit

Reputation: 3264

The trick is to use android:ellipsize="end" and limit number of lines with android:maxLines="1".

Also, to prevent your ImageButton from getting pushed away, the easiest way is to set android:layout_weight="1" to the LinearLayout with TextViews and android:layout_width="wrap_content" to the LinearLayout containing the button.

This is the result: enter image description here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/llGlobalControl"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/gc_background"
    android:gravity="center"
    android:padding="6dp" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:orientation="vertical"
        android:layout_weight="1"
        android:weightSum="2" >

        <TextView
            android:id="@+id/tvGlobalControlTitle"
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1"
            android:text="This is a long text that will take up a lot of space and push the button away"
            android:maxLines="1"
            android:ellipsize="end"
            android:textColor="@color/green"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tvGlobalControlArtist"
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1"
            android:text="Text View"
            android:maxLines="1"
            android:ellipsize="end"
            android:textColor="@color/green" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="right"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/ibGlobalControlPlayPause"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_pause_over_video" />

    </LinearLayout>

</LinearLayout>

Upvotes: 2

HiXoid
HiXoid

Reputation: 51

try this

Add

android:ellipsize="end"
android:singleLine="true"

to TextView you want to be single line and with "..." at end.

Upvotes: 2

Tushski
Tushski

Reputation: 242

Try using this layout:

<RelativeLayout
android:id="@+id/llGlobalControl"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/gc_background"
android:padding="6dp" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:weightSum="2"
    android:layout_toLeftOf="@id/ibGlobalControlPlayPause"
    android:layout_toStartOf="@id/ibGlobalControlPlayPause" >

    <TextView
        android:id="@+id/tvGlobalControlTitle"
        android:layout_width="wrap_content"
        android:layout_height="0px"
        android:layout_weight="1"
        android:text="Text View"
        android:textColor="@color/green"
        android:textStyle="bold" 
        android:singleLine="true"
        android:ellipsize="end"
        android:maxLines="1"/>

    <TextView
        android:id="@+id/tvGlobalControlArtist"
        android:layout_width="wrap_content"
        android:layout_height="0px"
        android:layout_weight="1"
        android:text="Text View"
        android:textColor="@color/green"
        android:singleLine="true"
        android:ellipsize="end"
        android:maxLines="1" />

</LinearLayout>

<ImageButton
    android:id="@+id/ibGlobalControlPlayPause"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:src="@drawable/ic_action_pause_over_video" />

</RelativeLayout>

Upvotes: 0

Gunaseelan
Gunaseelan

Reputation: 15515

Try this way.. Added weight to layout..

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="left"
    android:layout_weight="1"
    android:orientation="vertical"
    android:weightSum="2" >

    <TextView
        android:id="@+id/tvGlobalControlTitle"
        android:layout_width="wrap_content"
        android:layout_height="0px"
        android:layout_weight="1"
        android:text="Text View"
        android:textColor="@color/green"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tvGlobalControlArtist"
        android:layout_width="wrap_content"
        android:layout_height="0px"
        android:layout_weight="1"
        android:text="Text View"
        android:textColor="@color/green" />

</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="right"
    android:layout_weight="3"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/ibGlobalControlPlayPause"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action_pause_over_video" />
</LinearLayout>

Upvotes: 0

M D
M D

Reputation: 47807

try to set to your TextView set together

 android:ellipsize="end"
 android:singleLine="true"

Upvotes: 2

Akash Moradiya
Akash Moradiya

Reputation: 3322

try like this,

<LinearLayout
    android:id="@+id/llGlobalControl"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/gc_background"
    android:gravity="center"
    android:padding="6dp" >

    <LinearLayout
       android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="left"
        android:orientation="vertical"
        android:weightSum="2" >

        <TextView
            android:id="@+id/tvGlobalControlTitle"
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1"
            android:text="Text View"
            android:textColor="@color/green"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tvGlobalControlArtist"
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1"
            android:text="Text View"
            android:textColor="@color/green" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="right"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/ibGlobalControlPlayPause"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_pause_over_video" />
    </LinearLayout>
</LinearLayout>

Upvotes: 1

Related Questions