Long Android TextView pushes other views off-screen

Question

I've got two TextViews side-by-side. TextView1 has a varying length of text, and TextView2 always says "+#". When TextView1 gets long however, it pushes TextView2 off screen. Any ideas how to fix this? Here's my layout code:

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

        <TextView
            android:id="@+id/TextView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:ellipsize="end"
            android:textSize="13sp"/>

        <TextView
            android:id="@+id/TextView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:textSize="13sp"/>

    </RelativeLayout>

Answer 1

This is actually something I've tried to solve for a while now. Unfortunately, the method others have suggested - using layout_weight inside LinearLayout - doesn't actually work; however, I've found a solution for you!

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left">

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/TextView2"
        android:singleLine="true"
        android:ellipsize="end"
        android:textSize="13sp"/>

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:singleLine="true"
        android:textSize="13sp"/>
</RelativeLayout>

With the above block, we use a RelativeLayout in order to align the first TextView to the left of the second TextView. We also align the second TextView to the right side of the parent ViewGroup. Finally, we add android:gravity="left" to the parent ViewGroup in order to align all of the TextView's to the left.

This results in both TextView's being side by side - regardless of the first TextView's length. If you would like the first TextView to have multiple lines, simply remove the android:ellipsize="end" tag.

Hopefully this is your expected outcome!

Answer 2

Use LinearLayout with weight attributs on child views

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

        <TextView
            android:id="@+id/TextView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:ellipsize="end"
            android:textSize="13sp"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/TextView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:textSize="13sp"
            android:layout_weight="0"/>

    </LinearLayout>

Answer 3

This problem could be solved using android.support.constraint.ConstraintLayout

Here are screenshots, so you can see how it behaves with small and long text.

Here is XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="15dp">

    <ScrollView
        android:id="@+id/scrollView"
        android:background="@drawable/white_rounded_rectangle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:scrollbars="none">

        <TextView
            android:id="@+id/messageTv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif"
            android:lineSpacingExtra="6sp"
            android:paddingTop="15dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingBottom="70dp"
            android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever PageMaker including versions of Lorem Ipsum."
            android:textColor="#252525"
            android:textIsSelectable="true"
            android:textSize="@dimen/text_size16"
            />
    </ScrollView>


    <android.support.constraint.ConstraintLayout
        android:id="@+id/bottomLayout"
        android:layout_width="match_parent"
        android:layout_height="84dp"
        android:background="@drawable/white_rounded_rectangle"
        app:layout_constraintBottom_toBottomOf="@+id/scrollView"
        app:layout_constraintEnd_toEndOf="@+id/scrollView"
        app:layout_constraintStart_toStartOf="@+id/scrollView">

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btnAction1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="19dp"
            android:layout_weight="1"
            android:text="Action 1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btnAction2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="17dp"
            android:layout_marginBottom="16dp"
            android:text="Action 2"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/btnAction1" />
    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

Answer 4

Give your TextView weight 1 and make its width/height "0dp"

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

    <TextView
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:text="@string/random_string" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>