Constraintlayout, view pushed outside bounds

Question

I need to achieve the following layout:

The title 'Trouble in paradise should be able to expand in height but it shouldn't push 'Ma 21januari' outside of the bounds.

This is my layout at the moment:

<androidx.constraintlayout.widget.ConstraintLayout
      android:id="@+id/wrapper_titles"
      android:layout_width="0dp"
      android:layout_height="0dp"
      app:layout_constraintBottom_toBottomOf="@id/image_episode"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toEndOf="@id/image_episode"
      app:layout_constraintTop_toTopOf="@id/image_episode"
      >

    <TextView
        android:id="@+id/subtitle_episode"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/title_episode"
        tools:text="Ma 21 januari"
        style="@style/Text_Episode_Subtitle"
        />

    <TextView
        android:id="@+id/title_episode"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="Trouble in paradise"
        style="@style/Text_Episode_Title"
        />

  </androidx.constraintlayout.widget.ConstraintLayout>

How can I make title_episode expand to the full height but with subtitle_episode still fixed to the top?

Answer 1

I think the cleanest solution would be to put both TextViews in a packed vertical chain with bias set to 1 so that they stick to the bottom. This means that you need to add top constraints for these TextViews which will also help to prevent them from getting pushed outside. Since the title_episode's height is set to wrap_content, it's also important to set the app:layout_constrainedHeight="true" attribute to enforce its constraints as it expands.

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/wrapper_titles"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@id/image_episode"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/image_episode"
    app:layout_constraintTop_toTopOf="@id/image_episode"
    >

    <TextView
        android:id="@+id/subtitle_episode"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintVertical_bias="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/title_episode"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Ma 21 januari"
        style="@style/Text_Episode_Subtitle"
        />

    <TextView
        android:id="@+id/title_episode"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/subtitle_episode"
        tools:text="Trouble in paradise"
        style="@style/Text_Episode_Title"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

Here, take a look:

<android.support.constraint.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/image_episode"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/image_episode"
    app:layout_constraintTop_toTopOf="@id/image_episode">

    <TextView
        android:id="@+id/subtitle_episode"
        style="@style/Text_Episode_Subtitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Ma 21 januari" />

    <TextView
        android:id="@+id/title_episode"
        style="@style/Text_Episode_Title"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:ellipsize="end"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/subtitle_episode"
        tools:text="Trouble in paradise Trouble in paradise" />

</android.support.constraint.ConstraintLayout>

Answer 3

I've provided a basic structure meeting your requirements, customize according to your need:

<android.support.constraint.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/image_thumbnail"
        android:layout_width="180dp"
        android:layout_height="150dp"
        android:scaleType="fitXY"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />

    <TextView
        android:id="@+id/subtitle_episode"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="15dp"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@+id/image_thumbnail"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/image_thumbnail"
        app:layout_constraintTop_toTopOf="@+id/image_thumbnail"
        tools:text="Ma 21 januari" />

    <TextView
        android:id="@+id/title_episode"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="15dp"
        android:textColor="@android:color/black"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/image_thumbnail"
        app:layout_constraintTop_toBottomOf="@+id/subtitle_episode"
        tools:text="Trouble in paradise Trouble in paradise Trouble in paradise" />

</android.support.constraint.ConstraintLayout>