Canto redondo para BottomSheetDialogFragment

eu tenho um BttomSheetDialogFragment personalizado e quero ter cantos arredondados na parte superior da vista inferior

esta é minha classe personalizada que inflando meu layout que eu quero que apareça de baixo

View mView;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    mView = inflater.inflate(R.layout.charge_layout, container, false);
    initChargeLayoutViews();
    return mView;
}

e também tenho este arquivo de recurso xml como plano de fundo:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners android:topRightRadius="35dp"
    android:topLeftRadius="35dp"
    />
<solid android:color="@color/white"/>

<padding android:top="10dp"
    android:bottom="10dp"
    android:right="16dp"
    android:left="16dp"/>

mas o problema é que, quando eu defino este arquivo de recurso como plano de fundo do elemento raiz do meu Layout, os cantos ainda não são arredondados

e eu não posso usar o código abaixo:

    this.getDialog().getWindow().setBackgroundDrawableResource(R.drawable.charge_layout_background);

porque seu plano de fundo padrão de substituição de BottomSheetDialog e não haverá qualquer cor cinza semitransparente acima de minha visualização inferior

Crie um drawable personalizado 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>

Em seguida, substituir bottomSheetDialogThemeem styles.xmlutilizando o drawable como pano de fundo:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">       
    <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>

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

<style name="AppModalStyle"
    parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@drawable/rounded_dialog</item>
</style>

Isso mudará todos os BottomSheetDialogs do seu aplicativo.

Com a nova biblioteca de componentes de materiais, você pode personalizar a forma de seu componente usando o shapeAppearanceOverlayatributo em seu estilo ( Nota: requer a versão 1.1.0 )

Basta usar a BottomSheetDialogFragmentsubstituição do onCreateViewmétodo e definir seu estilo personalizado para Diálogos de Folha Inferior.

Defina o bottomSheetDialogThemeatributo no styles.xmltema do seu aplicativo:

  <!-- 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>

Em seguida, basta definir sua forma favorita com 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>

Você pode obter o mesmo comportamento substituindo este método no seu BottomSheetDialogFragment(em vez de adicionar o bottomSheetDialogThemeno tema do seu aplicativo):

@Override public int getTheme() {
    return R.style.CustomBottomSheetDialog;
  }

Nesse caso, você está usando este themeOverlay apenas no único BottomSheetDialogFragmente não em todos os aplicativos.

Nota importante sobre o ESTADO EXPANDIDO :

No estado expandido, BottomSheet tem cantos planos . Você pode verificar o comentário oficial no repo do github :

Nossa equipe de design tem uma forte opinião de que cantos arredondados indicam conteúdo rolável, enquanto cantos planos indicam que não há conteúdo adicional. Como tal, eles não querem que adicionemos essa alteração com fitToContents.

Este comportamento é fornecido pelo BottomSheetBehaviore é impossível substituí-lo.
No entanto, há uma solução alternativa -> AVISO LEGAL: pode parar de funcionar nas próximas versões !!

Você pode adicionar um BottomSheetCallbackno 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;
  }

O BottomSheetDialogestá configurando uma cor de fundo branca padrão, é por isso que os cantos não são visíveis. Para mostrá-los, você precisa tornar o fundo da caixa de diálogo transparente, substituindo o estilo do BottomSheetDialog.

Defina este estilo em seu res/values/styles/styles.xml

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

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

E defina este estilo para o seu BottomSheetDialog

View view = getLayoutInflater().inflate(R.layout.chooser_bottom_sheet, null);
BottomSheetDialog dialog = new BottomSheetDialog(this,R.style.BottomSheetDialog); // Style here
dialog.setContentView(view);
dialog.show();

crie uma forma chamada rounded_corners_shape

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp"/>
    <solid android:color="@color/white"/>

</shape>

definir um estilo

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

    <style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/rounded_corners_shape</item>
    </style>

use este estilo em seu BottomSheetDialogFragment personalizado assim, vai funcionar!

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

      ...
    }

