Align overlapping text in TextViews - android

I want two TextViews to overlap such that individual letters will overlap perfectly (i.e. you can't even see there is another TextView on the screen). Here is the relevant part of my layout:
<com.testing.android.animals.OutlinedTextView
android:id="#+id/label_left_name"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Elephant"
android:layout_alignTop="#id/picture_left"
android:layout_centerHorizontal="true"
android:textColor="#ffffff"
android:textSize="40dp"
android:background="#99000000"
></com.testing.android.animals.OutlinedTextView>
<com.testing.android.animals.OutlinedTextView
android:id="#+id/label_left_letter"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="E"
android:layout_alignBaseline="#id/label_left_name"
android:layout_alignLeft="#id/label_left_name"
android:textColor="#ffffff"
android:textSize="40dp"
android:background="#99ffffff"
></com.testing.android.animals.OutlinedTextView>
When rendered, it looks like this:
Notice the individual "E" (in light gray) is aligned too high.
What can I change in the layout that will get them to overlap better?

The issue is that the p makes the bottom of the full word textview taller. and since you have wrap_content as the height, the two heights of the textviews are different.
If you set the height of each textview to a specific size (the same size), they should align.
But in general, i think your approach might be wrong - you may want to either look into spannable strings for formatting or, since it appears you are using a custom control anyway, have it do the formatting of the first letter. (here is an example of spannable strings: http://www.chrisumbel.com/article/android_textview_rich_text_spannablestring )

Related

Max lines with height set as wrap_content

I have two TextViews in a vertical LinearLayout, one serves as a display for a book's title and the latter as a display for the book's author(s).
I need the first to have wrap_content as its height, so it takes a good part of the linear layout. However, I want it to cap out at three lines max, so that there is still some space left for the second text view;
and I need the latter to fill the remaining space (0dp and layout_weight=0dp).
I want to use specific configuration so that the author view will be always right after the title view (on its bottom).
Something like this, however the max_lines do not kick in.
I tried to set max_lines to 3 and wrap_content for the first view height, but it seem that max_lines is ignored if height is set to wrap_content.
I also tried to circumvent the problem by sort of cheating and adding a max_height, but then the two views may be spaced apart from one another.
At last I tried to convert the linear layout to a constraint layout, to see if I could access some other layout settings to no avail.
Any help?
It seems to be working fine on my side with android:max_lines="3" even with wrap_content
This is just a test layout I created
<TextView
android:id="#+id/textview1"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:maxLines="3"
android:textSize="#dimen/_13sdp"
android:textStyle="bold"
android:text="Very Very Very Very Very Very Very Very Very Very Very Very Long Text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Very Very Short Text "
app:layout_constraintStart_toStartOf="#+id/textview1"
app:layout_constraintTop_toBottomOf="#+id/textview1" />
Screenshot ->
Hope this helps! :)
Replacing app:max_lines with android:max_lines seems to have fixed the issue.

Android: Cut off to long multiline text in TextView

I have a TextView with a height depending on previous content, but there might be a long Text in it. How can I cut it off at the right point and concatenate three dots or something similar to the new end?
Currently it looks like this:
I found some solutions for Single Line Text, but how does it work with more than one line? I also do not know the number of lines, because this depends on the screen size.
Are there other typical ways on Android to show that the text can be extended? E.g. a colour gradient in the last line?
Edit:
When I do it without a fixed heigth, I have to make the height depend on the element above and my XML will look like this:
<TextView
android:id="#+id/podcastShortDesc"
android:text="Long text"
android:layout_below="#+id/podcastTitle"
android:layout_toRightOf="#+id/podcastLogo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="3"
android:ellipsize="end"
android:layout_above="#+id/podcastMoreAction" />
When I do specify maxLines I can have luck an it will work:
But if the title is too big, it does not work:
You should add following code for "3 dots" at the end.
android:ellipsize="end"
You should remove fixed height property
android:layout_height="50dip"
instead you should add number of lines
android:maxLines="4"
android:layout_height="wrap_content"
Android will take care everything else. In this way, even if text is smaller than 4 lines, android will take care size. If it is more than 4 lines, it will add "3 dots" :) Specify fixed height may cut your text.
Try this. Hope it will work.
<TextView
android:id="#+id/podcastShortDesc"
android:text="LONG LONG LONG TEXT"
android:layout_width="match_parent"
android:layout_height="50dip"
android:maxHeight="50dp"
android:ellipsize="end"/>
I have tested 50dp can show two line in normal font size. So in 50dp height you should add maxLines 2.
Try this fix layout_height and add scroll in your textview
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="50dip"
android:text="Hello......"
android:scrollbars="vertical"/>

Vertically aligning suffix with tab space in android TextView

