I have a GridLayout with a ColumnWeight set to expand the middle column. this column has text on it, so the purpose of the weight is to make it expand as much as it wants to fit the text.
But if the text is too big, I would like it to add ellipses to the text and preserve the last column on the edge of the screen.
The behavior I am getting is that the last column is pushed out of the screen and the middle column grows as much as it wants....How can I prevent this?
Here's a sample code on how to replicate this issue:
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:clipChildren="false"
app:columnCount="3"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp"
app:rowCount="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="- Start Text -"
android:id="#+id/textView"
app:layout_row="0"
app:layout_column="0"
app:layout_gravity="left"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Test Test Test Test Test Test Test Test Test Test Test Test Test "
android:id="#+id/textView2"
app:layout_column="1"
app:layout_row="0"
app:layout_columnWeight="1"
android:maxLines="1"
android:ellipsize="end"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="- End Text -"
android:id="#+id/textView3"
app:layout_column="2"
app:layout_row="0"
app:layout_gravity="right"/>
</android.support.v7.widget.GridLayout>
A curious thing to note is that if I add an android:maxEms="5" to the middle TextView, it works as expected, does anyone knows why? I don't want to add something like an android:maxEms="5" because this will limit the length of the text, instead I want it to occupy all available space left on the screen (and if I use android:maxEms="5" the 5 will have to be choosen for a specific minimum screen size).
Related
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>
In the Image attached below, the red box represents the linear layout.
In each linear layout I have 2 children text views to display details. Text on the text views are getting filled from JSON data fetched from google books api.
What I am finding difficult is how to maintain space between both the text views according to different text length.
Like in the 5th list item "Fundamental Of Java..." can be extended more as there is many space left.
In the 1st item item Both Title and Author name is really long so both should be displayed equally (50-50)%
And in the 3rd list item "Pearson Education..." can be extended more as there is more blank space before it.
So How to can determine/Distribute space in layout which fits each situations.
Code Of Linear Layout:
<LinearLayout
android:id="#+id/header_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_toRightOf="#+id/image">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dp"
android:layout_weight="2.5"
android:ellipsize="end"
android:maxLines="1"
android:text="Java Programming is really long text right not"
android:textColor="#ffffff"
android:textSize="16sp"></TextView>
<TextView
android:id="#+id/publisher"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_weight="1"
android:ellipsize="end"
android:gravity="end"
android:maxLines="1"
android:text="John Wiley and its going long & Sons"
android:textColor="#ffffff"
android:textSize="10sp"></TextView>
</LinearLayout>
Try experimenting using RelativeLayout on your xml but you have to give priority on which textView that will consume most of the space - either of the two ( title or the publisher) then add a autoSizeTextType on your textView.
You can also use ConstraintLayout but you have to limit the number of items to be displayed in your recyclerview, or create a function that detects if the particular string consist of "n" characters long then adjust a padding or margin.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/publisher"
android:autoSizeTextType="uniform"
android:ellipsize="end"
android:maxLines="1"
android:text="Java Programming is really long text right not Java"
android:textColor="#ffffff"
android:textSize="16sp" />
<TextView
android:id="#+id/publisher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:autoSizeTextType="uniform"
android:ellipsize="end"
android:gravity="end"
android:maxLines="1"
android:text="John Wiley & Sons sdafsdfsfsdf"
android:textColor="#ffffff"
android:textSize="16sp" />
</RelativeLayout>
I want to have a list of input fields with labels to their left for an edit screen. At the bottom there needs to be a set of buttons, which should be aligned centrally.
The labels can have different widths depending on the language, so the EditText views need to span across the remaining space. I am using a grid layout, because I need to have all EditText views aligned to a vertical line at their left.
I have spent half a day now to solve this, but I fail to make progress. The closest I could get to is this:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_column="0"
android:layout_row="0"
android:text="Label 1234545"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvHeightLabel"/>
<EditText
android:layout_column="1"
android:layout_row="0"
android:text="Some text which is too long that it could fit in one single row"
android:layout_gravity="fill_horizontal"
android:inputType="numberDecimal"
android:ellipsize="end"
android:id="#+id/etHeight"
android:layout_width="259dp"/>
<TextView
android:layout_column="0"
android:layout_row="1"
android:text="Label 2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvHeightLabel2"/>
<EditText
android:layout_column="1"
android:layout_row="1"
android:text="Some text which is too long that it could fit in one single row"
android:layout_gravity="fill_horizontal"
android:inputType="numberDecimal"
android:ellipsize="end"
android:id="#+id/etHeight2"
android:layout_width="259dp"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_row="3"
android:layout_column="0"
android:layout_columnSpan="2">
<Button
style="?android:attr/buttonBarButtonStyle"
android:text="Button 1"
android:layout_height="wrap_content"
android:id="#+id/btCancel"
android:layout_weight="1"
android:layout_width="wrap_content"/>
<Button
style="?android:attr/buttonBarButtonStyle"
android:text="Button 2"
android:layout_height="wrap_content"
android:id="#+id/btSave"
android:layout_weight="1"
android:layout_width="wrap_content"/>
</LinearLayout>
</GridLayout>
This layout looks like this:
It seems to work first, but when the labels exceed a certain size, the EditText view elements grow out of the screen to the right:
I don't even get why the above solution works for labels, which just grow slightly. The width of the EditText elements is set to 259dp, which was set by Android Studio automatically. (I tried to arrange the EditText views by sizing it with the mouse on the preview on the design screen. Android Studio arranged it automatically at a certain point as given above.)
There must be some property to let a view eat up what is left independent of its content. The text could scroll, I'm ok with that. I feel like I have not understood the layout concept at all.
Use padding to restrict the flow of the text.
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());
}
});
I am trying to implementing a table layout but gap comes in between the left border and first column of the screen.
Secondly, I am not able to give required width to my spinner in first row of screen which always takes full width of screen.
I have tried with different permutations of code with stretch columns and layout_span, but they don't seem to work.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="0dp>![enter image description here][1]
<TableRow>
<TextView
android:layout_column="1"
android:text="Adult 1"
android:layout_marginBottom="5dp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
style="#style/text"/>
<Spinner
android:layout_width="20dp"
android:layout_marginLeft="2dip"
android:layout_column="2"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="5dp"
android:background="#drawable/select_spinner"
android:entries="#array/Passenger_title"/>
<EditText
android:id="#+id/First_Name"
android:layout_column="3"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="10dp"
style="#style/Edit_box_background"
android:layout_marginLeft="5dip"
android:layout_marginBottom="3dp"
android:textColor="#B3B3B3"
android:hint=" First Name "
android:textAppearance="?android:attr/textAppearanceSmallInverse"
android:padding="3dip"/>
<EditText
android:id="#+id/Last_Name"
android:layout_column="4"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="10dp"
style="#style/Edit_box_background"
android:layout_marginLeft="3dip"
android:layout_marginBottom="5dp"
android:textColor="#B3B3B3"
android:hint=" Last Name "
android:textAppearance="?android:attr/textAppearanceSmallInverse"
android:padding="3dip"/>
</TableRow>
firstly looking over your scenario I firstly recommend not to use android:layout_column="1" and layout_span unless required.By Default all items added to a TableRow would be added to right starting from first column.
And after give desired width to your Spinner.
Also one more mistake that you are making android:layout_column="0" you forgot to use it uses first column as index 0 not 1.
Hope My suggestion help you out and link you to right direction.