How to align a TextView to the right of another TextView which breaks to the next line?

Question

The problem I am having is aligning the second TextView to the right of the TextView which spans to two lines.

I am using a RelativeLayout, but when I use layout_toRightOf it appears at the top of the screen, and when I add layout_alignRight it disappears.

I am very confused how this works. You would assume that it would follow where the first TextView ends, but it does not. Oh, and I am using wrap_content on width and height incase anyone thinks that's the problem. Thanks in advance.

XML

<TextView 
            android:id="@+id/edit_event_name_show"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18dp"
            android:textStyle="bold"
            android:layout_marginBottom="5dp"
            android:scrollHorizontally="false"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true" />
        <TextView 
            android:id="@+id/show_event_type"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10dp"
            android:scrollHorizontally="false"
            android:layout_toRightOf="@+id/edit_event_name_show"
            android:layout_alignBaseline="@+id/edit_event_name_show" />

EDIT: To anyone that ever has a similar issue with trying to align things nicely with TextViews, there is not a way by default. But you can use SpannableString and build them using SpannableStringBuilder.

Please include the code that you are using and a screenshot if it will help. — Sam, Jul 18 '12 at 23:04
I did, I shouldn't need to include every case I have tried. But if you think its necessary I will post the xml. Also, just a heads up, if I do not include `android:layout_alignBaseline="@+id/edit_event_name_show"` it will just appear at the very top of the screen. So thats why I put it there. It worked for my Buttons, — Andy, Jul 18 '12 at 23:06
"I shouldn't need to include every case I have tried." You are correct, I only wanted an idea of what you were doing. Often a code sample expresses an idea better than words. What you included is great. — Sam, Jul 18 '12 at 23:19

Sam · Answer 1 · 2012-07-19T00:25:09.390

3

Using Spannables

I had left the conversation to fiddle with Spannables and created this:

public class Example extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textView = new TextView(this);
        textView.setTextSize(18);

        String first = "A sentence that contains enough balderdash, blather and babble to wrap at least once.";
        String second = " (Normal)";

        Spannable span = new SpannableString(first + second);
        span.setSpan(new StyleSpan(Typeface.BOLD), 0, first.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        span.setSpan(new RelativeSizeSpan(0.7f), first.length(), span.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        textView.setText(span);
        setContentView(textView);
    }
}

But prolink007 has already given you a generic link... Oh well. I'm posting it anyway.

edited Jul 19 '12 at 00:25

answered Jul 18 '12 at 23:16

Sam

86,580
20
181
179

Interesting approach. Let me try it. – Andy Jul 18 '12 at 23:17
If you expect one of these to not wrap around, ie both are one word text, then this will look a little goofy. – Sam Jul 18 '12 at 23:20
I will post an image of what I get when I do what you said. It doesn't look as expected. But thanks for the time :) – Andy Jul 18 '12 at 23:22
1

There are lots of other ways to do this. The trouble is I'm not sure what look you expect... – Sam Jul 18 '12 at 23:30
For the smaller TextView to be right next to the Bigger TextView, but next to it on the second line. – Andy Jul 18 '12 at 23:32
Sorry if I wasn't clear on that. I would just make it a single string, except I want the text sizes to be different. – Andy Jul 18 '12 at 23:39
I decided to use `AbsoluteSizeSpan` since I needed the Text size difference, but this is great! I never knew this class existed. It was great to learn it. Thanks to you and @prolink007. – Andy Jul 19 '12 at 04:51

score 3 · Accepted Answer · edited May 23 '17 at 10:32

3

Third Attempt (Successful Attempt)

I believe this will help you and be much easier than the other stuff.

Try using this reference, but change font size instead of color.

Sam's answer sums up the link. (in case the link dies at some point.)

Second Attempt

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/edit_event_name_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:scrollHorizontally="false"
        android:text=" test 1     jfalksjdflkjasdfj"
        android:textSize="18dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/show_event_type"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/edit_event_name_show"
        android:layout_alignParentRight="true"
        android:scrollHorizontally="false"
        android:text="test2          adjfalsjdfla fa sdfasdf asf a"
        android:textSize="10dp" />

</RelativeLayout>

Picture:

enter image description here

First Attempt

Why not surround your TextViews with a LinearLayout. It will keep them better organized and a little cleaner.

Try this and let me know how it goes:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/edit_event_name_show"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollHorizontally="false"
            android:text="test1"
            android:textSize="18dp"
            android:textStyle="bold"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/show_event_type"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollHorizontally="false"
            android:text="test2"
            android:textSize="10dp"
            android:layout_weight="1" />
    </LinearLayout>

</RelativeLayout>

Picture:

enter image description here

With long text:

enter image description here

edited May 23 '17 at 10:32

Community

1
1

answered Jul 18 '12 at 23:20

prolink007

33,872
24
117
185

Hmm, well I originally had it like that without a RelativeLayout base Layout, but thats an interesting way to go about it. I thought the point of a RelativeLayout was to avoid doing what you just did though. And do me a favor, try it with a longer text. That doesn't really replicate my example. – Andy Jul 18 '12 at 23:24
Long text added. If this is not what you are looking for, can you clarify a little more in your original post? Thanks – prolink007 Jul 18 '12 at 23:33
See my edit at the top. I should have been clear that thats not what I wanted. Sorry! – Andy Jul 18 '12 at 23:35
That is strange... lol. One second. Let me see if i can figure out what you mean. – prolink007 Jul 18 '12 at 23:39
Haha, yea. Sorry about that. Hopefully my explanation makes sense. If not let me know. – Andy Jul 18 '12 at 23:41
Is that more along the lines of what you are talking about? – prolink007 Jul 18 '12 at 23:45
Closer, but not there. Imagine not moving the secondTextViews position but the first one is longer and breaks to the next line. I want the second smaller TextView to be to the right of it in that manner. I'd provide an image if I could find one, but havent been able to. Like in my example image issue above, take that smaller text and stick it on the second line of the first TextView. Reason why I can't concatenate the strings together is because I need the text size difference – Andy Jul 18 '12 at 23:49
You may need to draw a picture. However, i believe i understand what you are saying. I believe that is not possible. To make it possible you will need to create your own `View` probably. Because the `TextView`, by design (i believe), will take up the entire width of the new line. So, you cant really put a new `View` there. You would have to draw it manually there or something and that sounds extremely painful. – prolink007 Jul 18 '12 at 23:53
Damn! No wonder I couldn't find anything on that. Thanks for trying and you basically answered my question, even though its not what I was hoping for lol. Could you just add that at the top for others who have the similar thought. – Andy Jul 18 '12 at 23:55
Try this: http://stackoverflow.com/questions/8405661/is-it-possible-to-change-the-text-color-in-a-string-to-multiple-colors-in-java/8405694#8405694 I posted it in my answer too, just do font size instead of color. Hopefully that will help, ill check back a little later. – prolink007 Jul 18 '12 at 23:55

score -1 · Answer 3 · edited Dec 18 '15 at 05:41

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/news_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:singleLine="true"
        android:ellipsize="end"
        android:textSize="30sp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        android:textStyle="bold"
        android:text="hiangdnfaljiadnk" />

    <TextView
        android:id="@+id/news_summary"
        android:paddingTop="5dp"
        android:layout_below="@id/news_title"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"             android:text="hiangdnfaljiadnkfjfaingaldnfasidognkahiangdnfaljiadnkfjfaingaldnfasidognkahiangdnfaljiadnkfjfaingaldnfasidognka"
    />

    <TextView
        android:id="@+id/news_from"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:layout_below="@id/news_summary"
        android:layout_alignParentLeft="true"
        android:textSize="20sp"
        android:text="1111111" />

    <TextView
        android:id="@+id/news_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="10dp"
        android:layout_below="@id/news_summary"
        android:layout_alignParentRight="true"
        android:textSize="20sp"
        android:text="3333333" />

</RelativeLayout>

you should add some description to your answer for better understanding — Sushil Sharma, Dec 18 '15 at 05:03

How to align a TextView to the right of another TextView which breaks to the next line?

3 Answers3

Linked