I have a listview in Android which is dynamically loaded. The list view holds an image and on it is shows the description of the image which should ideally take up 20% of the images' height. How do I check if my textview which is on top of the image view in my list is taking a max height of 20% of the image?
As you can see from the screenshot, "Harvey's - -check in for a chance to win a free burger
Picker, ON" is fitting in the textview in 2 lines, sometimes if my android device is small it exceeds the background (black colored) view and looks bad. I need to stop that so I decided I must truncate the string if it overflows on my textview.
How do I truncate the strings on the textview so that once that 20% of the imageview height has been reached the image description ends with "..."
The xml I have at the moment is given below. Note that com.parse.myPackage.AspectRatioImageView is just a custom view for an imageview
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFFFF" >
<com.parse.myPackage.AspectRatioImageView
android:id="#+id/campaignImageLabel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/blank" />
<FrameLayout
android:id="#+id/frameLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/frameLayout2"
android:layout_alignParentLeft="true"
android:background="#color/fadedBlack">
<TextView
android:id="#+id/campaignNameLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Loading..."
android:layout_marginLeft="10dp"
android:textColor="#color/white"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
</FrameLayout>
<FrameLayout
android:id="#+id/frameLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/campaignImageLabel"
android:layout_alignParentLeft="true"
android:background="#color/fadedBlack">
<TextView
android:id="#+id/campaignLocationLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Location Loading..."
android:textColor="#color/white"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
</FrameLayout>
Try this on your TextView
android:maxLines="2"
android:ellipsize="end"
This will truncate your text and place "..." at the end if it is longer than 2 lines
You can use :
android:ellipsize="end"
android:maxLines="1"
Change value of maxlines to check manually that what makes it 20% of your imageview's height. ellipsize will take care of the '...' termination.
Related
I'm trying to create a message layout in a chat application.
This message layout should contain:
Message Textview in a rounded rectangle
Message status check icon ImageView within that same rectangle
Message send time TextView outside the rounded rectangle and to its right.
When text is short, the whole layout should align itself to the right.
When the text is long, message TextView is going to expand itself to the left and upon touching the left side of the screen, it expands to a new row.
The problem is: Rounded rectangle stretches to the whole screen regardless of the message being short or long although underlying FrameLayout width is set to wrap_content.
Here is an image of the problem:
The layout I am using is:
<RelativeLayout
android:id="#+id/outer_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp">
<TextView
android:id="#+id/text_message_time"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:textSize="10sp"
app:showDate="#{message.postedAt}" />
<RelativeLayout
android:id="#+id/bubble_ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/text_message_time"
android:background="#drawable/rounded_rectangle_bubble_sent"
android:padding="8dp">
<ImageView
android:id="#+id/iv_check"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
android:layout_marginLeft="4dp"
app:setStatusPng="#{message.status}" />
<TextView
android:id="#+id/messagetext_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="2dp"
android:layout_toLeftOf="#id/iv_check"
android:singleLine="false"
android:text="#{message.messageText}"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
The inner RelativeLayout named bubble_ll has its width equals wrap_content.
What I am expecting is:
text_message_time TextView should be attached to the right of the screen due to its layout_alignParentEnd property set true.
bubble_ll stands left of the text_message_time view, due to its layout_toLeftOf property set. And it should have a width of its contents.
I have tried other layouts such as Linear, ConstraintLayout etc.
The LinearLayout approach did not work, since the width is set to wrap_content for TextView always overlaps status info checks and message time make them disappear when the message in the TextView is long.
With ConstraintLayout I could not align bubble to stay still on the right. It stays on the center of the screen horizontally since it is constrained on both horizontal sides of the screen.
Any help will be appreciated.
I have come up with the following layout which is a combination of RelativeLayout and LinearLayout. I hope this serves your purpose. Please change the drawables and the ids if necessary.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/outer_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="8dp">
<TextView
android:id="#+id/text_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/message_container"
android:layout_alignParentRight="true"
android:layout_margin="4dp"
android:text="10:30 am"
android:textSize="10sp" />
<LinearLayout
android:id="#+id/message_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_toLeftOf="#+id/text_message_time"
android:background="#android:color/holo_blue_dark"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/messagetext_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="1"
android:padding="4dp"
android:singleLine="false"
android:text="You have a long message here. This is so long that it takes two lines inside the TextView. No wonder, now its taking three lines and now its four. How long this message can go? I now have that question!!!"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/iv_check"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_centerVertical="true"
android:layout_margin="8dp"
android:src="#android:drawable/presence_online" />
</LinearLayout>
</RelativeLayout>
I'm trying to update the content of a TextView with the data introduced by an EditText. But after change the text, if the original text (hint) was bigger than the new text, the width doens't change.
I have the next string in the Hint Attribute of the TextView, "Please, introduce a amount". If I put 25'5, for example, the textview doesn't resize it width.
First Screen
Second Screen
The Euro symbol is invisible behind the textview, and It's shown after insert some value.
The piece of code for the Amount:
<RelativeLayout
android:id="#+id/rlImporte"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rel_layout_colors"
android:clickable="true"
android:paddingTop="8dp"
android:paddingBottom="8dp">
<ImageView
android:id="#+id/lst_img3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_margin="5sp"
android:layout_marginTop="5dp"
android:src="#drawable/icon_importe"/>
<TextView
android:id="#+id/tvImporte"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="false"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/lst_img3"
android:text="#string/IMPORTE_TITLE_STRING"
android:textColor="#android:color/black"
android:textSize="#dimen/title_text_size" />
<TextView
android:id="#+id/tvImporteDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvImporte"
android:layout_toRightOf="#+id/lst_img3"
android:textColor="#android:color/darker_gray"
android:textSize="#dimen/subtitle_text_size"
android:visibility="visible"
android:hint="#string/IMPORTE_PLACEHOLDER_STRING"
android:textColorHint="#android:color/darker_gray"
android:ellipsize="start"
android:layout_marginRight="4dp" />
<TextView
android:id="#+id/tvEuroSymbol"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tvImporte"
android:layout_toRightOf="#+id/tvImporteDesc"
android:textColor="#android:color/darker_gray"
android:textSize="#dimen/subtitle_text_size"
android:visibility="gone"
android:hint="#string/euro_symbol"
android:textColorHint="#color/blue_quantion"
android:ellipsize="start"
android:paddingLeft="4dp" />
</RelativeLayout>
You seem like you want to change the width of tvImporteDesc dynamically. The short of it is that Android does not allow this, though some people have developed work arounds. (Toggling the visibility that some answers suggest did not work for me). Similar questions:
Change Relative layout width and height dynamically
WRAP_CONTENT not working after dynamically adding views
Since you are trying to fit text on the same line it might be easier to use a single TextView for that line of text, and concatenate the euro symbol?
I have a problem regarding Textview on my battery widget.
The has a picture and on it textview showing the % the problem is that there seems to be something wrong with my code regarding the text width because it allows only 2 characters per verse so it shows for ex. 50 in the first verse and % in the second. How do i set it right? Also side question: can i somehow make the text to always be on the bottom and center? I can do it with padding but it shows differently on each screen size. So anyway here's the code regarding text EDIT: Here is entire xml file-:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageView1_widget"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="#drawable/bateria50_1" />
<TextView
android:id="#+id/textView1_widget"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1_widget"
android:singleLine="true"
android:layout_gravity="bottom|center_horizontal"
android:shadowColor="#000000"
android:shadowDx="2"
android:shadowDy="2"
android:shadowRadius="1"
android:textColor="#FFFFFF"
android:textSize="15sp"
android:textStyle="bold" />
</RelativeLayout>
For LinearLayout:
android:singleLine="true" and android:layout_gravity="bottom|center_horizontal"
For RelativeLayout:
android:layout_alignParentBottom="true" and android:layout_centerHorizontal="true"
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 have the following layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView android:id="#+id/movie_icon"
android:src="#drawable/star_off"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<TextView android:id="#+id/name"
android:textSize="16sp"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:gravity="left"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:text="aaaaa"/>
<TextView android:id="#+id/time"
android:textSize="16sp"
android:text="1:25 - 2:25"
android:layout_height="74dip"
android:layout_width="fill_parent"
android:gravity="right"
android:layout_weight="2"
android:background="#drawable/time_background"/>
</LinearLayout>
time and name TextViews have the same width, but I need to have width of time equal to the half width of name. How can I do it? Or, how to create name width fixed (for ex., 100dip)?
Try making both of their widths 0 and set weight="1" for the one you want smaller, and weight="2" for the one you want bigger. If that doesn't do it how you want, I am not sure that there is any way to do it without setting a fixed width for them like 100dip as you mentioned.