I have rows (of horizontal LinearLayout) with a TextView at the end that displays time. An this is how it looks:
Now I need the suffix (am/pm) in all rows to be aligned vertically. This is not the case in the above layout, as you can see, the last row is misaligned as the displayed time is longer.
I achieved this using the tab character \u0009. This means I would set the text to be for example "7:21\u0009\u0009pm". This produces desired result as show below:
However, I need to know if (1) this is the most efficient way and (2) that this would work on all android devices. If there is an alternative way to achieve this please let me know.
And here is an XML layout of a row for your reference:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/prayer_time_row_height"
android:layout_marginLeft="48dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<com.devspark.robototextview.widget.RobotoTextView
style="#style/text_subhead"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Today"
android:textColor="#color/material_light_secondary_text"
android:visibility="invisible" />
<com.devspark.robototextview.widget.RobotoTextView
style="#style/text_subhead"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Event"
android:textColor="#color/material_light_primary_text" />
<com.devspark.robototextview.widget.RobotoTextView
style="#style/text_subhead"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="12:06\u0009\u0009am"
android:textColor="#color/material_light_primary_text" />
</LinearLayout>
BONUS
Bonus points for pointing out a way to vertically align the hour-minute separator, i.e., colon character.
Maybe using tabs is the most efficient, but the gap is pretty big and not configurable. If you need all those rows in a single view group, you may try to check out RelativeLayout: align am/pm vertically on common left, and put hours to the left and on the baseline. This is the most flexible way, since you can control relative positions and margins, but computation-wise it's less efficient because it requires extra calculation upon laying out elements.
As per aligning colons — in most fonts (not just monospace) digits are designed to take equal space, so just align the numbers on the right (e.g. in relative layout) and it should do.
For the colon character, you could try using the character "\uee01" instead of ":". This is what google does with the clock in the lock screen.
https://github.com/android/platform_frameworks_base/blob/master/packages/Keyguard/src/com/android/keyguard/KeyguardStatusView.java#L247
You can use a 2-column TableLayout. The first column is the time without AM/PM and the second column is just the AM/PM. Set the gravity of the first column to "end" or "right" and the times will be lined up at the colons if you are using a fixed width font.

Background of TextView with multiple lines not wrapping correctly

Background:
I've got a layout that consists of 6 items layed out as a grid (2x3). All items are as wide as half the screen (minus a little margin on each side). Each item is a RelativeLayout that contains an ImageView (the background) and a TextView (the label). The label is set to wrap the text, and it's allowed to grow almost as wide as the image it sits on top of. After that it will break into two lines.
Problem:
Everything looks good as long as the text fits on a single line (see top element in picture). The background wraps the text nicely. However, when the text is displayed on two lines the background gets too wide (see bottom item in picture). It fills up the maximum allowed width even though the text on the first line doesn't take up that much space. Is there a way to make the background wrap the text in the same way as it does when only one line is used?
Picture:
Layout XML:
<ImageView
android:id="#+id/item_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" />
<!-- some stuff I had to remove... -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingBottom="11.33333dp">
<!-- some other stuff I had to remove... -->
<!-- the gray background color is set to the TextView below programmatically together with the text itself. -->
<TextView
android:id="#+id/item_text_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5.33333dp"
android:paddingLeft="7.33333dp"
android:paddingRight="20dp"
android:paddingTop="1dp"
android:paddingBottom="5.33333dp"
android:layout_alignParentRight="true"
android:gravity="right" />
</RelativeLayout>
</RelativeLayout>
One of the possibility of such problem is textSize.
It depends on how you are setting and which measuring unit you are using to set textSize of your TextView.
dp,sp,pt and in may cause to create such problems.
So try to go with mm or px specifically.
And as per my testing px will give you the best result.
EDITED :
Add following attribute to your TextView in layout file.
android:gravity="right|start"
Instead of :
android:gravity="right"
Thanks.

How can I make button text extend outside 9 patch content area?

I have a row of buttons with custom 9 patch images, and variable length text. I would like the buttons to be the same height. When the text is long enough to wrap, it expands the button size, making the button with wrapped text bigger than the others. I'm laying these buttons out in code in linear layouts. I can fix the size of the button, but then it just cuts off the bottom. How can I make the text take up more of the padding space of the button, so that the text butts up against the top line of the button?
9patch content area is just used to set a padding. If you change the button's padding you will override the one set by the 9patch.
edit
try something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:text="ButtonButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="0dp"
android:paddingBottom="10dp"/>
<Button android:layout_width="wrap_content" android:text="Button"
android:layout_height="match_parent"/>
<Button android:layout_width="wrap_content" android:text="Button"
android:layout_height="match_parent"/>
</LinearLayout>
this way the button will be as high as the others. Sadly, I don't know if it depends on the original button's 9patch that might have asymmetrical paddings, but I can't make the text align with that from other buttons (I think gravity is by default set to center). Maybe with your 9patch it works though. (EDIT: oh, but if you'll have two lines of text who cares about alignment)
Ultimately I was unable to find a nice way of doing this without creating a custom view class.

Categories

Resources