ImageView override rounded corner of BottomSheetDialogFragment

Question

BottomSheetDialog is rounded from top via using below code..

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setStyle(STYLE_NORMAL, R.style.BottomSheetDialogTheme)
    }

style.xml

<style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/BottomSheetModalStyle</item>
    </style>

    <style name="BottomSheetModalStyle" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/selector_top_rounded_corner</item>
    </style>

selector_top_rounded_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners
        android:topLeftRadius="16dp"
        android:topRightRadius="16dp" />

</shape>

After adding an imageView in top of the layout of BottomSheetDialogFragment. It roundness from top gone and background from top is flat.

This shape becomes rounded but after adding image to the top of it override( cancel) the effect of background and become flat from the top.

Where ImageView attributes are as follows.

<androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/imageViewPhoto"
                android:layout_width="match_parent"
                android:minHeight="200dp"
                android:layout_height="160dp"
                android:scaleType="center"
                app:layout_constraintDimensionRatio="h,375:240"
                app:layout_constraintTop_toTopOf="parent" />

Answer 1

the ImageView has its own background, which is by default a rectangle, and it's covering the rounded corners of the bottom sheet.

u can try set the ImageView with the same rounded background

<androidx.appcompat.widget.AppCompatImageView
    ...
    android:background="@drawable/selector_top_rounded_corner" />