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...
Related
I have two text views in a layout. I would like to display them next to each other like so:
|[TextView1][TextView2] |
Width of the first text view can vary dramatically. From several symbols up to a 100 symbols, but I would like to ellipsize it if it is too long and TextView2 should always be visible. Like so:
|[TextView1TextView1Tex...][TextView2]|
I have tried the following layout, but it displays TextView2 always at the end of the screen:
[TextView1] [TextView2]|
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:maxLines="1"
android:ellipsize="end"/>
<TextView
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
I have tried to change the width of TextView1 from 0 to wrap_content, but then it pushes the TextView2 out of the sight like so:
|[TextView1TextView1TextView1Text...]|
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:maxLines="1"
android:ellipsize="end"/>
<TextView
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Any help would be much appreciated.
It may be a overkill, but TableLayout does the trick.
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/firstTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"/>
<TextView
android:id="#+id/secondTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"/>
</TableRow>
</TableLayout>
android:shrinkColumns="0" is the catch here. It tells the table to only shrink the first column while keeping the others untouched. The result is that the system will only resize the first column, i.e. your first TextView.
Try this solution, it works for me,
<?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="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:ellipsize="end"
android:maxLines="1"
android:layout_height="wrap_content"
android:text="TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView" />
<TextView
android:id="#+id/textView2"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#FF0000"
android:text="Second Textview" />
</LinearLayout>
![enter image description here][1]
Output: Check below Screen shot:
Not very proud of this solution, but it does the trick,
I have set width of both TextView1 and TextView2 to "wrap_content"
Then in the code I have set maxWidth of TextView1 to 80% of it's parent like so:
view.setMaxWidth((int)(((View)view.getParent()).getWidth() * 0.8));
When you specify weight for only one of the child elements,you are telling android that that view is the only on whose visibility you care about.However if you specify weight for both Child views.That ensures that both are visible.
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:maxLines="1"
android:ellipsize="end"/>
<TextView
android:layout_width="0dp"
android:layout_weight="0.25" //this makes sure both views are displayed
android:layout_height="wrap_content"/>
</LinearLayout>
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 a RelativeLayout whose width/height is set to wrap_content. However, the button in the bottom right is truncated on its lower side.
Changing the RelativeLayout's paddingBottom doesn't help, neither does adding a marginBottom to the button.
Any ideas?
Here's my code:
<RelativeLayout
android:id="#+id/sign_up_phase_enteraddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:background="#ff6aa639"
>
<TextView
android:id="#+id/sign_up_signuphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="29dp"
android:text="#string/sign_up_signuphere"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/sign_up_emaillabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sign_up_signuphere"
android:layout_alignLeft="#id/sign_up_signuphere"
android:layout_alignBaseline="#+id/sign_up_email"
android:text="#string/sign_up_emailaddress"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/sign_up_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="46dp"
android:layout_below="#id/sign_up_signuphere"
android:layout_toRightOf="#id/sign_up_emaillabel"
android:ems="10"
android:inputType="textEmailAddress" >
<requestFocus />
</EditText>
<Button
android:id="#+id/sign_up_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_haveaccount"
android:layout_alignRight="#id/sign_up_email"
android:layout_below="#id/sign_up_email"
android:text="#string/sign_up_signup" />
<TextView
android:id="#+id/sign_up_haveaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/sign_up_emaillabel"
android:layout_marginTop="27dp"
android:layout_below="#id/sign_up_email"
android:text="#string/sign_up_haveaccount"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
...and this is what it looks like in the emulator:
Any thoughts on how I can get the bottom of my button to show?
TIA!
My fast idea is to set button bottom border to height of text on the left by using xml code
android:layout_alignBottom="#+id/sign_up_haveaccount"
because you've setted layout_below option already. However your xml code is quite not proper :) I will try write here better xml code for you, later.
Well, I found your problem. And I was searching for solution.
I setted for textview new padding bottom because button was aligned to this textview basline. I know that it could be a nice hack but I coudln't find andy good way to handle it :)
According to your layout I changed behaviour for edittext to make it stretchable. Also I grouped all elements into 3 groups. Each one per row to make it more readable.
Also do not forget that first 2 lines about xmls.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/sign_up_phase_enteraddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ff6aa639"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<!-- 1 row -->
<RelativeLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="29dp" >
<TextView
android:id="#+id/sign_up_signuphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sign_up_signuphere"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<!-- 2 row -->
<RelativeLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/row1" >
<TextView
android:id="#+id/sign_up_emaillabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_email"
android:text="#string/sign_up_emailaddress"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/sign_up_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="20dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/sign_up_emaillabel"
android:inputType="textEmailAddress" >
<requestFocus />
</EditText>
</RelativeLayout>
<!-- 3 row -->
<RelativeLayout
android:id="#+id/row3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/row2" >
<TextView
android:id="#+id/sign_up_haveaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="27dp"
android:paddingBottom="15dp"
android:text="#string/sign_up_haveaccount"
android:textAppearance="?android:attr/textAppearanceSmall" />
<Button
android:id="#+id/sign_up_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_haveaccount"
android:layout_alignParentRight="true"
android:text="#string/sign_up_signup" />
</RelativeLayout>
</RelativeLayout>
This is happening because of your padding , you have given 10 dp padding in bottom and your button view doesn't have enough space.Remove padding and check it .
I have a textview Which Contains some text changes dynamically within the UI like below
layout:
<TableRow android:weightSum="2" >
<ImageButton
android:id="#+id/archive"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="90dp"
android:background="#drawable/archive" />
<ImageButton
android:id="#+id/facebook"
android:layout_width="-200dp"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:background="#drawable/facebook" />
</TableRow>
<TableRow android:layout_marginTop="2dp" >
<TextView
android:id="#+id/titlename1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="4dp"
android:text="#string/nowplaying"
android:textColor="#000000"
android:textSize="12sp"
android:textStyle="bold|italic" />
<TextView
android:id="#+id/titlename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:ellipsize="none"
android:gravity="right"
android:maxEms="25"
android:maxLines="1"
android:scrollHorizontally="false"
android:textColor="#000000"
android:textSize="11dp" />
</TableRow>
<TableRow android:layout_marginTop="2dp" >
<FrameLayout
android:id="#+id/mainlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="0dp"
android:orientation="vertical" >
<ImageButton
android:id="#+id/playbtn"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/play" />
<ImageButton
android:id="#+id/pausebtn"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/pause" />
</FrameLayout>
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="500dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/mainlayout"
android:layout_marginLeft="-203dp"
android:layout_marginRight="0dp" />
</TableRow>
My Problem is that when i execute my Program,my layout output:
Imagebutton1 ImageButton2
NowPlaying: SongDetails
Play/Pause SeekBar
Problem is If my SongDetails text lenght Contains 2 or 3 lines My layout is getting Disturbed?Could any one Suggest?My Requirement is to limit the text like
Song Detailssss etc......in a Same Row
Simply use android:singleLine="true", and android:ellipsize="end". So You need to update TextView code as
<TextView
.....
....
android:ellipsize="end"
android:singleLine="true" />
Refrences :
android:singleLine
android:ellipsize
try to use
android:singleLine="true"
in your textview
also you can set marquee.
Note that this marquee will work if your text line is longer then your screen size only.
Try setting android:ellipsize paremeter to "end"
Like this
android:ellipsize="end"
Try setting android:ellipsize paremeter to "end" if you want to trim the content at the end.
android:ellipsize="end"
Just remove wrap_content. That should work(haven't tried it myself recently, but I used it a couple of months ago).
Otherwise, you could cut the text manually in Java, and cut it at the first newline found.
I have a listview with a custom adapter in which I have 3 textviews, two are next to each other and one is below the others. The problem I am running into though, is when the first textview extends, it pushes the other textview off the screen.
I have not been able to successfully get this to work, here is an example of what's happening:
As you can see when the first textview gets too long, it then pushes the other text off the screen. I would like it so it wraps but the date textview is also showing. It should also be functional in horizontal view.
Here's the listview adapter code:
<RelativeLayout android:id="#+id/vw1" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:descendantFocusability="blocksDescendants" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/liName" android:textSize="17sp"
android:textColor="#333" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:gravity="left"
android:layout_gravity="left" />
<TextView android:id="#+id/liDate" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="right"
android:layout_gravity="right" android:width="60sp" android:layout_toRightOf="#+id/liName" />
<TextView android:id="#+id/liNum" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_below="#+id/liName" />
</RelativeLayout>
I am assuming that the text view being pushed is the liDate one.
You need to put this one before the liName in your layout and set the width to "wrap_content" and align it right. Then you lace the liName to the left of it with "fill_parent" width
So it would look like this:
<RelativeLayout android:id="#+id/vw1" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:descendantFocusability="blocksDescendants" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/liDate" android:textSize="12sp"
android:textColor="#666" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:width="60sp"
android:layout_alignParentRight="true" />
<TextView android:id="#+id/liName" android:textSize="17sp"
android:textColor="#333" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/liDate" />
<TextView android:id="#+id/liNum" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_below="#+id/liName" />
Hope this is what you meant
The key was using "#+id/" for the first textview instead of "#id/"
This worked for me:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/listEventTypeText"
android:layout_toLeftOf="#+id/listEventDateText"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/listEventDateText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/listEventTypeText"
/>
</RelativeLayout>