androidkotlinbottomsheetdialogfragment

BottomSheetDialogFragment In Tablet Landscape


It is possible to change the width of a BottomSheetDialogFragment (material design) width? In tablet landscape mode, the width is match_parent. Thank you


Solution

  • Bottom sheets look great on phones. But when putting them on tablets, they feel stretched out, especially in landscape mode. It’s due to the high ratio between peek height vs full tablet width. Details matter, and we want our tablet users as happy as phone users. Let’s customize bottom sheet width for tablets.

    values-w820dp/dimens.xml

    <resources>
      <dimen name="bottom_sheet_width">600dp</dimen>
    </resources>
    

    Fragment File

    public class PopupSettingsFragment extends AppCompatDialogFragment {
      ...
    
      @Override
      public Dialog onCreateDialog(Bundle savedInstanceState) {
        return new CustomWidthBottomSheetDialog(getActivity(), getTheme());
      }
    
      static class CustomWidthBottomSheetDialog extends BottomSheetDialog {
        public CustomWidthBottomSheetDialog(@NonNull Context context, @StyleRes int theme) {
          super(context, theme);
        }
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          int width = getContext().getResources().getDimensionPixelSize(R.dimen.bottom_sheet_width);
          getWindow().setLayout(width > 0 ? width : ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT);
        }
      }
    }
    

    Source