Develop Reference

Material Cardview - Children not getting clipped < API 28

When putting a nested scroll view inside a material card view with rounded corners and scrolling there is a bug where other material card views dont get clipped and there edges spill over the rounded corners. Text views and viewpager objects got there corners clipped fine. This bug appears on api 28 and below.
Does anyone know a work around for this?
<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:id="#+id/fragment_workout_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="framework.presentation.workouts.WorkoutFragment"
>
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_workout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp"
app:elevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<include
android:id="#+id/toolbar_workout_navigation"
layout="#layout/toolbar_home" />
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.card.MaterialCardView
style="#style/cv_style_all_rounded"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/cv_margin_bottom"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/app_bar_workout"
app:strokeColor="#color/dividerColor"
app:strokeWidth="0.5dp">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:overScrollMode="never"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/home_header_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/home_header" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/home_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="#dimen/header_margin_top"
android:layout_marginEnd="32dp"
android:gravity="center"
android:text="#string/home_title"
android:textSize="?attr/textAppearanceHeadline5"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/home_header_image" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/home_description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="#dimen/description_margin_top"
android:layout_marginEnd="32dp"
android:gravity="center"
android:text="#string/home_description"
android:textSize="?attr/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/home_title" />
<View
android:id="#+id/divider_home"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="#dimen/workout_intro_left_right_margin"
android:layout_marginTop="#dimen/divider_margin_top"
android:layout_marginEnd="#dimen/workout_intro_left_right_margin"
android:background="?android:attr/dividerVertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/home_description" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/quotesViewPager2"
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_marginStart="#dimen/start_end_padding"
android:layout_marginTop="32dp"
android:layout_marginEnd="#dimen/start_end_padding"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/divider_home" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tvFeaturedVideo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:text="#string/featured_video"
android:textSize="?attr/textAppearanceHeadline6"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/quotesViewPager2" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvFeaturedVideo"
style="#style/cv_style_home_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="#dimen/start_end_padding"
android:layout_marginTop="8dp"
android:layout_marginEnd="#dimen/start_end_padding"
android:clipChildren="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvFeaturedVideo">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/featuredThumbNail"
android:layout_width="0dp"
android:layout_height="210dp"
android:layout_marginBottom="12dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/featuredVideoTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/featuredVideoTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="12dp"
android:maxLines="1"
android:text="TextView"
android:textAlignment="center"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/youtubeIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/featuredThumbNail"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/youtube_logo_icon_150px" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
Steps to recreate:
Constraint layout > Material card view (main container) > Nested Scroll View > Additional material card views (enough to scroll) & API 28 and below

In your Cardview, add the property in your xml:
cardPreventCornerOverlap="false"

DialogFragment with fixed header, scrollable body and fixed footer

I want to show a dialog with a title (header), body (content) and accept button (footer). I want header and footer to be visible even if content is longer than the screen height. If this is the case, I want body to be scrollable so that it can shrink. Here is what I tried, scrollView gets all the dialog space, no header and no footer is shown:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:minWidth="300dp">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:text="Title"
app:layout_constraintBottom_toTopOf="#+id/bodyContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:id="#+id/bodyContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/buttonContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="1500dp"
android:text="Long text" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/buttonContainer"
android:layout_width="0dp"
android:layout_height="30dp"
android:background="#android:color/darker_gray"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/bodyContainer" />
</androidx.constraintlayout.widget.ConstraintLayout>

When your ScrollView's height is set to wrap_content the constraints will not limit the dimension if it gets too big to satisfy them. To fix this and enforce the top and bottom constraints, set app:layout_constrainedHeight="true" for your ScrollView.

Here is exactly what you just want. Use NestedScrollView instead of ScrollView:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="300dp">
<TextView
android:id="#+id/title"
android:layout_width="411dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/darker_gray"
android:text="Title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.core.widget.NestedScrollView
android:id="#+id/bodyContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintBottom_toTopOf="#+id/button">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="1500dp"
android:text="Long text" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button"
android:layout_width="411dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/darker_gray"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

View Pager not scrolling in a scrollView

