I've got an xml file for a ListView item. it looks like this, containing three textviews:
Now, the second TextView in the middle sometimes got text that is too long to fit between the other two TextViews. That's why I wanted to make it ellipsized.
My .xml file looks like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="2dp"
android:background="#drawable/card_background" >
<TextView
android:id="#+id/list_textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="#string/test"
android:textColor="#color/text"
android:textSize="20sp"
android:textStyle="bold"
android:width="75dp" />
<TextView
android:id="#+id/list_textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:layout_toRightOf="#+id/list_textview1"
android:layout_toLeftOf="#+id/list_textview3"
android:text="#string/test"
android:textColor="#color/text"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/list_textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingLeft="20dp"
android:paddingRight="5dp"
android:text="#string/test"
android:textColor="#DEDEDE"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
As You might see in the center TextView values, I've added
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
But the result is just a long text, shorten with three points at the end. It just won't move?
Here's an image:
This center TextView does not scroll.
Note that it's an item of a ListView. That's why I tried to made the center TextView focusable, what ended in not being able to press on the list item.
Any ideas?
I've got the solution from user zgc7009 :
I just had to add:
TextView textView3 = (TextView) findViewById(R.id.list_textview3);
textView3.setSelected(true);
Worked nicely, thanks!
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 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>
I have this layout inside of a RelativeLayout:
<LinearLayout
android:id="#+id/llWatchItemCommentButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/myMasterCat_Item"
style="#style/DropShadowEffect"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="99"
android:shadowColor="#ffffff"
android:text="Item"
android:textColor="#515b61"
android:textSize="22sp" />
<ImageView
android:id="#+id/bFollowComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/featured_button_selector"
android:padding="5dp"
android:src="#drawable/comment" />
</LinearLayout>
<TextView
android:id="#+id/myMastCat_Cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/llWatchItemCommentButton"
android:layout_alignLeft="#+id/llWatchItemCommentButton"
android:layout_marginLeft="10dp"
android:text="MasterCat"
android:textColor="#666"
android:textSize="16sp" />
Essentially, if that TextView in the Layout becomes two lines, it will overlap with the TextView positioned below theLinearLayout`.
Is there an attribute perhaps that could correct this? As in, I want the bottom TextView to be below the entire LinearLayout at all times, even if it begins to grow. Right now, the position appears fixed.
Have you tried the following:
<TextView
android:id="#+id/myMastCat_Cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/llWatchItemCommentButton" //add this line in
android:layout_alignBottom="#+id/llWatchItemCommentButton"
android:layout_alignLeft="#+id/llWatchItemCommentButton"
android:layout_marginLeft="10dp"
android:text="MasterCat"
android:textColor="#666"
android:textSize="16sp" />
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...
The marquee animation does not work, this is what I did.
<LinearLayout android:layout_height="wrap_content"
android:layout_width="wrap_content" android:background="#drawable/bg_trans"
android:layout_alignParentBottom="true" android:orientation="vertical">
<TextView android:id="#+id/trackName"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:textColor="#android:color/white" android:textSize="18sp"
android:maxLines="2" android:ellipsize="marquee"
android:scrollHorizontally="true"
android:focusable="true" android:focusableInTouchMode="true"
android:marqueeRepeatLimit="marquee_forever"
android:layout_gravity="center_horizontal" />
<TextView android:id="#+id/artistName"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:textColor="#android:color/white" android:textSize="18sp"
android:maxLines="2" android:ellipsize="marquee"
android:scrollHorizontally="true"
android:focusable="true" android:focusableInTouchMode="true"
android:marqueeRepeatLimit="marquee_forever"
android:layout_gravity="center_horizontal" />
</LinearLayout>
It works for the first textview but doens't work for the second. What am I doing wrong?
This works for me -
<TextView
android:id="#+id/capture_mode"
android:layout_width="200px"
android:layout_height="wrap_content"
android:text="This is a test of marquee on the text view in android."
android:ellipsize="marquee"
android:scrollHorizontally="true"
android:singleLine="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:marqueeRepeatLimit="marquee_forever"
/>
The field marqueeRepeatLimit will set the number of repitions.
UPDATE: The width of the text view need to be hardcoded to a specific value, you can set it to wrap_content. In such cases the marquee will still work just that it will have some blank space after the end the text and before it starts to display the text again. (Think Digital signboards, they have some gap in the display before displaying the next item.)
Other then what is mentioned above you also need to add
txtView.setSelected(true)
worked for me adding this line