Constraint layout wrap textview but constraint width when its too long to let other views be visible

Question

I have to design this layout. Icon should stick to the textview.

This is what I've tried which looks exactly what is needed.

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingStart="@dimen/padding_m"
        android:paddingTop="@dimen/padding_s"
        android:paddingEnd="@dimen/padding_m"
        android:paddingBottom="@dimen/padding_s"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:id="@+id/title_container"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/more_options"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/active_group_name"
                style="@style/AppbarTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:maxLines="1"
                app:layout_constrainedWidth="true"
                tools:text="Ranjan Malav" />

            <FrameLayout
                android:id="@+id/account_option_icon_container"
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:layout_gravity="center"
                android:layout_marginStart="@dimen/margin_xs"
                android:background="@drawable/circle_background_36dp">

                <ImageView
                    android:id="@+id/account_option_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    app:srcCompat="@drawable/ic_outline_settings_24" />
            </FrameLayout>

        </LinearLayout>

        <ImageView
            android:id="@+id/more_options"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_baseline_more_vert_24"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

But when the text is long, setting icon is getting hidden.

How can I give icon priority and let it take the space and then textview should wrap itself in the remaining space?

I would say It is easily doable but why not use the icon in `drawableEnd` property of the `TextView` which will remove the need of using a separate widget, the `ImageView`? — Lalit Fauzdar, Apr 02 '21 at 03:23
@Lalit That would require to create a new drawable with circle background. I want to keep it dynamic that way I can change background tint programmatically. — Ranjan, Apr 02 '21 at 03:38
What you're already doing is using extra two widgets (FrameLayout and ImageView) with two drawables (Background and Settings Icon) which can be replaced by a layer-list drawable directly applied to TextView. Background tint of TextView's drawable can be changed dynamically and I believe with PorterDuffXMode, you can also apply tint to a layerlist drawable only to the background. — Lalit Fauzdar, Apr 02 '21 at 03:47
@LalitFauzdar Thanks Lalit for sharing, I'll try to implement that later. — Ranjan, Apr 03 '21 at 03:15

score 3 · Accepted Answer · answered Apr 02 '21 at 03:09

This works as intended. This answer on strackoverflow was helpful https://stackoverflow.com/a/44412219/6168272.

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingStart="@dimen/padding_m"
        android:paddingTop="@dimen/padding_s"
        android:paddingEnd="@dimen/padding_m"
        android:paddingBottom="@dimen/padding_s"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/active_group_name"
            style="@style/AppbarTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:maxLines="1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/account_option_icon_container"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_default="wrap"
            tools:text="Ranjan Ranjan Ranjan Ranjan Ranjan" />

        <FrameLayout
            android:id="@+id/account_option_icon_container"
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:layout_gravity="center"
            android:layout_marginStart="@dimen/margin_xs"
            android:background="@drawable/circle_background_36dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/more_options"
            app:layout_constraintStart_toEndOf="@id/active_group_name"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/account_option_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                app:srcCompat="@drawable/ic_outline_settings_24" />
        </FrameLayout>

        <ImageView
            android:id="@+id/more_options"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_baseline_more_vert_24"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

score 0 · Answer 2 · answered Apr 02 '21 at 02:52

0

Create your ImageView before textview

answered Apr 02 '21 at 02:52

jayesh jain

48
8

score 0 · Answer 3 · answered Apr 02 '21 at 03:03

0

I don't think you can do that, and i think it's bad design to have and ImageView that have dynamic position based on the width of the title.

What best is i think to put your imageView as action in your menu.xml

answered Apr 02 '21 at 03:03

Jimly Asshiddiqy

335
4
15

Constraint layout wrap textview but constraint width when its too long to let other views be visible

3 Answers3