I have been looking at other threads but I couldn't find an answer so here comes my question:
Is it possible to create a automatically horizontal scrolling TextView with a button to the right of it using layout_weight?
"My incredibly long search text here" "The button"
I have tried to make a scrollable textview with "fill_parent" instead of 0dp and layout_weight as well but then the entire text takes up the "row" (obviously since it is fill_parent) and the button is not shown AND the text didn't scroll horizontally even then when I ran it in the android virtual device.
Edit: forgot to write how I tried to make the scrollable textview
<TextView
android:singleLine="true"
android:scrollHorizontally="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/searchResult"
android:focusable="true"
android:focusableInTouchMode="true"/>
Of course it's possible. Something like this will do:
<LinearLayout
android:layout_widht="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0px"
android:layout_weight="7"
.../>
<Button
android:layout_width="0px"
android:layout_weight="3"
... />
</LinearLayout>
Key here is make the width zero so that there's all horizontal space remaining when the weight mechanism assigns all remaining space to linear layout components in relation to their layout weight.
Related
so I'm currently working on an app on Android, and I got stuck on a specific problem regarding the RelativeLayout, which I can't find a way to solve.
I have in the layout three views as follows: TextView, Textview and ImageView (laid horizontally), here is a screenshot of the ios counterpart:
the Textview at the middle should stick to the first one, until he gets to the Imageview, when he does, he keeps his minimum size (wrap content), while the first Textview truncate.
On IOS I setted priorities to the constraint to accomplish this, but I can't figure out how to solve this on Android.
Here what I tried:
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/daily_movie_title_box">
<TextView
android:id="#+id/daily_header_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="New Text aawi oa ioawfwi"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/white"
android:lines="1"
android:singleLine="true"
android:layout_alignParentStart="true"
/>
<TextView
android:id="#+id/duration_text"
android:text="138 mins"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textSize="13sp"
android:textColor="#color/white"
android:lines="1"
android:layout_alignBaseline="#id/daily_header_textview"
android:layout_toStartOf="#+id/certification_icon"
android:layout_toEndOf="#id/daily_header_textview"
/>
<ImageView
android:id="#id/certification_icon"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/uk12a"
android:layout_alignBottom="#id/daily_header_textview"
app:layout_aspectRatio="100%"/>
</android.support.percent.PercentRelativeLayout>
Which resulted in this (which is what I want):
But when I increase the first Textview text it's not behaving as I desire...
Is it possible to achieve the behaviour I want in Android (keep the middle Textview wrap content, and truncate the first one if needed)?
I will post an update if I find a solution eventually, just wanted to see if anyone can find an easy way to achieve this behaviour, as I suspect there is.
Thanks.
From my understanding, you want the first TextView to be as large as possible, without adding space after the text if the text is too small. The second TextView should only wrap_content, but it should fill the rest of the parent layout when the row doesn't. The ImageView is set to wrap_content.
I tested it with this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="Shrinking text dddddddddddddddddddddd"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Midle column"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"/>
</TableRow>
</TableLayout>
</LinearLayout>
The only problem is that if the second column has a incredibly large text, it will push the other views out of the parent. But in your case, I don't think that will be a problem. Otherwise, I think it does the job.
These are some suggested solutions:
You can use LinearLayout with horizontal orientation and weight for each component (TextViews and ImageView).
You can set the minimum and maximum text length for the second TextView.
But i prefer to apply the first solution. You can assign a weight for each component ( amount of space on the screen ) using:
android:layout_height
I have the following linear layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/SearchBox">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Search: "
android:id="#+id/SearchText"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_le="#+id/SearchBox"
/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search"
android:id="#+id/SearchButton"/>
</LinearLayout>
As you can see, the EditText is between the view and the button. Is there any property I can set that makes the edit text fill the space between the other two controls? (Which have a fixed size, based on their static content).
Setting the Edit Text's layout width to "Fill_parent" pushes off the button (since there's no more room in the parent).
Ideally, I guess the thing to do would be to add the edit text last, specify that it should be between the other two controls, and then set it to fill width.
But I'm not sure how to do that. Any help?
use property android:weight='1' on the EditText once you have fixed the widths of the other views
I am wondering how to have a TextView display its content on several lines without hardcoding the width in the XML.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="false"
android:text="Long multiline text"/>
<TextView
android:textColor="#color/text_color"
android:layout_width="130dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
Any thought welcome.
EDIT: my problem is that when the text exceeds the width set (because it reaches the end of the screen) a portion of the text is just not displayed. I would expect the text to be split on two lines
Though I cannot reproduce the not wrapping problem, you can fix the positioning problem by using a weight on the first TextView. Using the following XML gives the expected output in the graphical layout view in Eclipse:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:singleLine="false"
android:text="Long multiline text"/>
<TextView
android:textColor="#color/text_color"
android:layout_width="130dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
Also add
android:minLines="2"
android:scrollHorizontally="false"
You could try
android:inputType="textMultiLine"
in your TextView XML. This worked for me.
I think I had very similar problem. I had a TextView with a text, where I was not sure how much lines will it take. It was encapsulated by a LinearLayout having android:layout_width="match_parent" to ensure my text will fill out all the space horizontally. However, the problem was that my text did not fit into 1 line and when it did break into a new line, the next view component below it did not move downwards to give enough space for the second line to be viewable fully.
I could achieve the solution by changing the LinearLayout that was containing my TextView into a RelativeLayout. By this way, the element below the text (actually below the Layout itself) was moved automatically to give enough space for the multi-line text.
I have a left-aligned TextView and a right-aligned button side-by-side. I want the button to take up as much space as it needs on the right (depending on the text that goes in it) and the left text to fill as much as it can and ellipsize on any overflow.
|Long title that may or may not ellipsi... <Button with text>|
I've read and tried lots of other posts that seem to have similar problems, none of which have worked for me. I've tried both using a LinearLayout with weights as well as a RelativeLayout with layout_toLeftOf assigned, none of which is resulting in what I need.
This is my LinearLayout code (with unnecessary parts taken out) where I give the left TextView a layout_weight of 1 and the button a layout_weight of 0. This should give the right-side button all the space it needs and give the TextView the rest, but instead the left title stops showing up and the right button gets smushed to the side and cut off. I've tried replacing the widths of both the Text and button to 0dip as I've seen suggested, which doesn't change anything.
<LinearLayout
android:layout_height="#dimen/title_bar_height"
android:layout_width="fill_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:layout_gravity="left|center_vertical"
android:gravity="left|center_vertical"
android:textSize="22sp"
android:lines="1"/>
<include layout="#layout/action_buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
Replacing the layout_weight of the TextView with 0 actually allows the right-side button to properly fit on the screen fully, but the left text still does not show up. If I have both layout_weights set to 0 for the TextView and button and I then change the TextView's width from 0dip to wrap_content, everything shows up but the button instead is squished to fill the remaining space (and the text inside is truncated).
Here is my attempt with a RelativeLayout:
<RelativeLayout
android:layout_height="#dimen/title_bar_height"
android:layout_width="wrap_content">
<include layout="#layout/action_buttons"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#layout/action_buttons"
android:gravity="center_vertical"
android:scaleType="center"
android:textSize="22sp"
android:ellipsize="end"
android:lines="1"/>
</RelativeLayout>
Everything aligns fine and shows up, except that the left TextView (when it's too long) overlaps and appears on top of the button rather than truncating and ellipsizing. Shouldn't android:layout_toLeftOf"#layout/action_buttons" specify that the TextView should stay to the left boundary of the button?
I've tried seemingly everything I can find on this site related to this issue, and I still can't get a solution. Any help would be greatly appreciated!
This will do the trick for you:
<?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"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:layout_weight="1"
android:ellipsize="end"
android:gravity="left|center_vertical"
android:singleLine="true"
android:text="Some really long textttttttttt tooooooooooo make the ellipsize work in the preview"
android:textSize="22sp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Text" />
</LinearLayout>
Here's what it looks like when run:
And again with a button with more text:
He is an example of my TextView, which goes off the right side of the screen. I tried setting paddings and stuff, but nothing seemed to work. Any ideas? Here is my hierarchy,
ScrollView,TableLayout
<TableRow>
<TextView
android:layout_column="1"
android:id="#+id/text_price"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textCapCharacters"
android:padding="2dip"
android:text="#string/game_price"
/>
<EditText
android:id="#+id/gameprice"
android:inputType="textCapCharacters"
android:gravity="right"
android:minWidth="120dip"
/>
</TableRow>
Try setting the width of the textview to wrap_content, remove the layout_column=1 (not necessary, afaik), and set the height and width of the edittext to wrap_content.
Anyway it's weird to have a textview filling the screen and an edittext to its right with a width of at least 120dip. If you stick to a TableLayout maybe you'll have to play with the weights of the elements, tho I'm not too sure of how this works in a tableLayout. To fill the width of the screen, define that in the TableLayout with fill_parent.
If what you want is a TextView taking all the space left by the EditText placed to the right, a RelativeLayout would do the work
<RelativeLayout>
<EditText
android:id="#+id/gameprice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textCapCharacters"
android:gravity="right"
android:minWidth="120dip"/>
<TextView
android:id="#+id/text_price"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textCapCharacters"
android:padding="2dip"
android:text="#string/game_price"
android:layout_toLeftOf="#id/gameprice"/>
</RelativeLayout>
You'll need to play with the placement of the EditText, the TextView will stick to its left.