Creating Custom Bottom Sheet Dialog

BottomSheet dialog is a beautiful view of the android application.
mostly bottom sheet dialog is used to show some content which can be a swipe up and down.


Here you can check how to implement custom bottom dialog.




1- Create an android project
2- Do the following changes in your style.xml under res.

res->style.xml

download full source code of the custom bottom dialog sheet.
Github Link

<style name="CustomBottomSheetDialogTheme" 
 parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">
@style/CustomBottomSheetStyle</item>
</style>

<style name="CustomBottomSheetStyle"
 parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">
@android:color/transparent</item>
</style>

3- create a blank fragment and extend it with BottomSheetDialogFragment

FilterBottomfragment extends BottomSheetDialogFragment

4- inflate your custom layout within fragment like this

@Override
public View onCreateView(@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {

//inflate your custom layout in place of bottom_dialog
View view=inflater.inflate(R.layout.bottom_dialog,container,false);
return view;
}

5- apply the style in fragment's onCreate() like this

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(BottomSheetDialogFragment.STYLE_NORMAL,
    R.style.CustomBottomSheetDialogTheme);
}

6- open the dialog on clicking of a button or on any event

btnOpenDialog.setOnClickListener(new View.OnClickListener()
 {
    @Override
public void onClick(View v) {
FilterBottomfragment filterBottomFragment = new FilterBottomfragment();
//set filterBottomFragment.setCancelable(true)
//if you want to cancel on touch out side;
        filterBottomFragment.setCancelable(true);
//filterBottomFragment.setFilterTagClickListener(this);
filterBottomFragment.setCancelable(true);
filterBottomFragment.show(getSupportFragmentManager(),
filterBottomFragment.getTag());
}
});

No comments:

Post a comment