Reputation: 141
I am trying to keep an icon centered inside a constraint layout while making it always stay over some text view that is on the bottom of the constraint layout (this is a very simplified version of my actual issue but represents the problem equally). The text in the bottom can be large enough to go over the center of the layout, in which case I want the icon to be shifted upwards.
In order to relate the icon's bottom to both the center and the text view's top, I am using a guideline in the center of the layout and a barrier to catch the top of the text view or the top of the guideline, whichever is higher.
The problem is that half the icon is under the guideline so the text still is overlapped by the icon. And the icon only shifts upward when the text view's top goes over the guideline. Alternatively, I can set the bottom of the icon on top of the guideline, so the text view is never overlapped, but the icon is not exactly centered.
This is the current status of the layout with all the items:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/ic_play"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/barrier"
app:layout_constraintBottom_toBottomOf="@id/barrier"
/>
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="guide,text" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guide"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Temporibus ea quasi ut dolores quae qui. Et dolor sit voluptatem fugit. Possimus nulla molestias maxime. Distinctio perferendis veniam modi sint numquam dolores esse. Minus consequuntur mollitia asperiores praesentium non minus. Temporibus ea quasi ut dolores quae qui. Et dolor sit voluptatem fugit. Et dolor sit voluptatem fugit."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I found a (not great) solution, which is adding top padding to the text view half the size of the image view. I would prefer to avoid such a hack and find a good implementation instead. Is it possible?
To help understand the issue, here are some images from the UI designer in Android Studio:
The hopeful result with short text:
Which causes problems when text is long:
If an icon is not centered when the text is short:
We don't get the problem when the text is long:
Upvotes: 2
Views: 318
Reputation: 1448
Set the paddingTop
of TextView
to the half of ImageView
<TextView
android:id="@+id/text"
android:paddingTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Temporibus ea quasi ut dolores quae qui. Et dolor sit voluptatem fugit. Possimus nulla molestias maxime. Distinctio perferendis veniam modi sint numquam dolores esse. Minus consequuntur mollitia asperiores praesentium non minus. Temporibus ea quasi ut dolores quae qui. Et dolor sit voluptatem fugit. Et dolor sit voluptatem fugit."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
Upvotes: 0