I have an XML file with an ImageView and a TextView. Everytime that the TextView is populated, the text goes off of the screen. I looked at other people who have had the same problem and the common solution seems to be to set the Textview's width to 0dp. This hasn't worked for me. Wondering if anyone knows why?
Here is my constraintLayout XML file:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintRight_toLeftOf="#id/weather_data"
android:layout_width="50dp"
android:layout_height="match_parent" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE"
android:textStyle="bold"
android:paddingRight="16dp"
style="#style/TextAppearance.AppCompat.Large"
app:layout_constraintLeft_toRightOf="#id/weather_icon"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Here is what it looks like, text is clearly getting cut off:
I got the solution of your problem just use it:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/weather_data"
android:layout_width="50dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE "
android:textStyle="bold"
android:paddingRight="16dp"
style="#style/TextAppearance.AppCompat.Large"
app:layout_constraintLeft_toRightOf="#id/weather_icon"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
You should set the width of your TextView to match_constraint which, in the XML, will be 0dp.
And I see you're using both left/right and start/end notations. Stick to only one of them.
I encourage you to use the start/end notation because there might be devices using your app that their language is one that reads from right to left, i.e.: Arabic, so using the start/end you don't have to worry about these devices.
Thanks to Sandeep and Martin. I combined their suggestions and this works well in the layout:
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintEnd_toStartOf="#id/weather_data"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="50dp"
android:layout_height="wrapcontent" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE"
android:textStyle="bold"
android:paddingRight="16dp"
app:layout_constraintStart_toEndOf="#id/weather_icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/TextAppearance.AppCompat.Large"
android:layout_width="0dp"
android:layout_height="wrap_content" />
Related
basically I have an layout as shown in the image. I am using a Guideline to restrict the width of the blue box. This means the ConstraintLayout itself hase full screen width and the blue box has its layout_constraintEnd_toStartOf="#id/guideline".
The blue box is just the background color of the TextView with the text, there aren't any additional containers or anything.
In order for the blue box to respect the constraints for its width calculations I have to set layout_constrainedWidth="true" on the box. As you can see the width is then restricted but the problem is that wrap_content does not work correctly afterwards.
The first box shows that if the text is only a single line, then the behaviour is as expected but if the text spans multiple lines (as in the second box) wrap_content breaks and the box is always "full width" (start of screen until the guideline).
Did somebody experience something similar? Is this a bug or did I misunderstood something. The same broken behaviour can be observed with the grey box on the right side.
I assume this has to do with the breaking behaviour of the TextView but is there a fix or workaround? As far as I know outside of an ConstraintLayout the width would be equal to the text so I assume this is a bug.
Edit XML code:
This is the basice code of one of the "bubbles" and as already mentioned I would like the view to really be as wide as the text.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/chat_message_history_receiver_background"
android:fontFamily="#font/nunito_semibold"
android:includeFontPadding="false"
android:paddingStart="15dp"
android:paddingTop="10dp"
android:paddingEnd="15dp"
android:paddingBottom="10dp"
android:textColor="#FFFFFF"
android:textSize="17sp"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintStart_toEndOf="#id/profile_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
app:layout_constraintWidth_max="wrap"
tools:text="Just testing something, somehowthisisnotworking" />
<app.jooy.messenger.ui.components.generic.profile_image.ProfileImage
android:id="#+id/profile_image"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginEnd="10dp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintVertical_bias="1"
app:backgroundColor="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.85" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is the output of this particular xml code:
Try with this, adjust margin and padding as per your need. and change the android:layout_marginBottom of the guide as per your need.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:paddingStart="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
android:includeFontPadding="false"
android:paddingStart="15dp"
android:paddingTop="10dp"
android:paddingEnd="15dp"
android:paddingBottom="10dp"
android:textColor="#FFFFFF"
android:textSize="17sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guide"
app:layout_constraintWidth_percent=".8"
tools:text="Just testing something, Some how this is not working" />
<app.jooy.messenger.ui.components.generic.profile_image.ProfileImage
android:id="#+id/profile_image"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="5dp"
app:backgroundColor="#color/colorPrimary"
app:layout_constraintStart_toStartOf="#id/text"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/guide"
android:layout_width="0dp"
android:layout_height="0.2dp"
android:layout_marginBottom="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#id/profile_image"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toTopOf="#id/profile_image" />
</androidx.constraintlayout.widget.ConstraintLayout>
first of all I am new to Android-Development.
My question is regards alignment of different views in Android Studio/Development.
Specifically the properly height-alignment of an icon and text.
Icon-Text-Alignment
As you can see, I tried to align the text with the icon. However the result looks slightly different in the emulator.
Here is my .xml-file:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DashboardActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="352dp"
android:fontFamily="#font/poppins_medium"
android:text="Dashboard"
android:textAlignment="viewStart"
android:textColor="#color/colorText"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.04" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="32dp"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3"
app:srcCompat="#drawable/ic_settings_black_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
My questions are:
1. How can i fix the alignment of these two views?
2. Why is the result in the emulator different?
3. Is there a best-practice to align views properly?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DashboardActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="352dp"
android:fontFamily="#font/poppins_medium"
android:text="Dashboard"
android:textAlignment="viewStart"
android:textColor="#color/colorText"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView10" />
<ImageView
android:id="#id/imageView10"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="32dp"
app:srcCompat="#drawable/ic_settings_black_24dp"
app:layout_constraintTop_toTopOf="#id/textView3"
app:layout_constraintBottom_toBottomOf="#id/textView3"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can do this simply by using a custom toolbar and adding a menu to it.
Try using Custom toolbar :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".terminalShortActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#4EACE2"
app:popupTheme="#style/ThemeOverlay.AppCompat">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Terminal Shortcuts"
android:textColor="#FFFFFF" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</LinearLayout>
So I dig into the alignment issue a little further and came up with a few "solutions". Generally speaking and to answer my questions the "Custom Toolbar" is not the right solution to align the views.
The problem lies in the padding of fonts. Android take the whole view to align views and not as assumed the "text" only. Therefore the alignment looks off.
Different paddings/fonts
Poppinsmedium: without padding
Poppinsmedium: with padding; normal state
Android-Font: with padding; normal state
The bottom-padding can be eliminated with the following code:
android:includeFontPadding="false"
Or check this thread for more in-depth knowledge of the issues of font-padding.
To align views, now I am using Chain-Constraints and do it without padding. It looks like the best-way to align views, especially Text-Views. However, I have to say that despite the deleting of the bottom padding it is necessary to adjust the alignment a littlebit with the vertical-bias.
For reference:
constraintlayout.com
Android-Doc: constrain-chain
I am trying to center the text in a TextView, which itself is contained in a constraint layout. The problem is, wrap_content does not wrap the text tightly enough, which causes it to be off-center. I tried all gravities, making it fill the parent and then use gravities, etc. and can't think of a solution and did not find anything useful when googling.
Problem can be seen well in the layout preview:
badge.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:textAlignment="center"
tools:layout_height="32dp"
tools:layout_width="32dp">
<ImageView
android:id="#+id/badge_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/circle_accent"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible"/>
<TextView
android:id="#+id/badge_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foregroundGravity="center"
android:gravity="center"
android:textAlignment="center"
android:textColor="#color/white"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/badge_background"
app:layout_constraintLeft_toLeftOf="#id/badge_background"
app:layout_constraintRight_toRightOf="#id/badge_background"
app:layout_constraintTop_toTopOf="#id/badge_background"
tools:text="21"
tools:visibility="visible" />
<ImageView
android:id="#+id/badge_watched_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_watch"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/badge_background"
app:layout_constraintLeft_toLeftOf="#id/badge_background"
app:layout_constraintRight_toRightOf="#id/badge_background"
app:layout_constraintTop_toTopOf="#id/badge_background"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Try to use round drawable as TextView background
I have this section into my layout:
<RelativeLayout
android:id="#+id/title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/keyline_4"
android:paddingTop="10dp"
android:paddingRight="#dimen/keyline_4"
app:layout_constraintTop_toBottomOf="#+id/avatar_layout"
android:visibility="visible">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/flag_icon"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_marginRight="#dimen/keyline_0"
android:layout_toLeftOf="#+id/title"
android:src="#drawable/ic_modify"
android:visibility="visible"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
style="#style/ProfileTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="TEST TEST"
android:ellipsize="end"
android:maxLines="1"
android:singleLine="true" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/update_icon"
android:layout_width="#dimen/keyline_4"
android:layout_height="#dimen/keyline_4"
android:layout_toRightOf="#+id/title"
android:layout_marginLeft="#dimen/keyline_0"
android:src="#drawable/ic_modify"
android:visibility="visible"/>
</RelativeLayout>
The result (on layout editor): it's OK
But if the text is long like this, the icons disappear...
How to keep icons into the screen (left and right)? The text should be wrapped between these 2 icons.
Thank you very much!
Right now you are constraining the text to the parent and the images to the text. You need to constrain the images to the parent and the text to the images.
To accomplish this, you would need to use a ConstraintLayout instead ofyour RelativeLayout. It might look like this (I added my own values where you were using dimen):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/update_icon"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_toRightOf="#+id/title"
android:src="#drawable/ic_modify"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:paddingLeft="26dp"
android:paddingRight="26dp"
android:ellipsize="end"
android:maxLines="1"
android:singleLine="true"
app:layout_constraintStart_toEndOf="#id/update_icon"
android:text="TEST this is a super long, long, long, long, long, long, long version of the test TEST"
app:layout_constraintEnd_toStartOf="#id/flag_icon"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/flag_icon"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_marginStart="384dp"
android:src="#drawable/ic_modify"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This would give you something like for long text:
and something for short text:
This turned out to be a challenging question for me. After struggling several hours I couldn't get the solution by means of neither LinearLayout, nor RelativeLayout nor ConstraintLayout. I too look forward to see a solution by either of the layouts mentioned (or any other).
Meanwhile, in case you're tight with time, I'd suggest an option that is rather a workaround than solution. Namely, you might consider using drawableStart and drawableEnd attributes for the AppCompatTextView, so the resulting layout would look as follows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:drawableStart="#mipmap/ic_modify"
android:drawableEnd="#mipmap/ic_modify"
android:text="TEST TEST TEST TEST TEST TEST TEST TEST"
android:ellipsize="end"
android:maxLines="1"
android:singleLine="true" />
</RelativeLayout>
Note, that for testing I used #mipmap/ic_launcher shipped with a default Android Studio project. The ic_launchers are of square size for each screen resolution group. You might need to do the same with ic_modify to prevent its stretching in width.
Another option, if applicable, might be creating a custom view.
I have three elements in layout, two TextViews and one ImageView between them. I'm trying to achieve this behavior:
image (arrow) has 9patch
image is wide as possible
image has set minimal width
right and left texts go wider with longer text but only to meet image's minWidth, then new line appears
Below are few screenshots from Android Studio layout preview, gained with different layouts.
What I have tried:
Relative layout: image centered, minWidth set, texts have set toRightOf/toLeftOf
Relative layout: image has set toRightOf/toLeftOf
Constraint layout: "constraint arrows" go from image to text
Constraint layout: "constraint arrows" go from text to image
Linear layout: using weight (not really responsive)
What I always get:
What I want seems quite straightforward to me but I cannot do it. Am I missing something or is it really impossible? Thank you in advance.
Use below code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/left_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text="TextView" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:layout_toLeftOf="#+id/right_tv"
android:layout_toRightOf="#+id/left_tv"
app:srcCompat="#drawable/arrow" />
<TextView
android:id="#+id/right_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="TextView" />
</RelativeLayout>
Replace your image with arrow
Here is one more answer done via constraintLayout by creating horizontal chains.
Updated as you asked
<?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="wrap_content">
<TextView
android:id="#+id/left_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="ajn sdhbch chf nbhjgvbf vkjf vhf bvihfijnvj vfknvv ihvb jnvkjnfv kjnvfn"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/imageView6"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/left_tv"
app:layout_constraintRight_toLeftOf="#+id/right_tv"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_next_button" />
<TextView
android:id="#+id/right_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView6"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Updated: the code is updated for more responsive layout.
Now play with maxwidth of both text views.
For your problem updating maxwidth programmatically will be better.
This code is done with Linear layout method. There is a GridLayout method also along with constraintLayout method. Can be achieved with many layouts, if you know the right technique to do so.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/left_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView is long and very long" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_add_circle_green" />
<TextView
android:id="#+id/right_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="60dp"
android:text="TextView is long and very long" />
</LinearLayout>