I'd like to have a box which contains two textviews, a title, and a text, which length can be long or not.
Like this:
Currently, what I have is: if the text is too big, it goes over the title.
The box can be with whatever layout you want (relative, constraint…)...
Does someone know how to do that?
Assuming that the title won't ever be "too long", the easiest solution would be to use a LinearLayout with layout_weight and gravity on the second TextView:
<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"
tools:text="title"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="end"
tools:text="some very very very very very very very very long text"/>
</LinearLayout>
Related
I have something like "There are 200€" but I want to style the value (ex. textColor Red)
Is there any way of having two textViews to seem like an entire one?
A textView inside a textView or a textViewContainer or something.
I can achieve it on the run like this answer: Change text color of one word in a TextView
But I want to do from the layout file. Any chance?
Thanks
EDIT
<TextView
android:id="#+id/lastIncome"
android:text="Tu último ingreso fueron"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/dash_font_size"/>
<TextView
android:id="#+id/lastIncomeValue"
android:text="200€"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/dash_value_font_size"
android:textColor="#color/greensea"
android:layout_gravity="right"/>
You can achieve this with a horizontal LinearLayout. The LinearLayout is the container for the two side by side TextViews. This layout can be placed in any other container (LinearLayout, RelativeLayout, etc.) in your XML.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="There are " />
<TextView
android:id="#+id/amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="200€"
android:textColor="#ff0000"/>
</LinearLayout>
You can use a easy approach to do this within one textview using SpanableString Builder Click here to get this approach
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>
I have a layout in which two TextViews are to be displayed on the same line such that
If TextView1 is a short text, TextView2 should be immediately right to TextView1(IMAGE1) and if the TextView1 is a long text, TextView2 should be at right corner of the Layout on the same line(IMAGE2)
How can I achieve this ?
i use simple horizontal LinearLayout with android:layout_weight attribute and it worked like you want.
Example:
<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/text1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="teeeeeeeext1"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text2"/>
</LinearLayout>
Use a layout like this..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/editText2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="38dp"
android:layout_toRightOf="#+id/editText1" />
</RelativeLayout>
edittext 1 will push edittext2 to its right...depending on text in it..
You can set android:maxWidth property for first text view. So your layout would look like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:text="sdfksdofsdfsdfsdfsadfgwagrswargweqrgeqrgqwergeqrgeqrg"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/textView1"
android:text="text2"
/>
Edit:
I apparently misread (or did not read fully) your question. Just don't mind my answer - I vote for mxy's :)
The last time I had the same problem, I wasn't able to find or hack away a straightforward solution. Counting pixels was not an option (at least not for me). But I found a workaround that eventually led to the same display concept, and that was to use SpannableStringBuilder.
As I'm assuming you want two different TextViews because you want them to have different colors (or size, or style, or typeface).
The idea is to use a single TextView for the whole thing, and prepare a SpannableString before doing setText on your view.
By using combinations of ForegroundColorSpan, TextAppearanceSpan, etc, you can make your single TextView look like different TextViews with different styles, sitting side by side, wrapping to the next line as necessary.
Links:
Setting font color at runtime
TextAppearanceSpan sample
I am having trouble getting a screen to appear as I would like it to be
The code below shows two lines of textview's
First line is just a date textview, below this are 3 textviews with some data in. On the right hand side I have a button and I wish to have it span over the two lines.
trouble is the 3 textviews could have data that push into the button and instead of word wrapping the text is either above the button or pushes the button off the screen
Could anyone help me solve this
Thanks for your time
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/border_small">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<!-- single date line -->
<TextView
android:text=" - "
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="#dimen/font_size_8"
android:layout_alignParentTop="true">
</TextView>
<!-- line under the date having 3 text fields -->
<TextView
android:text=" TEST TEXT TEXT "
android:id="#+id/round"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text_color_white"
android:textSize="#dimen/font_size_6"
android:layout_below="#id/date">
</TextView>
<TextView
android:text=" - "
android:id="#+id/spacer1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text_color_white"
android:textSize="#dimen/font_size_6"
android:layout_toRightOf="#id/_round"
android:layout_below="#id/date">
</TextView>
<TextView
android:text=" TEST TEXT TEXT "
android:id="#+id/classification"
android:layout_toRightOf="#id/spacer1"
android:layout_below="#id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text_color_white"
android:textSize="#dimen/font_size_6">
</TextView>
<!-- button is on right hand side and spans both lines -->
<Button
android:text="#string/button_view"
android:layout_width="wrap_content"
android:id="#+id/button_details"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:textSize="#dimen/font_size_6"
android:layout_height="wrap_content">
</Button>
</RelativeLayout>
</LinearLayout>
Change the RelativeLayout
android:layout_width="match_parent"
One thing I noticed is that in your spacer1 TextView, you have this line: android:layout_toRightOf="#id/_round" You have an extra underscore in there. That's not your problem, though. Wrap your date, round, and spacer1 TextViews in a Relative or Linear layout, and add the android:layout_toLeftOf="button_details" attribute to it. Should fix your problem.
Try setting both android:layout_toRightOf and android:layout_toLeftOf on the text field(s) that need to use word wrap. So you might make the right-most TextView use this code:
<TextView
android:text=" TEST TEXT TEXT TEST TEXT TEXT TEST TEXT TEXT TEST TEXT TEXT TEST TEXT TEXT "
android:id="#+id/classification"
android:layout_toRightOf="#+id/spacer1"
android:layout_toLeftOf="#+id/button_details"
android:layout_below="#id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
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>