Rounded corners not working with Material Design Bottomsheet Android

Question

I am using Material Design Library 1.1.0 and trying to implement rounded corners on Bottomsheet. Here is my code

Style-

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="DarkTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.An.LargeComponent
        </item>
        <item name="android:windowActivityTransitions">true</item>
    </style>

    <style name="SplashAppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:elevation">0dp</item>
    </style>

    <style name="ShapeAppearance.An.LargeComponent" parent="ShapeAppearance.MaterialComponents.LargeComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">4dp</item>
    </style>

</resources>

Class -

public class LoadingFrag extends BottomSheetDialogFragment {
//Button
public LoadingFrag() {
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    return inflater.inflate(R.layout.bottom_sheet
            , container, false);
}

Activity XML-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="@color/cardBackgroundColor"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:gravity="start"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.7"
            android:fontFamily="@font/product_sans_bold"
            android:padding="20dp"
            android:text="@string/one_second"
            android:textAlignment="textStart"
            android:textColor="@color/primaryTextColorDark"
            android:textFontWeight="600"
            android:textSize="30dp"
            android:textStyle="bold" />

        <ProgressBar
            android:id="@+id/progressBar2"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="37dp"
            android:layout_gravity="center"
            android:layout_weight="0.3"
            android:indeterminate="true" />

    </LinearLayout>

    <TextView
        android:id="@+id/prem_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-10dp"
        android:layout_marginBottom="20dp"
        android:fontFamily="@font/product_sans_regular"
        android:paddingStart="30dp"
        android:paddingRight="30dp"
        android:text="@string/we_are_processing_things_for_you_and_creating_a_signal_to_nuke_mars_just_kidding_wait"
        android:textColor="@color/primaryTextColor"
        android:textSize="16dp"
        app:lineHeight="25dp" />

</LinearLayout>

Nothing is working. I tried doing it with creating a shape manually and using that as the shape for the bottomsheet but that didn't worked either. The corners are still the same.

Any help will be appreciated.

Answer 1

if you want all 4 corners to be rounded, in BottomSheetDialogFragment, override this method:

    @Override
    public void setupDialog(Dialog dialog, int style) {
                View view = inflate your view here

                ((View) view.getParent()).setBackgroundColor(ContextCompat.getColor(mContext, android.R.color.transparent));

               }

and in your xml set MaterialCardView as a parent layout with desire radius and try it out

The idea here to set transparent background, so the card radius will shown. There are some solutions for this, but this trick will do the job