Place 2 textview beside each other with 2nd textview always visible
What I want :
When text is short the 21% TextView
should be just beside the first TextView
like below
and when text is long I want the first TextView
to reach to end and ellipsize and 21% TextView
should be visible like below
but what ever I do the 21% TextView
goes away and first TextView
occupies complete space . I tried many combinations with Linear, Relative, Frame, Constraint layout, weight, minwidth
etc but nothing seems to work.
Here is my 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>
Any idea how to achieve it?
Note: I do not want to hard code characters or width
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
A solution using LinearLayout
, of course it not better than using ContrainstLayout
or another way. However, hope it help in some situation
<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>
Testing
inputTitle 1111111111111111111111111111111
ouput
inputTitle 1111111
ouput