Place 2 Textview Beside Each Other with 2Nd Textview Always Visible

Place 2 textview beside each other with 2nd textview always visible

1 way Try this Using ConstraintLayout

<?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">

    <TextView
        android:id="@+id/longTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:text=" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel consectetur tortor. Fusce velit velit, tincidunt vitae dolor at, pharetra condimentum nunc. Etiam ac erat ac nulla tempus ullamcorper id ac sapien."
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/shortTextView"
        />

    <TextView
        android:id="@+id/shortTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="21%"
        android:textColor="@color/colorAccent"
        app:layout_constraintBaseline_toBaselineOf="@+id/longTextView"
        app:layout_constraintLeft_toRightOf="@+id/longTextView"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

OUTPUT using ConstraintLayout

When Long Text

When Small Text

2 way using FlexboxLayout

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout
    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">

    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        app:layout_alignSelf="flex_start"
        android:ellipsize="end"
        android:maxLines="1"
        android:layout_height="wrap_content"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel consectetur tortor. Fusce velit velit, tincidunt vitae dolor at, pharetra condimentum nunc. Etiam ac erat ac nulla tempus ullamcorper id ac sapien."
        />

    <TextView
        android:id="@+id/textview2"
        android:text="21%"
        android:layout_width="wrap_content"
        android:minWidth="60dp"
        android:textColor="@color/colorAccent"
        app:layout_alignSelf="flex_start"
        android:layout_height="wrap_content"
        />

</com.google.android.flexbox.FlexboxLayout>

OUTPUT Using FlexboxLayout

When Long Text

When Small Text

Two TextViews behind each other, ellipsize only the first, second one always visible

Does it have to be a LinearLayout?
If not:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="left"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview1"
        android:text="This is a very very long string that eventually will get out of screen; yes, it is that long!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/textview2"
        android:layout_toStartOf="@id/textview2"/>

    <TextView
        android:id="@+id/textview2"
        android:text="Hello! I'm short!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

Put two textviews side by side in a layout

Wrap the two TextViews in a LinearLayout. Assign a layout weight of 0 to textview2 and a layout weight of 1 to textview2.

See here for more info: Linear Layout Weight

If you play with the example below you'll see that the LinearLayout first allocates space to textview2 (with weight 0) and then allocates whatever remains to textview1 (with weight 1). If there is insufficient space to accommodate both TextViews, textview1 will be ellipsized first. In the example below textview2 will only ever become ellipsized if the LinearLayout is smaller than the size of textview2 itself. Assign a specific layout width to the FrameLayout and see what happens.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="match_parent" 
    android:background="#FF0000FF">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FFFF0000"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="textview1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:background="#FF00FF00"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="textview2" />
    </LinearLayout>

</FrameLayout>

Two TextViews always on Screen

What finally worked for me was to set the maxWidth for the first View.

I set the maxWidth in the dimens xml and overridded the value for multiple screen sizes. It was difficult testing it out on multiple screens, but that's what finally worked for me.

android:maxWidth="@dimen/max_width"

How to put text view in the center of the layout if second Textview visibility is gone?

Place the two TextViews in a horizontal chain with the chain style set to spread_inside. Now, when the right TextView is set to gone, the left TextView assumes the right constraint of the right TextView with a new margin set to 16dp (app:layout_goneMarginEnd="16dp" ).

See Margins when connected to a GONE widget.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="TextView1"
        app:layout_constraintEnd_toStartOf="@+id/TextView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_goneMarginEnd="16dp" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="TextView2"
        app:layout="@id/TextView1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/TextView1"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Move two side by side textviews to be one under another if text is too long

I have found a better solution. Changed my textviews into autoresizable textviews (more info here)

Also, each textview is in a separate layout, to make sure both textviews are resized to the same value.
My xml looks like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:id="@+id/value_linear_layout"
              android:gravity="center">

    <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content">
        <com.mihaela.view.AutoResizeTextView
            android:id="@+id/my_text_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

    <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content">

        <com.mihaela.view.AutoResizeTextView
            android:id="@+id/my_text_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</LinearLayout>

and I have implemented the OnTextResizeListener from AutoResizeTextView to do this:

public class TextWidthResizeListener implements OnTextResizeListener {

    @Override
    public void onTextResize(TextView textView, float oldSize, float newSize) {
        TextPaint paint = textView.getPaint();
        if (paint.measureText(textView.getText().toString()) > (valueLinearLayout.getWidth() / 2)){
            valueLinearLayout.setOrientation(LinearLayout.VERTICAL);
        }
    }
}

where valueLinearLayout is:

valueLinearLayout = (LinearLayout)findViewById(R.id.value_linear_layout);

This solution best fits for me, as the textviews are dimensioned when they are side by side until a minimum size. When the minimum size is reached, and the text still does not fit, the textviews will be aligned one under another.

Also, this idea with the listener can be applied to non-resizable textviews also.
I will set this answer as the correct one.

Two horizontal TextViews with dynamic width of first TextView using XML

<TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="0">

        <TableRow>
            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                android:paddingStart="10dp"
                tools:text="abcdeabcdeabcdeabcdeabcdeabcdeabcde" />

            <TextView
                android:id="@+id/tvCount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingStart="10dp"
                android:paddingEnd="10dp"
                android:maxLines="1"
                tools:text="(1001)" />
        </TableRow>

    </TableLayout>

---

Related Topics