Android align multiple TextView-s in line - android

i am trying to align multiple (variable) textviews in one line. It should look like this:
- Textview1 | Textview2 | TextView3
Since the textviews vary regarding length I am having a problem aligning them properly(the only thing I know is that Textview1 will be the shortest one).
Here is my code (it is placed inside a Linear Layout):
<RelativeLayout
android:id="#+id/persondetails_names_horizontal_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right" >
<TextView
android:id="#+id/persondetails_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:paddingTop="3dp"
android:text=" Title "
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/persondetails_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Name "
android:textSize="#dimen/font_big"
android:textStyle="bold"
android:layout_toEndOf="#id/persondetails_title"
android:layout_toRightOf="#id/persondetails_title" />
<TextView
android:id="#+id/persondetails_surname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/persondetails_name"
android:layout_toRightOf="#id/persondetails_name"
android:text=" Surname " />
</RelativeLayout>
Now, as long as these 3 Textviews fill out one line on the screen everything is OK, but as soon as one of them gets bigger I get some problems. For example, when I put the surname field very long, it pushes the other 2 views out of the screen (they are not visible) and takes all the space (but just one line!).
What I want is that these views are aligned to the right side, each of them to the right of the previous one, and when it is needed to linebreak into a new line (no mather which textview it is) and in the new line the following textviews should align to the right of it.
So what do I need to change in my code, so that these Textviews are aligned next to each other, and moved properly when one of them is getting bigger ?
Thank you
This is how I implemented Elltz suggestions:
<LinearLayout
android:id="#+id/persondetails_namen_horizontal_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:orientation="horizontal"
android:weightSum="2" >
<TextView
android:id="#+id/persondetails_wert_titel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" />
<TextView
android:id="#+id/persondetails_wert_vorname"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_below="#id/persondetails_text_vorname"
android:gravity="right"
android:layout_gravity="right"
android:text=" "
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:overScrollMode="always"
android:scrollHorizontally="true"
android:singleLine="true"/>
<TextView
android:id="#+id/persondetails_wert_nachname"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_below="#id/persondetails_text_vorname"
android:layout_gravity="right"
android:text=" "
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:overScrollMode="always"
android:scrollHorizontally="true"
android:singleLine="true"/>
</LinearLayout>
But still not working. Actually I removed the "singleLine=true" because in case when one of the 3 textviews gets too long I need it break (don't have a problem with breaking).
Regarding breaking, I want every textview to take as muche space as it needs, the only thing is that all the other views shoud be moved properly.
The property "single line" cannot be right because it is possible that one of these views gets too long for one line, but I have tested it with single line and without:
a) with "singleline=true"
b) without "singleline=true"
In bothe cases I get a wrong output, but case 2 is closer to what I want. But if you look at it you will see that textview2 is being pushed and it breakes in its bounds but not on the entire lenght. Textview 3 takes the most space. But what i want is that every view is fully streched and if needed breaked into new line (textview1 is this "Mag.")
This is how I would like it to look like:

Change the relative layout to a linear layout and then set the orientation to horizontal something like this.
<LinearLayout:id="#+id/persondetails_names_horizontal_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<TextView
android:id="#+id/persondetails_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="3dp"
android:text=" Title "
/>
<TextView
android:id="#+id/persondetails_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Name "
android:textSize="#dimen/font_big"
android:textStyle="bold"
/>
<TextView
android:id="#+id/persondetails_surname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Surname " />
</LinearLayout>

You should try and do a LinearLayout and weight each element.
<LinearLayout
android:id="#+id/persondetails_names_horizontal_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right" >
<TextView
android:id="#+id/persondetails_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:paddingTop="3dp"
android:text=" Title "
android:layout_weight= "1"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/persondetails_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Name "
android:textSize="#dimen/font_big"
android:textStyle="bold"
android:layout_weight= "1"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/persondetails_surname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight= "1"
android:layout_centerVertical="true"
android:text=" Surname " />
</LinearLayout>

