Making 2 dynamic TextViews not overlap

Question

I have been working on an app that shows statuses about a server. I have a CardView for each server, with a RelativeView inside. On the left is an image, aligned to the cards left. In the middle, I have a TextView, aligned to the image right. On the right, I have a TextView, aligned to the right of the card.

Basically, my issue is, without using a LinearLayout, how can I make it so the middle TextView does not overlap the right TextView, preferably in the layout's XML? The text in both views is dynamically long, making a LinearLayout not very preferable.

Here is a diagram of the Layout to help you picture what I'm talking about. Sorry for the external link, it was getting reformatted in the post.

maybe define a fixed width for each `TextView` , or maybe you can refer to this : http://stackoverflow.com/questions/16017165/auto-fit-textview-for-android — Fouad Wahabi, Jun 19 '15 at 17:25
center a view horizontally and use it is the threshold for your TextViews using layout_toLeftOf and layout_toRightOf to keep the views from passing that threshold/overlapping — zgc7009, Jun 19 '15 at 17:28

Shraddha · Answer 1 · 2015-06-20T19:29:39.553

1.Aline middle TextView to centerHorizontal of parent, give fixed width , margin left and right to it. Mention that it is right of another TextView by using layout_toLeftOf. 2.Also aligh right hand side TextView to right by using alignRightToParent = true. Then give left margin to it.

I tried by using below xml code:

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="@+id/sun"
    android:background="#004700" >

    <TextView
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginRight="20dp"
        android:layout_toLeftOf="@+id/sun12"
        android:singleLine="false"
        android:text="abcdgsss ssssssssssssssss ssssssss sssssssssssssssssssssss"
        android:textColor="#fff"
        android:textSize="16sp" />

    <TextView
         android :id="@+id/sun12"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dp"
        android:text="abcdgsss ssssssssssssssss ssssssss sssssssssssssssssssssss"
        android:textColor="#fff"
        android:textSize="16sp" >
    </TextView>
</RelativeLayout>

This method makes everything centered into the view instead of where their positions should be, and messes everything up if the text in the middle text view is longer than 1 line. — cameronlund4, Jun 20 '15 at 16:50

score 0 · Accepted Answer · answered Jun 20 '15 at 17:13

I figured out how to do it programatically. Simply, you want to subtract the widths and padding of the surrounding views from the size of the container view, and set the leftover value to the text view's width. Here is an example:

    int view_length = personViewHolder.container.getWidth() - personViewHolder.container.getPaddingStart() - personViewHolder.container.getPaddingEnd();
    view_length = view_length - personViewHolder.object_to_left.getWidth() - personViewHolder.object_to_left.getPaddingStart() -personViewHolder.object_to_left.getPaddingEnd();
    view_length = view_length - personViewHolder.object_to_right.getWidth() - personViewHolder.object_to_right.getPaddingStart() - personViewHolder.object_to_right.getPaddingEnd();
    personViewHolder.view_to_set_width.getLayoutParams().width = view_length;
    personViewHolder.view_to_set_width.invalidate();

ryguy · Answer 3 · 2015-06-20T17:57:03.273

0

You can place the views in a RelativeLayout (if they are not already in one), then and use the ToStartOf or ToEndOf attributes to align one of them to the start or end of the other. You could also use ToLeftOf or ToRightOf, but this is not recommended because in some locales you want the user to read from right to left instead of left to right. This will ensure that the two views never overlap (assuming you haven't placed negative margins on either of the views). This can be extended to as many views as you want, as long as you correctly configure their alignment attributes.

edited Jun 20 '15 at 17:57

answered Jun 20 '15 at 17:50

ryguy

481
2
7

I've already been given this answer 2 times and said it wouldn't work for my application. Please don't repeat answers, especially after it was disproved. Thanks for trying to help though. – cameronlund4 Jun 20 '15 at 18:05
This answer may be similar to an answer (and a comment) you have received, but it is not the same. I am simply telling you that if you format your XML correctly, use the attributes I (and others) have mentioned, and are using a relative layout as the parent view group, you should not have views that overlap. This may mean that you have to change some other parts of your XML, but in the current way the question is phrased all we can do is point you towards something that will keep layouts from overlapping. If you want new answers maybe you should post your XML. – ryguy Jun 20 '15 at 18:25

Making 2 dynamic TextViews not overlap

3 Answers3