Round corner for BottomSheetDialogFragment Not working on API <21

Question

I am using this solution to round corners of dialog in BottomSheetDialogFragment and it works fine with API 21 and higher

But in Api < 21 it removes the background and the rounded background goes away. How to make the background rounded in API < 21? If it is not possible to change the background, please help me change the background color instead.

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/193304/discussion-between-g-brahma-datta-and-morteza-rastgoo). — Brahma Datta, May 14 '19 at 06:33
@MortezaRastgoo below api 21 your default background color is different. That's the reason you are having an issue. Just set background color outside the card to some light grey and issue will be solved. — sanjeev, May 14 '19 at 06:44

score 8 · Accepted Answer · answered May 14 '19 at 07:24

Morteza I made the code which makes the BottomSheetDialog Fragment dialog round corner by the following code and I tested it in KitKat version mobile as well.

Bottom Sheet Dialog Class code

public class MyBottomSheetDialog extends BottomSheetDialogFragment {

String string;

static MyBottomSheetDialog newInstance(String string) {
    MyBottomSheetDialog f = new MyBottomSheetDialog();
    Bundle args = new Bundle();
    args.putString("string", string);
    f.setArguments(args);
    return f;
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    string = getArguments().getString("string");
    //bottom sheet round corners can be obtained but the while background appears to remove that we need to add this.
    setStyle(DialogFragment.STYLE_NO_FRAME,0);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.bottom_sheet_modal, container, false);
    TextView tv = (TextView) v.findViewById(R.id.text);

    //dialog cancel when touches outside (Optional)
    getDialog().setCanceledOnTouchOutside(true);
    return v;
}}

bottom_sheet_modal.xml

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/linearLayout"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
//adding background from drawable
android:background="@drawable/rounded_dialog">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center"
    android:gravity="center"
    android:weightSum="10"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp">


    <Button
        android:layout_width="0dp"
        android:layout_weight="5"
        android:layout_height="wrap_content"
        android:text="Buy"
        />

    <Button
        android:layout_width="0dp"
        android:layout_weight="5"
        android:layout_height="wrap_content"
        android:text="sell"
        />

</LinearLayout>
</LinearLayout>

rounded_dialog.xml

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

</shape>

MainActivity.java

public class MainActivity extends AppCompatActivity {

BottomSheetDialogFragment bottomSheetDialogFragment;
Button button;
LinearLayout linearLayout;

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

    bottomSheetDialogFragment = MyBottomSheetDialog.newInstance("Bottom Sheet Dialog");
    button = findViewById(R.id.button);



    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            bottomSheetDialogFragment.show(getSupportFragmentManager(),bottomSheetDialogFragment.getTag());
        }
    });

}
}

Try this and let me know @Morteza. Happy coding.

Adding that to the code made my Fragment non-dismissable when clicking outside the fragment. — OhhhThatVarun, Jun 27 '20 at 08:56

score 3 · Answer 2 · answered May 14 '19 at 07:18

Create a custom drawable rounded_dialog.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>

        view!!.getViewTreeObserver().addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                if (Build.VERSION.SDK_INT < 16) {
                    view!!.getViewTreeObserver().removeGlobalOnLayoutListener(this)
                } else {
                    view!!.getViewTreeObserver().removeOnGlobalLayoutListener(this)
                }
                val dialog = dialog as BottomSheetDialog?
                val bottomSheet =
                    dialog!!.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet) as FrameLayout?

                //Change background Image for all android versions below Api < 21
                bottomSheet!!.setBackgroundResource(R.drawable.rounded_dialog)
            }
        })

score 0 · Answer 3 · answered Dec 16 '21 at 13:47

The simplest and cleanest solution, that worked for me, was to put the following 3 lines in onViewCreated(View view, Bundle savedInstanceState) method of my fragment class:

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    View bottomSheet = (View) view.getParent();
    bottomSheet.setBackgroundTintMode(PorterDuff.Mode.CLEAR);
    bottomSheet.setBackgroundTintList(ColorStateList.valueOf(Color.TRANSPARENT));
    bottomSheet.setBackgroundColor(Color.TRANSPARENT);
}

This will allow for your custom drawable with rounded corners to be properly shown once set as the background of the top level view of your fragment layout.

In essence this overrides the default BottomSheetFragment attributes regarding color, tintMode and tintList.

Using this, there is no need for messing with style resources.

Round corner for BottomSheetDialogFragment Not working on API <21

3 Answers3