Is it possible to make such a flow of text around a picture using ConstraintLayout ?

enter image description here

Those. The text in the TextView should be on the right and below the ImageView , while the image in the ImageView should occupy the entire visible (free) height of the screen, the width of the image should be such that the image has the correct proportions, and the screen should scroll (scroll).

I manage to force ImageView be equal in height to the container while preserving the proportions, but the text “leaves” to the right:

 <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"> <ImageView android:id="@+id/avatar" android:layout_width="0dp" android:layout_height="match_parent" app:layout_constraintDimensionRatio="1:1" app:layout_constraintVertical_weight="1" android:contentDescription="@string/avatar" android:scaleType="centerCrop" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" tools:src="@tools:sample/avatars" /> <TextView android:id="@+id/details" android:layout_width="0dp" android:layout_height="wrap_content" android:paddingEnd="@dimen/margin" android:paddingLeft="@dimen/margin" android:paddingRight="@dimen/margin" android:paddingStart="@dimen/margin" app:layout_constraintLeft_toRightOf="@id/avatar" app:layout_constraintStart_toEndOf="@id/avatar" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" tools:text="@tools:sample/lorem" /> </androidx.constraintlayout.widget.ConstraintLayout>

enter image description here

And I can not do scrolling, because in case I wrap a ConstraintLayout in a ScrollView , the ImageView begins to occupy an invisible part of the screen:

 <ScrollView 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"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content"> ... </androidx.constraintlayout.widget.ConstraintLayout> </ScrollView>

enter image description here

If you wrap the TextView in ScrollView , the size of the picture is correct, but only the text to the right is scrolled, the picture stays in place, and this is not exactly what I need - the text does not flow around the picture, but just scrolls to the right of it.

Or is it impossible to do this with ConstraintLayout and ScrollView ? With the help of which containers is it better to make such a layout?

  • one
    I can confidently say that it is impossible to do this with one picture and one TextView. If I were you, I would implement the html page, because it is much easier to solve with it. - Georgiy Chebotarev
  • one
    One picture and one TextView can not do this. Govnodit using html pages is strongly not recommended. - Suvitruf ♦
  • @Suvitruf, and then how best to do it? - Ksenia
  • @Ksenia I imagine it is possible to do this if you create your component and override methods like onMeasure , etc. there. Although, for some reason it seems to me, there is a ready-made component with such behavior) - Suvitruf ♦

1 answer 1

As an option, I offer not a ready answer, but a direction. Namely, use two textview : one on the right, one on the bottom. To define filling by the text in the first and to transfer the rest in the second. Related Links:

  1. define textview overflow
  2. Text breakdown