CODEWITHSUNDEEP
androidbottom-sheet
Morteza Rastgoo
Morteza Rastgoo

Reputation: 6986

Round corner for BottomSheetDialogFragment Not working on API <21

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

enter image description here

But in Api < 21 it removes the background and the rounded background goes away. enter image description here 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.

Upvotes: 3

Views: 13598

Answers (3)

ak93
ak93

Reputation: 1309

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.

Upvotes: 1

Brahma Datta
Brahma Datta

Reputation: 1112

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.

Upvotes: 8

Morteza Rastgoo
Morteza Rastgoo

Reputation: 6986

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)
            }
        })

Upvotes: 3

Related Questions