To answer why your code line is giving you that problems is a RelativeLayout positions its Views relative to each other, a View will need another View to be layed out if not the parent itself. So TextView 1 is positioned to the left of TextView 2 when TextView two gets bigger since its to the left it will be to the left but not on screen layout or space get it?
To answer you
TextView 1 will be the shortest Using the LinearLayout Approach with weightsum and weight tweak it this way first set the weightsum to two on the LinearLayout and the two i am going to be long TextViews give them a width of 0dp and weight 1 each the shortest TextView will have wrap_content as width and that's all life's is good. now the two long TextViews will calculate their sizes and the rest will be left for the shorter one. I do not not specifically how you want your TextView to long in terms of straight horizontal line but after you have done that you can add these elements to your TextView in xml or you could do it in java to ensure your straight lined TextViews
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:overScrollMode="always"
android:scrollHorizontally="true"
android:singleLine="true"
EDIT
this is what i mean
int width = getWindow().getDecorView().getMeasuredWidth();
//i am getting the overal width of the screen
Toast.makeText(getApplicationContext(), String.valueOf(width), Toast.LENGTH_SHORT).show();//toast it
for(int i =0; i < ((LinearLayout)findViewById(R.id.l)).getChildCount(); i++){
//looping through the parent container
TextView child = (TextView) ((LinearLayout)findViewById(R.id.l)).getChildAt(i);
child.setSelected(true);
child.setEllipsize(TruncateAt.MARQUEE);
child.setHorizontallyScrolling(true);
child.setSingleLine(true);
if(i+1 == 3){ //the last textview
child.setLayoutParams(new LinearLayout.LayoutParams(
((LinearLayout)findViewById(R.id.l)).getChildAt(1).getRight(),
LinearLayout.LayoutParams.WRAP_CONTENT));
}else{ // the first two take 1/3 of the width of the screen
child.setLayoutParams(new LinearLayout.LayoutParams(width/3, LinearLayout.LayoutParams.WRAP_CONTENT));
}
}
}
Hope it helps

Related

Two TextViews side by side - both TextViews should take always as much space as possible

I have Two TextViews in one LinearLayout and I want both texts take as much space as given in the LinearLayout but without cutting off each other. I tried to work withminWidth but layout_weight ignores it. Here is one example:
<TextView
android:id="#+id/textOrigin"
android:layout_width="0dp"
android:layout_height="match_parent"
android:ellipsize="end"
android:maxLines="1"
android:layout_weight="1"
android:minWidth="170dp". <-- does not work.../>
<TextView
android:id="#+id/textDestination"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:ellipsize="end"
android:maxLines="1"
android:layout_weight="0"
android:gravity="end"/>
The problem is that the second TextView can be very long and if the width is wrap_content It will cut off the first TextView aligned. So I want to set a minWidth.
|<TextView>......<TextView>| --> no cut off normal position
|<TextViewcanbeverylong...><TextView>| --> left one very long. right one should have minWidth of 100 and then ellipsized
|<TextView><TextViewcanbeverylongtoo...>| --> right one very long. left one should have minWidth of 100 and then ellipsized
All three scenarios should work
Two TextViews side by side, only one to ellipsize?
This one is similar but not the same as my question. The Ticket above just solve the not cutting off text in one direction so only if the left text ist long the right text will not be cut off but I want that in both directions.
SOLUTION:
Here is the solution: Just change Width to wrap_content. Then it is possible to use minWidth.
<TextView
android:id="#+id/textOrigin"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:ellipsize="end"
android:maxLines="1"
android:layout_weight="1"
android:minWidth="170dp"/>
<TextView
android:id="#+id/textDestination"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:ellipsize="end"
android:maxLines="1"
android:layout_weight="1"
android:minWidth="170dp"
android:gravity="end"/>
Try this code, maybe it works!
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textOrigin"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:layout_weight="0.5"/>
<TextView
android:id="#+id/textDestination"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:layout_weight="0.5"
android:gravity="end"/>
</LinearLayout>

android make left textview to be shorten and right remain fully visible