Se você usar a última versão do componente de material, você apenas tem que substituir ShapeAppearance.MaterialComponents.LargeComponent(já que a folha inferior usa esta forma) e definir o valor que deseja, como:

 <style name="ShapeAppearance.YourApp.LargeComponent" parent="ShapeAppearance.MaterialComponents.LargeComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">12dp</item>
 </style>

E, em seguida, defina o estilo do seu aplicativo:

<item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.YourApp.LargeComponent</item>

A solução de Gabriele Mariotti é semelhante e funciona também, mas esta é mais simples.

Eu estava verificando a mesma coisa hoje e sim, você estava certo sobre seguir o código

this.getDialog().getWindow().setBackgroundDrawableResource(R.drawable.charge_layout_background);

isso se aplica ao fundo do fragmento, então, em vez disso, você deve obter a visualização da folha inferior na janela de diálogo e alterar o fundo aqui está o código

 @SuppressLint("RestrictedApi")
    @Override
    public void setupDialog(Dialog dialog, int style) {
        super.setupDialog(dialog, style);
        View rootView = getActivity().getLayoutInflater().inflate(R.layout.view_member_info,null,false);
        unbinder = ButterKnife.bind(this, rootView);
        adjustUIComponents();
        dialog.setContentView(rootView);
        FrameLayout bottomSheet = (FrameLayout) dialog.getWindow().findViewById(android.support.design.R.id.design_bottom_sheet);
        bottomSheet.setBackgroundResource(R.drawable.container_background);
    }

aqui, a folha de fundo é a visualização real que você deseja alterar.

A resposta de Koma Yip a partir de outra pergunta funcionou para mim, você deveria tentar.

Crie um xml em drawable, digamos dialog_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <corners android:radius="30dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

coloque isso no nó raiz xml do layout:

defina-o como plano de fundo em seu layout xml

android:background="@drawable/dialog_bg"

e onCreateView()colocar isto:

defina o fundo da sua caixa de diálogo para transparente

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

Esta resposta é apenas para a questão de definir a cor de fundo Color.TRANSPARENTapós configurar um drawable com fundo arredondado para o layout.

Nenhuma das respostas funcionou para mim definir a cor de fundo, Color.TRANSPARENTexceto a setupDialog()solução de substituição :

@Override
public void setupDialog(Dialog dialog, int style) {
    super.setupDialog(dialog, style);
    View contentView = View.inflate(getContext(), 
R.layout.fragment_bottom_sheet, null);
    dialog.setContentView(contentView);
    ...
    ((View) contentView.getParent()).setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));
}

MAS o que contentViewvocê definiu para o diálogo aqui não é o que viewvocê obtém onViewCreated()ao inflar onCreateView(). Isso quebra o fluxo padrão, então pode causar problemas como você não pode usar View Bindings- Kotlin Android ExtensionsemonViewCreated()

Então, eu ajusto um pouco para definir o plano de fundo em onActivityCreated():

override fun onActivityCreated(savedInstanceState: Bundle?) {
    super.onActivityCreated(savedInstanceState)
    (view?.parent as View).setBackgroundColor(Color.TRANSPARENT)
  }

Espero que essa ajuda tenha o mesmo problema

1. Crie um desenho de forma ... que usaremos como plano de fundo para a folha inferior. Forneça o valor apropriado para o raio do canto superior esquerdo e direito.

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <corners
           android:topLeftRadius="24dp"
           android:topRightRadius="24dp" />
       <padding android:top="2dp" />
       <solid android:color="@color/white" />
   </shape>

2. Agora crie um estilo para "Fragmento de diálogo de folha inferior"

   <style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
           <item name="android:background">@drawable/drawable_bottomsheet_background</item>
       </style>
   
       <style name="BaseBottomSheetDialog" parent="@style/Theme.Design.Light.BottomSheetDialog">
           <item name="android:windowIsFloating">false</item>
           <item name="bottomSheetStyle">@style/BottomSheet</item>
       </style>
   
       <style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />

3. Agora crie uma classe personalizada que estenderá BottomSheetDilogFragment, onde você fornece seu estilo.

   open class CustomRoundBottomSheet : BottomSheetDialogFragment() {
   
       override fun getTheme(): Int = R.style.BottomSheetDialogTheme
   
       override fun onCreateDialog(savedInstanceState: Bundle?): Dialog = BottomSheetDialog(requireContext(), theme)
   
   }

4. Agora use esta classe onde você quiser ter uma folha inferior com canto arredondado. por exemplo

   class BottomSheetSuccess : CustomRoundBottomSheet() {
   
       override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
           return inflater.inflate(R.layout.bottomsheet_shopcreate_success, container, false)
       }
   
   
       override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
           super.onViewCreated(view, savedInstanceState)
       }
   
   } 

Adicione esses dois métodos em sua classe BottomsheetDialogFragment.

public void setDialogBorder(Dialog dialog) {
        FrameLayout bottomSheet = (FrameLayout) dialog.getWindow().findViewById(android.support.design.R.id.design_bottom_sheet);
        bottomSheet.setBackground(new ColorDrawable(Color.TRANSPARENT));
        setMargins(bottomSheet, 10, 0, 10, 20);
    }

    private void setMargins(View view, int left, int top, int right, int bottom) {
        if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
            ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
            p.setMargins(left, top, right, bottom);
            view.requestLayout();
        }
    }

Agora chame o setDialogBorder(dialog)método no setupDialog()método de sua classe BottomsheetDialogFragment.

Agora crie um arquivo de forma em sua pasta drawable.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp" />

    <solid android:color="@color/white" />
    <stroke
        android:width="1dp"
        android:color="@color/transparent" />
</shape>

Agora defina o plano de fundo para a visualização da caixa de diálogo do grupo de visualização pai no arquivo xml.

android:background="@drawable/round_border_white"

Feito!!

Eu sei que esta pergunta já tem uma resposta aceita. Gostaria de documentar os problemas pelos quais passei e como finalmente consegui fazer funcionar, para que seja útil para alguém no futuro.

Em primeiro lugar, eu estava usando Theme.AppCompat.Light.DarkActionBarcomo pai para o nosso AppTheme. Isso significava que a solução @Gabriele Mariotti continuava travando com o erro Could not inflate Behavior subclass com.google.android.material.bottomsheet.BottomSheetBehavior. Consertei isso simplesmente mudando o pai para Theme.MaterialComponents.Light.DarkActionBar. Isso não afetou nosso tema de forma alguma, mas o RTE tinha acabado. Você também pode corrigir esse problema simplesmente incluindo os itens necessários ao seu estilo. Mas não me incomodei em descobrir quais estilos eram exigidos por BottomSheetBehavior.

Em segundo lugar, tente como eu poderia, mas não consegui obter o layout real do Frame (que era o BottomSheetDialogFragment) usado para ter cantos arredondados. Percebi que definir isso para uma imagem Drawable funcionou, mas não com uma forma ou a @null. Acontece que era porque o que LinearLayouteu estava usando tinha um fundo definido. Isso estava substituindo qualquer pano de fundo no estilo. Removendo isso finalmente resultou em cantos arredondados.

Além disso, não exigi que nenhuma forma de fundo fosse definida para arredondar os cantos. A solução da @Gabriele Mariotti funcionou assim que fiz as alterações acima. No entanto, para definir a cor de fundo como eu queria, tive que substituir o item "backgroundTint".

PS: Eu sou novo no Android dev e estou mantendo um aplicativo antigo que foi feito para uso interno em nossa faculdade. Não estou muito familiarizado com o sistema de layout do Android ou com a biblioteca de materiais. Acho que é por isso que demorei 3 dias para descobrir isso. Espero que isso seja útil para alguém no futuro.

Funcionou para mim

crie uma forma chamada shape_rounded_dialog

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/color_white" />
<corners
    android:topLeftRadius="16dp"
    android:topRightRadius="16dp" />

adicione os estilos abaixo

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

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

Na classe DialogFragment, a substituição do método getTheme também retorna o estilo Yourself.

@Override
public int getTheme() {
    return R.style.AppBottomSheetDialogTheme;
}

Outra maneira de corrigir esse problema é estender BottomSheetDialog e criar uma classe personalizada que atenda às suas necessidades. Você pode fazer o mesmo para o arquivo xml de layout e adicionar plano de fundo ou quaisquer outras personalizações necessárias. Isso também tem a vantagem de você não depender dos nomes de id usados ​​pelo Android (android.support.design.R.id.design_bottom_sheet), enquanto altera o plano de fundo (embora a alteração do nome de id raramente aconteça AFAIK).

Crie um drawable personalizado com canto arredondado e defina-o como plano de fundo da raiz do layout de BottomSheetDialogFragment

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<solid android:color="@color/colorPrimary" />

<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    android:topLeftRadius="12dp"
    android:topRightRadius="12dp" />

</shape>

Em seguida, basta adicionar o código abaixo à sua classe BottomSheetDialogFragment

@Override
public void setupDialog(Dialog dialog, int style) {
    super.setupDialog(dialog, style);
    View contentView = View.inflate(getContext(), 
R.layout.fragment_bottom_sheet, null);
    dialog.setContentView(contentView);

    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent())
            .getLayoutParams();
    CoordinatorLayout.Behavior behavior = params.getBehavior();
    ((View) contentView.getParent()).setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));
}

Você pode até brincar com os parâmetros para definir a margem como abaixo

params.setMargins(50, 0, 50, 0);

Você deve alterar o bottom sheet themepara obter o layout da rodada superior

Crie um drawable background_bottom_sheet_dialog_fragment.xml personalizado:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
    <corners
       android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />
    <padding android:top="0dp" />
    <solid android:color="@color/white" />
</shape>

Em seguida, substitua bottomSheetDialogTheme em styles.xml usando o drawable como plano de fundo:

<!--Bottom sheet-->
<style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
    <item 
    name="android:background">@drawable/background_bottom_sheet_dialog_fragment
    </item>
</style>

<style name="BaseBottomSheetDialog" 
    parent="@style/Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
    <item name="bottomSheetStyle">@style/BottomSheet</item>
</style>

<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />

Isso mudará o layout de fundo de sua folha inferior

BottomSheetDialog

class SheetFragment() : BottomSheetDialogFragment() {

    lateinit var binding: SheetFragmentBinding;

  override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog;
    val view = View.inflate(context, R.layout.fragment_bottom_sheet, null);

    binding = DataBindingUtil.bind(view)!!;
    binding.viewModel = SheetFragmentVM();

    dialog.setContentView(view);

    var bottomSheetBehavior = BottomSheetBehavior.from(view.parent as View);
    bottomSheetBehavior.setPeekHeight(BottomSheetBehavior.PEEK_HEIGHT_AUTO);

    bottomSheetBehavior.setBottomSheetCallback(object : 
     BottomSheetBehavior.BottomSheetCallback() {
        override fun onStateChanged(bottomSheet: View, newState: Int) {
            if (BottomSheetBehavior.STATE_EXPANDED == newState) {
               // do on STATE_EXPANDED
            }
            if (BottomSheetBehavior.STATE_COLLAPSED == newState) {
                // do on STATE_COLLAPSED
            }

            if (BottomSheetBehavior.STATE_HIDDEN == newState) {
                dismiss()

            }
        }

        override fun onSlide(bottomSheet: View, slideOffset: Float) {
           // do on slide
        }
    })

    return dialog
}

adicionar forma com canto arredondado, torná-lo plano de fundo para seu layout de raiz

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
 <corners
    android:topLeftRadius="@dimen/padding_margin_16_dp"
    android:topRightRadius="@dimen/padding_margin_16_dp" />
 <solid android:color="@color/white" />
</shape>

tornar o fundo transparente em seu BottomSheetDialogFragment

override fun onActivityCreated(savedInstanceState: Bundle?) {
    super.onActivityCreated(savedInstanceState)
    (view?.parent as View).setBackgroundColor(Color.TRANSPARENT)
}

seu trabalho para Contraintlayout, Framelyaout, Linearlayout, Relativelayout.