I want to display ellipsis if my textview length is too long. But for some reason, it doesnt seem to work. Please take a look at the image on how it looks like:
Here is my layout code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/txt1_trans"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:bufferType="spannable"
android:layout_marginLeft="10dp"
android:singleLine="true"
android:ellipsize="end"
android:freezesText="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:text="My Personal > Bank of America savings"
android:textStyle="bold"
android:textSize="18sp"
android:layout_marginTop="5dp"
android:textColor="#000000"/>
<TextView
android:layout_width="wrap_content"
android:id="#+id/TextView2"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="100$"
android:textStyle="bold"
android:layout_marginRight="20dp"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/txt1_trans"
android:layout_alignBottom="#id/txt1_trans"/>
</RelativeLayout>
I want the textView on the left (txt1_trans) to display ellipsis if it takes up the space that textview on the right ("TextView2") occupies. Please let me know what I am doing wrong.
Thanks
You can't use ellipsize with wrap_content as the width. You need to use either wrap_parent or preferably match_parent depending on what version of Android you're targeting.
I found the problem with the layout. For the 2nd TextView on my layout, I have set
alignParentRight = true
And the 1st TextView has
width = "wrap_content"
Because of this, both these TextViews end up taking up common space. In order to avoid that, I set the first TextView to_LeftOf 2nd TextView . This ensures that they dont try to write on the same common space . Here is my correct layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/txt1_trans"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:bufferType="spannable"
android:layout_marginLeft="10dp"
android:singleLine="true"
android:ellipsize="end"
android:layout_toLeftOf="#+id/TextView2"
android:freezesText="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:text="My Personal Bank of America savings"
android:textStyle="bold"
android:textSize="18sp"
android:layout_marginTop="5dp"
android:textColor="#000000"/>
<TextView
android:layout_width="wrap_content"
android:id="#+id/TextView2"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="100$"
android:textStyle="bold"
android:layout_marginRight="20dp"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/txt1_trans"
android:layout_alignBottom="#id/txt1_trans"/>
</RelativeLayout>
Related
I need to fit 2 TextViews in one line. I tried to use LinearLayout, and now my best approach is to use RelativeLayout.
Here you can see XML for it
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="start"
android:visibility="visible">
<TextView
android:id="#+id/partner_full_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_alignParentLeft="true"
android:textColor="#color/black"
android:maxLines="2"
android:textSize="12sp"
android:layout_toLeftOf="#+id/session_duration"
android:text="#string/dummy_text" />
<TextView
android:id="#+id/session_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:maxLines="1"
android:textSize="12sp"
android:layout_alignParentRight="true"
android:text="asdadsd"
android:textColor="#android:color/darker_gray"
/>
</RelativeLayout>
And the result
As you can see it's fit's okay, but second TextView is on the right side, when I want it to be after first TextView.
When I used LinearLayout I faced problem with size of first TextView (if it have to many text in it, second TextView will go off screen). Another approach with LinearLayout gave me similar results to RelativeLayout with same problem (wrong position of second view)
This happens because you are using wrap_content. If textView1 needs the space of the whole screen, then textView2 will get nothing. Instead you can use layout_weight to always give a View his space.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:gravity="center"
android:visibility="visible"
android:orientation="horizontal">
<TextView
android:id="#+id/partner_full_name"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:gravity="left"
android:maxLines="2"
android:text="Super Long String"
android:textColor="#color/black"
android:textSize="12sp" />
<TextView
android:id="#+id/session_duration"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="I will always show"
android:textColor="#android:color/darker_gray"
android:textSize="12sp" />
</LinearLayout>
Remove this line from second TextView :
android:layout_alignParentRight="true"
I have three TextViews in a LinearLayout. I want the last TextView to appear in a new line (from the left most side) when Text goes out of bound of the screen width.
Below is the Xml Code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/general_padding"
android:gravity="center_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/objectNameTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Will Smith "
android:singleLine="true"
android:ellipsize="none"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/orange_app_color" />
<TextView
android:id="#+id/postDetailTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="is now following "
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/subjectNameTv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Kia Kool hain Hum"
android:singleLine="true"
android:maxLines="2"
android:scrollHorizontally="false"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/orange_app_color" />
</LinearLayout> </RelativeLayout>
xml layout screen shot
Thanks
You can't do this from xml but you could do this programatically using only one TextView. I hope that this post will help you: Different font size of strings in the same TextView
How can I achieve the following layout, with TextView being a TextView with ellipsize end and View being wrap_content and immediately to the right of TextView ?
Here are three examples of how the layout should behave, with different TextView width :
|[TextView] [View] |
|[TextView TextView] [View] |
|[TextView TextView T...] [View]|
[Edit]
The following TableLayout gives the correct behaviour :
<TableLayout
android:id="#+id/upper_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/alert_button"
android:shrinkColumns="0"
android:stretchColumns="2" >
<TableRow>
<TextView
android:id="#+id/name_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:includeFontPadding="false"
android:lines="1"
android:paddingTop="2dp"
android:scrollHorizontally="true" />
<TextView
android:id="#+id/unread_count_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:gravity="center"
android:includeFontPadding="false"
android:paddingBottom="0dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="2dp" />
</TableRow>
</TableLayout>
The TableLayout uses 3 columns, the last being the hack : the strechColumns property makes it take all available space, so the second TextView is always immediatly to the right of the first one.
The first TextView ellipsize correctly because of the shrinkColumns property.
However, I don't like the idea of using a TableLayout to achieve that.
Does anybody know a better way ?
Thanks
Try this (I cannot check it now, but to my point of view it should work):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dip" >
<TextView
android:id="#+id/my_txtvw_txtvw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:ellipsize="marquee"
android:maxLines="1" />
<TextView
android:id="#+id/my_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/my_txtvw_txtvw"
android:maxLines="1" />
</RelativeLayout>
Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/my_view"
android:ellipsize="end"
android:maxLines="1"
android:layout_alignParentLeft="true"
android:text="blablabla blablabla"
android:layout_centerVertical="true"
android:gravity="center_vertical|left" />
<TextView
android:id="#+id/my_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:maxLines="1" />
</RelativeLayout>
I'm not sure if you want android:ellipsize="end" or android:ellipsize="marquee". I think the layout will work fine to you, just replace the ellipsize value id needed.
Let me know about your progress...
been trying to figure out Android layouts and having a bit of an issue. i got as far as figuring out how to get the objects in the places i want, using a RelativeLayout (tried LinearLayout and TableLayout combinations, only to find that gravity and attributes weren't doing things i thought they would...) but i've run into an issue with text bleeding behind other text.
the second item demonstrates the problem. i'd like to have this same layout without the text bleeding. here is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_width="wrap_content"
android:padding="6dip">
<TextView android:id="#+id/item_text_product"
android:layout_alignParentLeft="true"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_text_total"
android:layout_alignParentRight="true"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#00aa00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_text_count"
android:layout_alignParentRight="true"
android:layout_below="#id/item_text_total"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/text_count"
android:text="Count: "
android:textSize="12sp"
android:layout_toLeftOf="#id/item_text_count"
android:layout_alignBaseline="#id/item_text_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
Put first your item_text_count and text_count items (I mean, put them above the text_count in the XML)... then:
<TextView android:id="#+id/item_text_total"
android:layout_alignParentRight="true"
android:layout_toLeftOf="#id/text_count"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#00aa00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
As you see, the difference is android:layout_toLeftOf="#id/text_count".
Set a maxEms attribute on the product TextView so that it's width can never exceed n ems.
That way should be the best solution.
I think you just have to add android:layout_toRightOf="#id/item_text_product" to the second textView, but can't try it right now.
The issue is with wrap_content, with it the view is going to expand to fit its content.
What about shrinking the text and using nested Linear Layouts?
You might try and use a LinearLayout if you don't want overlapping behavior.
Something like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="?android:attr/listPreferredItemHeight"
android:layout_width="wrap_content"
android:padding="6dip">
<TextView android:id="#+id/item_text_product"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:id="#+id/item_text_total"
android:layout_alignParentRight="true"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#00aa00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_text_count"
android:layout_alignParentRight="true"
android:layout_below="#id/item_text_total"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/text_count"
android:text="Count: "
android:textSize="12sp"
android:layout_toLeftOf="#id/item_text_count"
android:layout_alignBaseline="#id/item_text_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>
layout_weight="1" causes that view to expand to fill the available space not taken up by the right-hand views.
I have the following layout. This defines a row in my ListView. I noticed that the text is not centered in the row. There seems to be extra bottom padding. How can I make the text appear in the center, vertically, so there is no padding?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/stocks_gradient">
<TextView
android:id="#+id/nameText"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Symbol" android:textStyle="bold" android:textSize="24sp" android:layout_width="100dp" android:textColor="#4871A8" android:paddingLeft="5dp"/>
<TextView
android:id="#+id/priceText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/nameText"
android:gravity="right"
android:text="100" android:textStyle="bold" android:textSize="24sp" android:textColor="#4871A8"/>
<TextView
android:id="#+id/changeText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/priceText"
android:gravity="right"
android:textSize="18sp" android:text="3.07(+1.08%)" android:padding="7dip"/>
</RelativeLayout>
Did you try setting the layout_gravity to center_vertical?
Also, you may have a reason for doing so, but the layout you show would be much simpler as a horizontal LinearLayout. There is no need for a RelativeLayout here.