" /> " /> "/>

Rounded Image on top of BottomDialogFragment

20 Views Asked by At

I simply want a full width image on top of BottomSheetDialog where bottomSheetDialog is rounded from top only.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

    </data>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardViewInfo"
        android:layout_width="match_parent"
        style="@style/CustomCardViewCornerStyle"
        android:layout_height="wrap_content"
        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/red_no">

            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/imageViewPhoto"
                android:layout_width="match_parent"
                android:minHeight="220dp"
                android:layout_height="wrap_content"
                android:scaleType="center"
                app:layout_constraintDimensionRatio="h,990:462"
                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" />

            

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

</layout>

CustomCardViewCornerStyle.xml

<style name="CustomCardViewCornerStyle" parent="@style/Widget.MaterialComponents.CardView">
        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay_card_custom_corners</item>
    </style>

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

PersonalOfferDetailDialogFragment.kt

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

BottomSheetDialogTheme.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>

select_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>

How could I remove extra padding or margin around the image. I simply want the image to fit and round along with bottomSheetDialogFragment

Above code creates.. enter image description here

0

There are 0 best solutions below