MaterialCardView rounded corner only from top

Question

I simply want to make my bottomSheetDialog round from top right and top left only.

I want to have my bottomSheetDialog rounded from top corner but straight from below..

I. have tried multiple ways to solve

layout.xml

<com.google.android.material.card.MaterialCardView
        android:id="@+id/cardViewInfo"
        android:layout_width="match_parent"
        style="@style/CustomCardViewCornerStyle"
        android:layout_height="wrap_content"
        android:background="@color/red_no"
        android:clickable="true"
        android:focusable="true"
        app:cardElevation="5dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">

            <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" />

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/imageViewCross"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:padding="8dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ic_close_btn" />

            <matas.matas.core.control.TextViewInterRegular
                android:id="@+id/textViewExpiryDate"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="24dp"
                android:layout_marginTop="24dp"
                android:layout_marginEnd="24dp"
                android:gravity="center_horizontal"
                android:textColor="@color/colorBlackLight"
                android:textSize="10sp"
                android:lineHeight="12sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageViewPhoto"
                tools:text="Udløber xx.xx.xxxx" />

            <matas.matas.core.control.TextViewDMSerifRegular
                android:id="@+id/textViewName"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="24dp"
                android:layout_marginEnd="24dp"
                android:layout_marginTop="6dp"
                android:gravity="start"
                android:textColor="@color/black"
                android:textSize="24sp"
                android:lineHeight="28.8sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textViewExpiryDate"
                tools:text="40% på Striberne" />

            <matas.matas.core.control.TextViewInterSemiBold
                android:id="@+id/textViewTeaserText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="24dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="24dp"
                android:gravity="left"
                android:textColor="@color/black"
                android:textSize="14sp"
                android:lineHeight="21sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textViewName"
                tools:text="Du i hele februar 40% på ALLE produkter fra Matas striber." />


            <matas.matas.core.control.TextViewInterRegular
                android:id="@+id/textViewDisclaimerPlus"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginStart="24dp"
                android:layout_marginEnd="24dp"
                android:layout_marginBottom="16dp"
                android:gravity="start"
                android:textColor="@color/colorBlackLight"
                android:textSize="12sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textViewTeaserText"
                app:layout_constraintBottom_toBottomOf="parent"
                tools:text="Kontakt en materialist her i butikken og vis dit medlemskort, så får du rabatten på dit køb" />

            <matas.matas.core.control.TextViewInterRegular
                android:id="@+id/textViewDisclaimerNonPlus"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginStart="24dp"
                android:layout_marginEnd="24dp"
                android:layout_marginBottom="16dp"
                android:gravity="start"
                android:textColor="@color/colorBlackLight"
                android:textSize="12sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textViewTeaserText"
                app:layout_constraintBottom_toBottomOf="parent"
                tools:text="Kontakt en materialist her i butikken og vis dit medlemskort, så får du rabatten på dit køb" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.card.MaterialCardView>

I have tried multiple ways to make my image rounded and full width like

Glide.with(binding.imageViewPhoto)
                            .load(url)
                            .transform(GranularRoundedCorners(120.0f,120.0f,0.0f,0.0f))
                            .into(binding.imageViewPhoto)

Also tried

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

I have implemented theme in onCreate and also tried giving shape to it.

Answer 1

Material Components take a shapeAppearance argument which you can use to provide proper shape to the bottom sheet, try using that instead of style. example given below

    <style name="shape_appearance_bottom_sheet">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">20dp</item>
        <item name="cornerSizeTopRight">20dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="cornerSizeBottomRight">0dp</item>
    </style>

you can then provide this style as follows to your material card

    <com.google.android.material.card.MaterialCardView
        app:shapeAppearance="@style/shape_appearance_bottom_sheet"
        app:cardPreventCornerOverlap="false"
    ....

The line app:cardPreventCornerOverlap="false prevents bottom sheet to add padding between your image and bottom sheet. This will make the image fill the card.

If you want to keep padding to the image remove cardPreventCornerOverlap and follow below steps.

create a drawable with only top borders.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff"/>
    <corners
        android:topRightRadius="@dimen/bottom_card_top_radius"
        android:topLeftRadius="@dimen/bottom_card_top_radius"/>
</shape>

Now, set this drawable as background to the image

<ImageView
    android:id="@+id/imageView"
    android:background="@drawable/top_corners"
    enter code here

and once you do this you need to write below kotlin code.

imageView.outlineProvider = ViewOutlineProvider.BACKGROUND
imageView.clipToOutline = true

Answer 2

Set the background of your imageview with shape of rounder corners

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff"/>
    <corners
        android:topRightRadius="18dp"
        android:topLeftRadius="18dp"/>
</shape>