BottomSheetDialog not rounding top corners correctly in Android

Question

I have a custom BottomSheetDialog and for its layout i created drawable which has top corners rounded rectangle. BottomSheetDialog layout background is a Linearlayout and i applied drawable to the layout.Top corners of the bottom sheet rounding correctly but there is a another layout bottom of the Linear Layout which is not rounded (square and white see below picture) and it is not in the layout.xml file. its like rounded rectangle on top of a square.I couldn't get rid of that square.

Below is my custom bottom sheet sample

public abstract class EmployeeBottomSheetDialog extends BottomSheetDialog {

    private Context context;
    private Activity activity;
    private RecyclerView employeeRecyclerView;
    private EditText searchEditText;
    private DataBase dataBase;
    private ArrayList<Employe> employeeList = new ArrayList<>();
    private ArrayList<Employe> employeeSelectedList = new ArrayList<>();
    private SelectEmployeeAdapter selectEmployeeAdapter;
    private ImageButton closeSearchImageButton;

    public EmployeeBottomSheetDialog(@NonNull Context context, List<Employe> selectedEmployeeList) {
        super(context,R.style.BottomSheetDialogStyle);
        this.context = context;
        this.activity = (Activity) context;
        if(!selectedEmployeeList.isEmpty()){
            employeeSelectedList.clear();
            employeeSelectedList.addAll(selectedEmployeeList);
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.employee_bottom_sheet_dialog);
    }
}

Below is my style

 <style name="BottomSheetDialogStyle" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="android:windowIsFloating">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowSoftInputMode">adjustResize</item>
        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay</item>
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="background">@android:color/transparent</item>
 </style>

below is my bottom sheet layout.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:id="@+id/background"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/transparent"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <LinearLayout
        android:id="@+id/dialog_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="@drawable/bottom_sheet_background"
        android:padding="10dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/ic_baseline_arrow_drop_down_24" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/between_two_views">

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/search_wrapper"
                style="@style/textInputHint"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/search_employees">

                <EditText
                    android:id="@+id/search"
                    style="@style/textInputText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </com.google.android.material.textfield.TextInputLayout>

            <ImageButton
                android:id="@+id/close_search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginTop="15dp"
                android:background="@null"
                android:src="@drawable/ic_baseline_close_24"
                android:text="Button" />

        </RelativeLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/employee_recycler"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/between_two_views"/>

    </LinearLayout>

</LinearLayout>

Below is my rounded corner drawable

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

I'm not sure, but setting the style before `super.onCreate` might help, set it to null or something rather than material theme — Amin, Dec 17 '21 at 18:13
I'm currently on my phone and it's a bit hard to type, but check [this](https://stackoverflow.com/questions/37104960/bottomsheetdialog-with-transparent-background) question. The answer shows how to set style — Amin, Dec 17 '21 at 18:23
setStyle() is only for the BottomSheetDialogFragment not for the BottomSheetDialog — ISHAN KALANSOORIYA, Dec 17 '21 at 18:25

Zain · Accepted Answer · 2021-12-17T19:08:50.560

5

To solve this, you need a transparent background color in your dialog style (BottomSheetDialogStyle):

<item name="android:colorBackground">@android:color/transparent</item>

edited Dec 17 '21 at 19:08

answered Dec 17 '21 at 18:58

Zain

37,492
7
60
84

score 0 · Answer 2 · answered Dec 18 '21 at 05:34

 <style name="BottomSheetStyle" parent="Theme.Design.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/Model</item>
</style>

<style name="Model" parent="Widget.Design.BottomNavigationView">
    <item name="background">@drawable/bottom_sheet_layout</item>
</style>

score -1 · Answer 3 · answered Dec 17 '21 at 19:02

I found out the answer after hours of searching. i only needed to use below style

  <style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="android:windowIsFloating">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowSoftInputMode">adjustResize</item>
        <item name="bottomSheetStyle">@style/AppModalStyle</item>
    </style>

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

BottomSheetDialog not rounding top corners correctly in Android

3 Answers3