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.

Answer 1

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:

---

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:

---

With long text: