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