In my application, I have one text view, the text view length is 30, if the device space not enough then it will go to the next line. But in my case, if the space available also, it goes to the next line. In XML, it is showing well.
but when I run the real device, the text comes to the second and third lines also, but space is the available right side.
This is the text view I am using
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:textSize="#dimen/normal_font_size_newuser_final"
android:text="#string/useridset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:scrollHorizontally="false"
android:textSize="#dimen/normal_font_size_newuser_final"
android:id="#+id/userid_new_final"
android:layout_marginLeft="5dp"
android:text="venkataramanajagu1234567890_12 is setup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Here how to utilize the right side space.So please guide me on how to achieve this, Any properties for text view
Thanks In Advance
Try changing as below:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
Also try changing layout_width to "match parent" for TextViews
Related
This question has been asked many times but never got a correct answer.
How can I build up a layout (that is similar to the most common messaging apps like Whatsapp, Telegram) with following characteristics:
It has a view that acts as container and has a background with a image of a bubble.
In the container there are two elements, a text message and the text date.
The text message start from top left and can have multiple lines.
The text date is aligned to the baseline of the last text message line, and on the right of it.
I've tried to reach it with relative layout.
<RelativeLayout android:id="#+id/message_bubble_container"
android:layout_below="#+id/message_date_separator_container"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="#drawable/chat_message_background"
android:padding="4dp">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView
style="#style/TextAppearance.AppCompat.Medium"
android:id="#+id/message_text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
tools:text="This is a message long that causes the date to leave the screen!" />
<TextView
style="#style/TextAppearance.AppCompat.Small"
android:id="#+id/message_time"
android:layout_alignBottom="#id/message_text"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/message_text"
android:textColor="#color/material_grey_900"
android:textSize="12sp"
tools:text="18:58"
android:paddingLeft="4dp"/>
</RelativeLayout>
</RelativeLayout>
It works good when the text message is on one single line, but when it grows to fill the width of the container, it pushes out the date from the screen. How can I avoid this behavior and make the text message keep a margin on the right for the date?
If this was CSS I was just needed to add a margin-right: 40px; to the .message_text. Of course this is Android and not CSS so...
Moreover, I dislike to use a maxWidth on the #id/message_text because I don't know how many dp will the screen be.
Lastly, I've heard some talking about FlowLayout. Is there a way?
Thanks to anyone will try to solve this problem that affects anyone that is tring to develop a chat layout.
Use Linear layout with vertical orientation instead of Relative layout. Something like this:
<LinearLayout android:id="#+id/message_bubble_container"
android:layout_below="#+id/message_date_separator_container"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:background="#drawable/chat_message_background"
android:padding="4dp">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical">
<TextView
style="#style/TextAppearance.AppCompat.Medium"
android:id="#+id/message_text"
android:gravity="right"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
tools:text="This is a message long that causes the date to leave the screen!" />
<TextView
style="#style/TextAppearance.AppCompat.Small"
android:id="#+id/message_time"
android:layout_alignBottom="#id/message_text"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/message_text"
android:textColor="#color/material_grey_900"
android:textSize="12sp"
tools:text="18:58"
android:paddingLeft="4dp"/>
</LinearLayout>
</LinearLayout>
Try, and let me know f it worked. :)
take that date text view out of inner relative layout and keep that in parent relative layout with alignparentbottom true and align parentright true
Happy coding
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 a textbox with a hint but I want the hint to always be shown, even when there is an input in the TB. Example is the "To" field in the Gmail app.
There are 3 approaches you could use (spoiler - use number 3), since as mentioned in my comment, in the Gmail example , it is not an actual hint:
Using a Linear Layout, getting a cleaner look in my opinion:
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:text="#string/Hint"
android:layout_margin="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText android:layout_width="fill_parent"
android:inputType="text"
android:layout_height="wrap_content"/>
</LinearLayout>
Using a Relative Layout, getting a result that mimics the Gmail App:
Note: might be problematic since the text will be displayed on top of the hint, see solution 3.
<RelativeLayout android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:text="#string/Hint"
android:paddingLeft="10dp"
android:layout_marginBottom="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText android:layout_width="fill_parent"
android:inputType="text"
android:layout_height="wrap_content"/>
Result are as shown in this image:
Edit:
using a Drawable:
This seems a better solution (I personally just created it from snipping the 1:1 display of the TextView, will be in correct measurements this way), this will allow a cleaner layout code, and the text will be aware of the drawable:
<RelativeLayout android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<EditText android:layout_width="fill_parent"
android:inputType="text"
android:gravity="top"
android:drawableLeft="#drawable/Hint"
android:layout_height="wrap_content"/>
The first thing that came to mind is to insert two editText layout relative layout.
First over second.at the top of that - put background as
android.R.color.transparent
Work with top elevent of relative layout! In item below - set hint(that you want) and try to put text. May be you will have specify padding of first element of top to greate display.
Oh. And one more thing.
Maybe put to editText background background image - but is the bad to scalability.
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: