Constraints between elements into RelativeLayout

Question

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!

Answer 1

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.

Answer 2

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: