Mit der neuen Materialkomponentenbibliothek können Sie die Form Ihrer Komponente mithilfe des shapeAppearanceOverlay
Attributs in Ihrem Stil anpassen ( Hinweis: Es ist die Version 1.1.0 erforderlich ).
Verwenden Sie einfach das BottomSheetDialogFragment
Überschreiben der onCreateView
Methode und definieren Sie dann Ihren benutzerdefinierten Stil für Bottom Sheet-Dialoge.
Definieren Sie das bottomSheetDialogTheme
Attribut styles.xml
in Ihrem App-Thema:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
....
<item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialog</item>
</style>
Dann definieren Sie einfach Ihre Lieblingsform mit shapeAppearanceOverlay
<style name="CustomBottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">@style/CustomBottomSheet</item>
</style>
<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
</style>
<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
Sie können dasselbe Verhalten erzielen, das diese Methode in Ihrem überschreibt BottomSheetDialogFragment
(anstatt das bottomSheetDialogTheme
in Ihrem App-Design hinzuzufügen ):
@Override public int getTheme() {
return R.style.CustomBottomSheetDialog;
}
In diesem Fall verwenden Sie dieses themeOverlay nur in der einzelnen BottomSheetDialogFragment
und nicht in der gesamten App.
Wichtiger Hinweis zum ERWEITERTEN STAAT :
Im erweiterten Zustand hat das BottomSheet flache Ecken . Sie können den offiziellen Kommentar in Github Repo überprüfen :
Unser Designteam ist der festen Überzeugung, dass abgerundete Ecken auf scrollbaren Inhalt hinweisen, während flache Ecken darauf hinweisen, dass kein zusätzlicher Inhalt vorhanden ist. Daher möchten sie nicht, dass wir diese Änderung mit fitToContents hinzufügen.
Dieses Verhalten wird von der bereitgestellt BottomSheetBehavior
und kann nicht überschrieben werden.
Es gibt jedoch eine Problemumgehung -> HAFTUNGSAUSSCHLUSS: Es kann in den nächsten Versionen nicht mehr funktionieren !!
Sie können ein hinzufügen BottomSheetCallback
in BottomSheetDialogFragment
:
@NonNull @Override public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
Dialog dialog = super.onCreateDialog(savedInstanceState);
((BottomSheetDialog)dialog).getBehavior().addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_EXPANDED) {
//In the EXPANDED STATE apply a new MaterialShapeDrawable with rounded cornes
MaterialShapeDrawable newMaterialShapeDrawable = createMaterialShapeDrawable(bottomSheet);
ViewCompat.setBackground(bottomSheet, newMaterialShapeDrawable);
}
}
@Override public void onSlide(@NonNull View bottomSheet, float slideOffset) {
}
});
return dialog;
}
@NotNull private MaterialShapeDrawable createMaterialShapeDrawable(@NonNull View bottomSheet) {
ShapeAppearanceModel shapeAppearanceModel =
//Create a ShapeAppearanceModel with the same shapeAppearanceOverlay used in the style
ShapeAppearanceModel.builder(getContext(), 0, R.style.CustomShapeAppearanceBottomSheetDialog)
.build();
//Create a new MaterialShapeDrawable (you can't use the original MaterialShapeDrawable in the BottoSheet)
MaterialShapeDrawable currentMaterialShapeDrawable = (MaterialShapeDrawable) bottomSheet.getBackground();
MaterialShapeDrawable newMaterialShapeDrawable = new MaterialShapeDrawable((shapeAppearanceModel));
//Copy the attributes in the new MaterialShapeDrawable
newMaterialShapeDrawable.initializeElevationOverlay(getContext());
newMaterialShapeDrawable.setFillColor(currentMaterialShapeDrawable.getFillColor());
newMaterialShapeDrawable.setTintList(currentMaterialShapeDrawable.getTintList());
newMaterialShapeDrawable.setElevation(currentMaterialShapeDrawable.getElevation());
newMaterialShapeDrawable.setStrokeWidth(currentMaterialShapeDrawable.getStrokeWidth());
newMaterialShapeDrawable.setStrokeColor(currentMaterialShapeDrawable.getStrokeColor());
return newMaterialShapeDrawable;
}