Jorge
Jorge

Reputation: 141

Is it possible to have icon centered in constraint layout unless overlapping textview

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: Icon centered, short text not overlapped

Which causes problems when text is long: Icon shifted upwards, long text overlapped

If an icon is not centered when the text is short: Icon not centered, short text not overlapped

We don't get the problem when the text is long: Icon shifted upwards, long text not overlapped

Upvotes: 2

Views: 318

Answers (1)

Ferran
Ferran

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

Related Questions