Canto redondo para BottomSheetDialogFragment

104

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

Rasool Gana
fonte
5
@RasoolGhana - Dê uma olhada neste link: medium.com/halcyon-mobile/…
Mohit Charadva

Respostas:

215

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.

javiCabanas
fonte
1
Funciona para mim. Também percebi que depende do elemento raiz do layout. Primeiramente eu tinha o Cardview como root (porque eu tentei outra maneira de arredondar os cantos), então mudei para o layout linear e agora funciona perfeitamente
Ivan Shafran
1
Falhas na API do Android 17
Morteza Rastgoo
1
Eu não usaria rounded_dialog& AppModalStylenomes com um plano de fundo onde apenas os cantos superiores são arredondados, como você esperaria usar esse plano de fundo com um estilo de folha inferior. Que tal bottomsheet_rounded_background&AppBottomSheetStyle
hmac
2
Observe que se você especificar um plano de fundo na visualização raiz, isso substituirá esta configuração
hmac
1
Isso pode ser feito sem usar um tema? Quando eu o uso Theme.AppCompat.Light.NoActionBar, faz com que todos os meus componentes da IU mudem de cor e não consigo substituí-los
Code Wiget
69

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>

insira a descrição da imagem aqui


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;
  }
Gabriele Mariotti
fonte
2
@GabrieleMariotti usando essa técnica, se eu tocar em algum lugar da folha e ela não for descartada, os cantos se animam. Não tenho certeza se você desenvolve nos componentes materiais do Android, mas se sim, você sabia desse problema? Eu estava usando 1.1.0-alpha10, mas também verifiquei o beta2. Não tenho certeza se depende das visualizações exatas que coloquei na folha ou não.
androidguy
1
Eu relatei este problema: issuetracker.google.com/issues/144859239 Se alguém tiver mais descobertas ou soluções para o problema, responda. Obrigado!
androidguy
3
Estou recebendo este erro e travamento em v1.1.0-beta02Could not inflate Behavior subclass com.google.android.material.bottomsheet.BottomSheetBehavior
hkchakladar
3
Não funciona se a caixa de diálogo da folha inferior for expandida. Qualquer ideia?
José Carlos
3
Esta foi a resposta perfeita e mais recente. Preciso marcar isso como resposta
Vikas Acharya
34

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();
Badr
fonte
1
Melhor do que a resposta aceita, porque desta forma você pode ter diferentes origens em diferentes BottomSheetDialogs
Lucas
Agora a curva é visível, mas uma cor transparente em toda a tela ao toque, apenas a cor branca na caixa de diálogo inferior é visível. @Badr alguma correção?
Arnold Brown
26

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

      ...
    }
Zhimin
fonte
Seria útil adicionar alguns esclarecimentos junto com o código.
UditS de
Este é o lugar certo para definir o tema para Fragments.
DYS
9

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.

Benjamin Ledet
fonte
Em comparação com outras, é uma solução muito melhor, porque a maior parte da solução que existe é
baseada
1
Parece legal. Isso também se aplica a BottomSheetDialog?
Jaden Gu
8

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.

Aashish Bhatnagar
fonte
A única maneira de fazer isso funcionar. A propósito, estou usando BottomSheetDialogFragmentpara que a lógica esteja no onCreateDialogmétodo
Kirill Starostin
8

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));
Variag
fonte
Essa deve ser a solução certa porque funciona para todos os DialogFragments sem pular obstáculos.
jssingh
3
Para mim, ainda existem cantos brancos atrás dos meus cantos arredondados. Portanto, quando eu mudo a cor do meu drawable para vermelho, seu código funciona corretamente e cria um retângulo vermelho arredondado, mas atrás dele ainda há um retângulo branco padrão. O código "dialog.getWindow (). SetBackgroundDrawable ..." que você escreveu muda a cor de toda a área "escurecida" acima da minha caixa de diálogo, mas, novamente, ele perde esses dois cantinhos. Você sabe o que pode estar causando esse problema?
Nick Dev
Acrescentando ao meu comentário acima, devo observar que tive que alterar o código em onCreateView () para " getDialog () .getWindow () ..." para que meu código fosse executado. Talvez seja por isso que não funciona para mim.
Nick Dev
1
@NickDev Poste uma nova pergunta se você acha que esta solução não se aplica ao seu código e talvez possamos encontrar uma solução.
Variag
@Variag Obrigado por entrar em contato; Na verdade, eu criei uma solução alternativa barata, em que cubro a caixa de diálogo modal da folha inferior padrão com um retângulo que é da mesma cor da área escurecida atrás dele. Em seguida, adicionei um segundo retângulo com cantos arredondados em cima dele. Não é ideal, mas parece ótimo! Agradeço a ajuda, no entanto.
Nick Dev
4

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

DuDu
fonte
4
  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)
        }
    
    } 
Mini Chip
fonte
1

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

DalveerSinghDaiya
fonte
Qual visualização você usa com setMargins?
tmm1
FrameLayout bottomSheet; Este definido no método setDialogBorder (). Na verdade, esta é a visualização padrão para a caixa de diálogo da página inferior no Android. Vai funcionar bem.
DalveerSinghDaiya
1

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.

Abhijeetviswa
fonte
1

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;
}
Mohamad
fonte
0

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

gaurav jain
fonte
0

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);
Darshna Desai
fonte
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
}
Atul
fonte
0

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.

Indra As Lesmana
fonte