I'm having a ViewPager and a RecyclerView in layout file. I want to make the entire layout Scrollable. That is i want the ViewPager to be scrolled up. Hence, i added <ScrollView> as the root layout.
Issue:
The problem i'm facing is that the RecyclerView in scrolling as expected, but the ViewPager area is fixed.
The Below Image depicts the issue mentioned above:
The xml code of my layout file is as shown below:
<ScrollView
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:orientation="vertical"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/home_viewpager_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.4" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/home_view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/home_viewpager_guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/home_viewpager_dots_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/home_viewpager_guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"></LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/latest_news_bg"
app:layout_constraintBottom_toTopOf="#+id/latest_news_guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/home_view_pager">
<View
android:id="#+id/divider2"
android:layout_width="0dp"
android:layout_height="3dp"
android:background="#color/gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.16"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/latest_news_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Latest News"
android:textColor="#color/dark_gray"
android:textSize="22sp"
app:layout_constraintBottom_toTopOf="#+id/divider2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/latest_news_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.51" />
<TextView
android:id="#+id/home_article_type_txt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:fontFamily="sans-serif-medium"
android:text="Featured Article"
android:textColor="#color/pf_white"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/home_viewpager_dots_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.02"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.65" />
<TextView
android:id="#+id/home_article_title_txt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:text="What better way to put your health and wellbeing first than"
android:textColor="#color/pf_white"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/home_viewpager_dots_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/home_article_type_txt"
app:layout_constraintVertical_bias="0.0" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/home_article_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout3"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
What have i tried?
As mentioned in this answer Android ScrollView not Scrolling
, i have tried setting the ScrollView orientation to vertical and fillViewPort property to true, but the problem still persists.
I have also tried using NestedScrollView as the root, but that too didn't work.
If someone can suggest me how to go about with this, it will be really helpful to anyone facing such issue.

how to prevent imageView from shrinking beyond the size of its containing items in constraint layout?

I am designing a constraint layout for an android application and I want the layout to look something like this:
The problem is that as soon as I constraint the height of the image views, they shrink until there is nothing left. I want the image views to have at least as much height as the text views they surround, plus a little padding. How can I do that without specifying an absolute height for the image views?
Here is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
android:background="#color/colorPrimaryLightBlue">
<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/imageView12"
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView13"
app:srcCompat="#drawable/button_round_bg_off" />
<ImageView
android:id="#+id/imageView14"
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView12"
app:srcCompat="#drawable/button_round_bg_off" />
<ImageView
android:id="#+id/imageView13"
android:layout_width="0dp"
android:layout_height="125dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/button_round_bg_off" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView14"
app:layout_constraintEnd_toEndOf="#+id/imageView14"
app:layout_constraintStart_toStartOf="#+id/imageView14"
app:layout_constraintTop_toTopOf="#+id/imageView14" />
<TextView
android:id="#+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView12"
app:layout_constraintEnd_toEndOf="#+id/imageView12"
app:layout_constraintStart_toStartOf="#+id/imageView12"
app:layout_constraintTop_toTopOf="#+id/imageView12" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView13"
app:layout_constraintEnd_toEndOf="#+id/imageView13"
app:layout_constraintStart_toStartOf="#+id/imageView13"
app:layout_constraintTop_toTopOf="#+id/imageView13" />
</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_bright">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView12"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="Image description."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView13"
app:layout_constraintBottom_toTopOf="#id/imageView14" />
<ImageView
android:id="#+id/imageView14"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="Image description."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView12"
app:layout_constraintBottom_toBottomOf="parent"
app:srcCompat="#android:drawable/alert_dark_frame" />
<ImageView
android:id="#+id/imageView13"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="Image description."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/imageView12"
app:srcCompat="#android:drawable/alert_dark_frame" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="15dp"
android:text="TextView"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#+id/imageView14"
app:layout_constraintEnd_toEndOf="#+id/imageView14"
app:layout_constraintStart_toStartOf="#+id/imageView14"
app:layout_constraintTop_toTopOf="#+id/imageView14" />
<TextView
android:id="#+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:padding="15dp"
android:text="TextView"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#+id/imageView12"
app:layout_constraintEnd_toEndOf="#+id/imageView12"
app:layout_constraintStart_toStartOf="#+id/imageView12"
app:layout_constraintTop_toTopOf="#+id/imageView12" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:padding="15dp"
android:text="TextView"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#+id/imageView13"
app:layout_constraintEnd_toEndOf="#+id/imageView13"
app:layout_constraintStart_toStartOf="#+id/imageView13"
app:layout_constraintTop_toTopOf="#+id/imageView13" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Use the above code and save the "Image description." in the strings.xml file and as you can notice that the imageView12 is not having app:srcCompat attribute in which you are specifying your drawable but still all the three image views are having the same distribution in terms of space occupied by them. Also, I have given padding of "15dp" to all the three text views which you may manage as per your requirement. Hope this helps you.

