Android two Textview with “wrapcontent” in single line

Question

I am unable to get a seemingly easy layout configuration right !!

I have two textview in a Relative (tried Linear with orientation horizontal) both "wrapcontent" - I want them one beside other. Something like:

1. First Text || Second Text [ this is of smaller text size ]

   (For Small Title works good)

When the first text is long - longer than what can be displayed in one line then the first text goes to second line and the second Textview disappears (goes to deep right). Something like below:

2.For long Title - observe the count disappears to right

          <RelativeLayout
                android:orientation="horizontal"
                android:id="@+id/feedHeader"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical">

                <TextView
                    android:id="@+id/textView1"
                    style="@style/BoldTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="0dp"
                    android:layout_alignParentLeft="true"
                    android:layout_marginTop="5dp"
                    android:paddingBottom="0dp"
                    android:text="Title Loooooooggggggg Title Looong"
                    android:textAppearance="?android:attr/textAppearanceMedium" />

                <TextView
                    android:id="@+id/pageCounts"
                    style="@style/WayBoardCount"
                    android:layout_width="wrap_content"
                    android:minWidth="50dp"
                    android:layout_height="wrap_content"
                    android:layout_alignBaseline="@id/textView1"
                    android:layout_toRightOf="@id/textView1"
                    android:checked="false"
                    android:gravity="left|center_vertical"
                    android:text="3/5"
                    android:textAppearance="?android:attr/textAppearanceSmall" />
            </RelativeLayout>

I want small text (count) to be beside "Looong" and not disappear on the right

1. Tried "Min Size for the second textview"
2. Linear Layout with Horizontal Orientation

EDIT: Some Solutions/Answers given in this thread that still doesn't address my problem (For the benefit of someone else I have my output below):

Alexander :

Answer 1

You can try with

    <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="horizontal"
   android:weightSum="1" >
<TextView
     android:id="@+id/textView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:gravity="center"
    android:text="Title Loooooooggggggg Title Looong"
    android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
    android:id="@+id/pageCounts"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:gravity="center"
    android:text="3/5"
    android:textAppearance="?android:attr/textAppearanceSmall"" />
 </LinearLayout>

Note

You cant showing in single line if Text is too Large . On that time you can use android:ellipsize

android:ellipsize="end"

Answer 2

I understood your problem. So you can use spannable . Useful link about metrics . Hope it helps tutorial

Simple cod:

private void updateText(TextView textView, String bigText, String smallText) {
    SpannableString spannableString = new SpannableString(bigText + smallText);
    spannableString.setSpan(new RelativeSizeSpan(1.4f), 0, bigText.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    spannableString.setSpan(new RelativeSizeSpan(1.0f), bigText.length(), spannableString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    textView.setText(spannableString);
}

Answer 3

Just do like this

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:text="VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongText"
      android:layout_weight="1"/>

  <TextView
      android:layout_width="match_parent"
      android:gravity="start|bottom"
      android:layout_height="5dp"
      android:textSize="5sp"
      android:textAppearance="?android:attr/textAppearanceSmall"
      android:text="SmallText"
      android:layout_weight="1"/>

</LinearLayout>

Answer 4

You can also do the same with RelativeLayout , following is a dummy code

         <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/feedHeader"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <TextView
                 android:id="@+id/pageCounts"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignParentRight="true"
                 android:layout_centerInParent="true"
                 android:checked="false"
                 android:text="3/5"
                 android:textAppearance="?android:attr/textAppearanceSmall" />

            <TextView
                 android:id="@+id/textView1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignParentLeft="true"
                 android:layout_marginBottom="0dp"
                 android:layout_marginTop="5dp"
                 android:layout_toLeftOf="@+id/textView2"
                 android:paddingBottom="0dp"
                 android:text="Title Loooooooggggggg Title Looong Loong"
                 android:textAppearance="?android:attr/textAppearanceMedium" />

         </RelativeLayout>

Answer 5

Apparently I was looking for "Span-able String" !!

Details here: Different font size of strings in the same TextView