I need to display two single-line TextViews horizontally. The left TextView (let's name it 1) may have a longer text which may shortened and finished with "...". The right text view (2) has a short text and should never get shortened.
I want the 1 to remain aligned to the left end of the parent. The 2 aligned to the right side of 1.
There are now 2 conditions that I have to meet
a) if the 1 has a short text then the 2 should get aligned to the right of 1 (none of the gets shortened).
b) but if the 1 has a too long text then the text of 1 should be shortened by '...' while the view 2 is moved maximally to the right of the parent but still remains fully visible (no ...)
My current solution is the following below. The scenario b) is fine with mine, but in case of a) the problem is that the view 2 is moved to the right side of the parent and the 1 to the left side - both are short and there's pretty much space in between which looks odd. I want 2 to move to the further left (next to 1) and leave this space on the right side.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="1dp"
android:layout_weight="0.5">
<TextView
android:id="#+id/ns_in_txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="top|left"
android:maxLines="1"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
<TextView
android:id="#+id/ns_txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/ns_in_txt"
android:gravity="top|left"
android:maxLines="1"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
</RelativeLayout>
Try doing this
<RelativeLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_context"
android:layout_marginTop="1dp">
<TextView
android:id="#+id/ns_in_txt"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:gravity="left"
android:maxLines="1"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
<TextView
android:id="#+id/ns_txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/ns_in_txt"
android:gravity="left"
android:maxLines="1"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
</RelativeLayout>
Apparently, you want two scenarios which require to set a different orientation to the parent layout: first horizontal, second vertical. Maybe I'm wrong (and I hope so but) in static xml, there will be difficult to do this.
Try the code below to test if I'm wrong:
Scenario 1: orientation horizontal = the text 1 is not big enough
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/textLong"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp"
android:text="This is a normal text not big" />
<TextView
android:id="#+id/textShort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp"
android:text="short text" />
</LinearLayout>
Scenario 2: orientation vertical = the text 1 is too big
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textLong"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp"
android:text="This is a biiiggg loooonnng teeeeexxxxxtttt" />
<TextView
android:id="#+id/textShort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp"
android:text="short text" />
</LinearLayout>
To resolved your issue, you can try 2 solutions.
First, try to create a maxLenght limit, which calculate in your Activity and change the parent orientation of the LinearLayout. Get the number of chars that you have and display the orientation as well.
Second, customise your own class extend TextView. And create a getWidth method which return the width of the long TextView in comparison to it parent and change the orientation.
Maybe the following questions/answers could be useful (I think there are not solutions but more as inspiration):
In Android how to get the width of the Textview which is set to Wrap_Content
Get the size of a text in TextView
How to find android TextView number of characters per line?
Auto Scale TextView Text to Fit within Bounds
EDIT:
I found a solution with the last url that I writed above. See this answer where the dev wanted to make the same as you. So he decided to create a autoresizable textview. Take a look here: Move two side by side textviews to be one under another if text is too long
I hope this will help you.
May I suggest to use combination of LinearLayout and a little bit of coding. The idea is to have them side by side regardless of the size. and after the right textview is measured and laid out, set the max width of the left textview to whatever space left.
Here is the layout file, nothing special here:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/ns_in_txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:ellipsize="end"
android:gravity="top|left"
android:maxLines="1"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
<TextView
android:id="#+id/ns_txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:ellipsize="none"
android:gravity="top|left"
android:maxLines="1"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
</LinearLayout>
and add some codes to the activity/fragment:
final TextView tvLeft = (TextView) findViewById(R.id.ns_txt);
final TextView tvRight = (TextView) findViewById(R.id.ns_in_txt);
ViewTreeObserver obs = tvRight.getViewTreeObserver();
obs.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
tvLeft.setMaxWidth(SCREEN_WIDTH - tvRight.getWidth());
}
});

Android: TextView word-wrap with shortest line first

For a graphical banner I am having two TextViews positioned on top of each other.
The top TextView is aligned to bottom and the bottom one is aligned to top so that the texts are always positioned around the same center. The TextViews look like this in the layout:
<LinearLayout
android:layout_height="match_parent"
android:layout_width="fill_parent"
android:paddingLeft="126dp"
android:paddingRight="10dp"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:maxLines="2"
android:gravity="bottom|left"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:textSize="16sp" />
<TextView
android:id="#+id/artist"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:maxLines="2"
android:gravity="top|left"
android:textColor="#AAAAAA"
android:textSize="16sp" />
</LinearLayout>
My problem is that when the top TextView wraps the text, the wrapping is with the last line as the smallest one, and not taking into account that I am aligning to the bottom. See below.
I would have expected the gravity, to make the text wrapping happen in a way that has most of the text on the bottom line.
Any suggestions to how I could get the TextView to perform the word-wrapping in a last-line-first mannor?
Thanks for reading!
As far as I know, there are no last-line-first mannor as you need, however, there are some suggestion I would like to give:
Solution 1: Let your text view (top one) be the single-line and with the ellipsize. This way, you will ensure your text view alway at the bottom of the container with a single line and ... at the end of the text. The drawback, the text may not displayed fully.
android:singleLine="true"
android:ellipsize="end"
Solution 2: You need to calculate the size of each character of your text, split your top text view into 2 text views, assign the text for those 2 text views. For example, in your case. After calculating the size of your text and compare with the size of the text view (the width in this case) , you will assign "The 20/20" to the top-top one, and the remain "Experience - 2 of 2 (Deluxe)" to top-bottom one. This can also apply to the long text with more than 2 lines. Just calculate and apply correctly, it will work. Here is the code for calculate the text size in pixel:
Paint p = new Paint();
String your_text = "This is your text";
float size = p.measureText(your_text);
// assign one part to the top-top
// assign another part to the top-bottom
Hope this helps.
// try this way
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First TextView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:text="Second TextView"/>
</LinearLayout>
</LinearLayout>

Android layout space-filling problem

I'm having real difficulty coming up with a layout which works. I have a view which fills the width of the screen. It contains three sub-views:
Some text
A number in parentheses after the main text
A button
The button is right-aligned, and the text items are left-aligned one after the other, as shown:
| Some heading text (n) [button] |
The problem is controlling what happens when the text is too long. I want it like this, so that the number is always visible just to the right of the main text. The main text should be truncated if needed so the other two views remain visible.
| Some very very long headin... (n) [button] |
The closest I've got which succesfully truncates the main text results in the (n) always being right-aligned next to the button even when the main text is short enough to fit. That's not what I want.
How would you approach this?
I'm not posting any of my current XML yet, lest it prejudice anyone's suggestions.
I do not believe there's any xml layout for that. My guess is that you will need to extend TextView and measure the text length inside onDraw(...), adjusting the text accordingly through some iteration (i.e., removing one character at a time until the text fits the canvas)
I just found another question that is quite similar to yours: Ellipsize only a section in a TextView . No other answer than ellipsize in the middle.
Another thoughts:
I'm wondering if it would work to have one textview with the main text (ellipsize left, wrap_content) and another with the number in the parenthesis (wrap_content), both inside an horizontal linear layout. That layout would be inside a relative layout and layout_toLeftOf the button, which would be wrap_content, layout_alignParentRight.
Does it make any sense? I don't have Eclipse now to test it myself. Not sure if the (n) textview would be lost behind the button or not with a long text.
Alternatively (and less interesting), you can setup one single relative layout with the two textviews all layout_toRightOf and the button aligned to the right (layout_alignParentRight) and set the max witdth ot the first textview (android:maxWidth). You would need to set up different layouts for different screens, though.
An example with a fixed max width that will work as required:
<?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"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click me"
android:id="#+id/bt1"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="short text"
android:lines="1"
android:ellipsize="end"
android:id="#+id/t1"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(n)"
android:lines="1"
android:id="#+id/n1"
android:layout_toRightOf="#id/t1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click me"
android:id="#+id/bt2"
android:layout_below="#id/bt1"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="very long text that will not fit in any layout, regardless of the size of the screen"
android:lines="1"
android:ellipsize="end"
android:id="#+id/t2"
android:layout_below="#id/bt1"
android:layout_alignParentLeft="true"
android:maxWidth="220dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(n)"
android:lines="1"
android:id="#+id/n2"
android:layout_below="#id/bt1"
android:layout_toRightOf="#id/t2"
/>
</RelativeLayout>
Try a linearlayout, set the weight of the text view as 1,, and set ellipsis as TruncateAt.MIDDLE. Check this layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:id="#+id/text" android:layout_width="0dp"
android:layout_height="wrap_content" android:lines="1"
android:ellipsize="middle" android:gravity="left"
android:layout_weight="1" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
The key is the ordering of the items as this is the order they are measured, in order to ensure your button and (n) text get enough space in the overall layout:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
/>
<TextView
android:id="#+id/middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_toLeftOf="#id/button"
android:text="(n)"
/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/middle"
android:layout_alignParentLeft="true"
android:gravity="left"
android:ellipsize="end"
android:text="Some really long to text to make this flow over"
android:lines="1"
android:maxLines="1"
/>
</RelativeLayout>

How to get a layout where one text can grow and ellipsize, but not gobble up the other elements on the layout

I've read some of the other posts here such as Two TextViews side by side, only one to ellipsize? but I'm still having an issue with my layout.
I have a list item layout, and I want each item in the list to look like this:
| (Expanding TextView #1) (TextView #2) (Image) |
TextView #2 and Image must always be visible.
Right now I'm using the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainItem"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:background="#drawable/myBackground"
android:onClick="onClick"
android:longClickable="true">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_gravity="center_vertical|left"
android:gravity="center_vertical|left"
android:layout_toLeftOf="#+id/myImage"
android:layout_alignParentLeft="true">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="14dp"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="0"/>
<TextView
android:id="#+id/testView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView
android:id="#+id/myImage"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center_vertical"
android:layout_alignParentRight="true"
android:paddingRight="14dp"
android:onClick="onClick"
android:src="#drawable/myIcon"/>
</RelativeLayout>
I've read from the other posts that adding a layout_weight="1" to TextView#1 will force TextView #2 to be shown, and it does, but the problem is that this forces TextView #2 to be right-aligned because it causes TextView #1 to expand even when it doesn't have to.
I'm pretty stumped on this now... could anyone help? :)
UPDATE
I was able to fix this by using a TableLayout and the shrink & stretch column properties. By playing around with that it finally worked the way I wanted it to.
This will truncate (if needed) the text in the first TextView, keep the text in the second TextView as is, and align and keep as is the text in the third TextView.
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0"
android:stretchColumns="2">
<TableRow>
<TextView
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"/>
<TextView
android:layout_height="wrap_content"
android:maxLines="1"/>
<TextView
android:layout_height="wrap_content"
android:gravity="end"
android:maxLines="1"/>
</TableRow>
</TableLayout>
If I were you I'd probably switch the row from LinearLayout to RelativeLayout, that way you can align image to the parent right, butt textview2 right up next to it and just align textview1 with the parent left and it can resize without affecting the other two fields.

Categories

Resources