android - Coloque 2 vistas de texto una al lado de la otra con la segunda vista de texto siempre visible

android-layout textview

Question

Lo que quiero :

Cuando el texto es corto, el 21% de TextView debe estar justo al lado del primer TextView como se muestra a continuación

y cuando el texto sea largo, quiero que el primer TextView llegue al final y tenga una elipsis, y el 21% de TextView debería ser visible como a continuación

pero lo que sea que haga, el 21% de TextView desaparece y el primer TextView ocupa un espacio completo. Linear, Relative, Frame, Constraint layout, weight, minwidth muchas combinaciones con Linear, Relative, Frame, Constraint layout, weight, minwidth etc. pero nada parece funcionar.

Aqui esta mi xml

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

    <TextView
        android:id="@+id/tv_job_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:maxLines="1"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar nec justo id bibendum." />

    <TextView
        android:id="@+id/tv_matchPercent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:paddingLeft="5dp"
        android:text="21% "
        android:textColor="#4268e3"/>
</LinearLayout>

¿Alguna idea de cómo lograrlo?

Nota: no quiero codificar caracteres ni ancho

Answer 1

1 manera Prueba esto usando 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>

SALIDA utilizando ConstraintLayout

Cuando el texto largo

Cuando pequeño texto

2 vías utilizando 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>

SALIDA utilizando FlexboxLayout

Cuando el texto largo

Cuando pequeño texto

Answer 2

Una solución que usa LinearLayout , por supuesto, no es mejor que usar ContrainstLayout u otra forma. Sin embargo, espero que ayude en alguna situación.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:paddingEnd="50dp"
        android:text="Title 1111111111111111111111111111111"
        android:textSize="20sp"
        />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="-50dp"
        android:layout_weight="1"
        android:text="21%"
        android:textColor="@color/colorAccent"
        />

</LinearLayout>

Pruebas

entrada
Title 1111111111111111111111111111111
salida

entrada
Title 1111111
salida