There is one magical attribute in ConstraintLayout.
app:layout_constraintHeight_min="wrap"
And I think you have constraint reversed. ImageView should constraintTo the TextView.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2222">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView16"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView13"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView13"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:padding="2dp"
app:layout_constraintBottom_toBottomOf="#+id/textView16"
app:layout_constraintEnd_toStartOf="#+id/textView16"
app:layout_constraintHeight_min="wrap"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView16"
app:srcCompat="#drawable/ic_message_check" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
This will not allow ImageView's height to go below "wrap_content" value. But if you chose this you will have to make sure height of the TextView will be at least that of "wrap" of the ImageView.
But this should be the only caveat. ImageView will automatically resize based on height of the TextView(and wrap of the width)

Android ConstraintLayout sometimes doesn't draw correctly after switching between tabs

I'm seeing a ConstraintLayout occasionally fail to draw correctly, but only when I switch between fragments, and I'm not seeing why.
It looks like this initially:
But, after switching tabs, it looks like this:
fragment_overview.xml (The Fragment layout)
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/palette_grey_light"
android:clipToPadding="false"
android:paddingTop="16dp">
<uk.lobsterdoodle.edinburghwolves.view.FixtureView
android:id="#+id/overview_fixture_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
... a few other views ...
</android.support.constraint.ConstraintLayout>
fixture_view.xml (The custom view layout, FixtureView)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/fixture_away_color"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/palette_red"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fixture_home_color"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/fixture_home_color"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/palette_grey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="#+id/fixture_away_color"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_away_team_score"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="27"
android:textColor="#color/palette_white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/fixture_away_team_name"
app:layout_constraintStart_toStartOf="#+id/fixture_away_team_name"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_away_team_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="32dp"
android:text="WOLVES"
android:textColor="#color/palette_white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fixture_home_color"
app:layout_constraintTop_toBottomOf="#+id/fixture_away_team_score"
app:layout_constraintVertical_bias="0.0"
android:layout_marginTop="0dp"/>
<TextView
android:id="#+id/fixture_home_team_score"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="21"
android:textColor="#color/palette_white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/fixture_home_team_name"
app:layout_constraintStart_toStartOf="#+id/fixture_home_team_name"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_home_team_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="32dp"
android:text="PIRATES"
android:textColor="#color/palette_white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/fixture_home_color"
android:layout_marginTop="0dp"
app:layout_constraintTop_toBottomOf="#+id/fixture_home_team_score"/>
<TextView
android:id="#+id/fixture_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="FINAL"
android:textColor="#color/palette_white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/fixture_away_team_score"
android:layout_marginBottom="0dp"
/>
</android.support.constraint.ConstraintLayout>

While your fixture_view.xml file constrains views in the ConstraintLayout properly, a view in the ConstraintLayout in fragment_overview.xml isn't constrained, so they won't display properly at runtime. Add some some constraints to your FixtureView in fragment_overview.xml like so:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/palette_grey_light"
android:clipToPadding="false"
android:paddingTop="16dp">
<!-- You were missing constraints here -->
<uk.lobsterdoodle.edinburghwolves.view.FixtureView
android:id="#+id/overview_fixture_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:cardBackgroundColor="#color/palette_white"
app:cardElevation="2dp"
app:contentPadding="16dp"
app:layout_constraintTop_toBottomOf="#id/overview_fixture_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="standings"
android:textColor="#color/palette_grey"/>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>

Fixed, by making the score TextView's height wrap_content instead of matching constraint of 0dp
<TextView
android:id="#+id/fixture_away_team_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content" <-- wrap, not 0dp
...
/>