Android: Need Ellipsis for Multiple TextViews in Relative Layout

Question

I am new to Android, i have below task.

I want to align three TextViews adjacent to each other with ellipsis if the text is too long . Currently i am using below code which aligns my TextView adjacent to each other, but my problem is if the text is too long, the below code not putting the ellipsis. i got some trick to use both toleftof and torightof from here, but in my case it going to circular dependency as mentioned here.

<RelativeLayout
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_toRightOf="@+id/reminderText">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/noteTagOne"
                    android:ellipsize="end"
                    android:singleLine="true"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/noteTagTwo"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:layout_toRightOf="@+id/noteTagOne"
                    android:layout_marginLeft="5sp"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/noteTagThree"
                    android:layout_toRightOf="@+id/noteTagTwo"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:layout_marginLeft="5sp"/>
     </RelativeLayout>

I want output as,

Tag1... Tag2... Tag3...

Basically, i want some ideas, whether in xml i can achieve this or need to do it programmatically, since TextView text's are dynamic i cannot fix maxLength, sometimes only single tag may exist, at that time it should take full text.

Note: I am developing Android project using C# in Xamarin.

enter image description here

Added code is for the above highlighted part. I fixed overlapping of tagsicon & text. Now only two issues.

1) Last tag is overlapping with right aligned image. 2) If TextView texts are short, gap is shown in-between the tags

How to fix it?

use `LinearLayout` and set `orientation` as horizontal and having `weightSum = "3"`. Now keep three `TextView`s inside this `LinearLayout` with each `TextView` having `layout_weight="1"` and `layout_width="0dp"`... — Gopal Gopi, Mar 26 '14 at 06:15
Thanks, working great, but before these three TextView i am having one ImageView, if i added that, first tag is not getting ellipsized... — subha, Mar 26 '14 at 07:03
is that imageview should take a space equal to space of individual TextView? — Gopal Gopi, Mar 26 '14 at 07:05
Yes, its size is 16X16, but if i added inside LinearLayout along with TextView means, image becomes too wide, by adding outside its getting overlapped with first TextView text. — subha, Mar 26 '14 at 07:09
then use `android:drawableLeft` attribute for first textview... — Gopal Gopi, Mar 26 '14 at 07:11
with android:drawableLeft, icon itself is not shown. Also i am having some text with layout_alignParentRightof. Last tag is getting overlapped with right aligned text without putting ellipsis, but first one truncated with ellipsis — subha, Mar 26 '14 at 07:29
if you are using `RelativeLayout`, then your `LinearLayout` containing `TextView`s should be right to link image and left to folder image — Gopal Gopi, Mar 26 '14 at 09:48

score 0 · Answer 1 · answered Mar 26 '14 at 06:11

0

Use this android:ellipsize="marquee" it will work

answered Mar 26 '14 at 06:11

Ravi Bhandari

4,682
8
40
68

But with android:ellipsize="marquee", whether am i able to get dots(...) at the end? Basically i doesn't want the ellipsized text to be scrollable – subha Mar 26 '14 at 06:15

score 0 · Answer 2 · answered Mar 26 '14 at 06:16

0

android:ellipsize="marquee"

or

android:ellipsize="end"
android:maxLines="1"
android:scrollHorizontally="true"
android:singleLine="true"

answered Mar 26 '14 at 06:16

Android

8,995
9
67
108

ShreeshaDas · Accepted Answer · 2014-03-26T09:53:27.437

try this solution

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/noteTagOne"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:maxWidth="100dp"
    android:singleLine="true"
    android:text="Tag111111111111111111"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
    android:id="@+id/noteTagTwo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5sp"
    android:layout_toRightOf="@+id/noteTagOne"
    android:ellipsize="end"
    android:maxWidth="100dp"
    android:singleLine="true"
    android:text="Tag2222222222222222"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
    android:id="@+id/noteTagThree"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5sp"
    android:layout_toRightOf="@+id/noteTagTwo"
    android:ellipsize="end"
    android:maxWidth="100dp"
    android:singleLine="true"
    android:text="Tag3333333333333333"
    android:textAppearance="?android:attr/textAppearanceLarge" />

Its working, but is it possible to achieve this without fixing the width, because if the text is small, gap is shown in between tags, it looks odd... — subha, Mar 26 '14 at 07:01
Please let me know.If i am chat smiley icon ellipsize is not working — harikrishnan, Jul 07 '14 at 08:29

Android: Need Ellipsis for Multiple TextViews in Relative Layout

3 Answers3