BottomSheetDialogFragmentの丸い角


114

カスタムのBttomSheetDialogFragmentがあり、底面図の上部に丸い角を付けたい

これは、下から表示したいレイアウトを膨らませるカスタムクラスです。

View mView;

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

また、このxmlリソースファイルを背景として持っています:

<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"/>

しかし、問題は、このリソースファイルをレイアウトのルート要素の背景として設定しても、角がまだ丸くないことです。

そして私は以下のコードを使用することはできません:

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

BottomSheetDialogのデフォルトの背景をオーバーライドすると、底面ビューの上に半透明の灰色が表示されなくなります。


5
@RasoolGhana -このリンクを見ている:medium.com/halcyon-mobile/...を
Mohit Charadva

回答:


236

カスタムドローアブルを作成します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>

次に、ドローアブルを背景として使用することをオーバーライドbottomSheetDialogThemeしますstyles.xml

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

これにより、アプリのすべてのBottomSheetDialogが変更されます。


2
わたしにはできる。また、レイアウトのルート要素に依存していることに気づきました。最初にルートとしてカードビューを使用し(角を丸める別の方法を試したため)、次にそれを線形レイアウトに変更しました。これで完全に機能します
IvanShafran18年

1
android api 17でクラッシュ
MortezaRastgoo19年

1
下のシートスタイルでそのような背景を使用することだけを期待するので、私は上部の角だけが丸みを帯びている背景のrounded_dialogAppModalStylenamesを使用しません。bottomsheet_rounded_backgroundAppBottomSheetStyle
hmac

3
ルートビューで背景を指定すると、この設定が上書きされることに注意してください
hmac

2
シートレイアウトのルート要素に背景がないことを確認してください。
MMK

81

新しいマテリアルコンポーネントライブラリを使用すると、スタイルの属性を使用してコンポーネントの形状カスタマイズできshapeAppearanceOverlayます(注:バージョン1.1.0が必要です)。

メソッドをBottomSheetDialogFragmentオーバーライドしてから、onCreateView下部シートダイアログのカスタムスタイルを定義するだけです。

アプリのテーマでbottomSheetDialogTheme属性を定義しますstyles.xml

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

次に、でお気に入りの形状を定義するだけです 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>

ここに画像の説明を入力してください


BottomSheetDialogFragmentbottomSheetDialogThemeアプリのテーマにを追加する代わりに)でこのメソッドをオーバーライドする同じ動作を取得できます。

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

この場合、このthemeOverlayは単一BottomSheetDialogFragmentのアプリでのみ使用しており、すべてのアプリで使用しているわけではありません。


拡張状態に関する重要な注意事項

展開された状態では、BottomSheetの角は平らです。あなたはgithubリポジトリで公式コメントをチェックすることができます:

私たちのデザインチームは、丸い角はスクロール可能なコンテンツを示し、平らな角は追加のコンテンツがないことを示していると強く考えています。そのため、fitToContentsでこの変更を追加することを望んでいません。

この動作はによって提供され、BottomSheetBehaviorオーバーライドすることはできません。
ただし、回避策があります->免責事項:次のリリースで動作を停止する可能性があります!!

あなたは追加することができますBottomSheetCallbackBottomSheetDialogFragment

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

2
@GabrieleMariottiは、この手法を使用して、シートのどこかをタップして、それが閉じられない場合、コーナーがアニメーション化されます。Androidのマテリアルコンポーネントで開発しているかどうかはわかりませんが、開発している場合は、この問題をご存知ですか?1.1.0-alpha10を使用していましたが、beta2もチェックしました。シートに入れた正確なビューに依存するかどうかはわかりません。
androidguy

1
この問題を報告しました:issuetracker.google.com/issues/144859239この問題についてさらに調査結果や解決策がある場合は、返信してください。ありがとう!
androidguy

4
このエラーが発生し、v1.1.0-beta02でクラッシュしますCould not inflate Behavior subclass com.google.android.material.bottomsheet.BottomSheetBehavior
hkchakladar

3
一番下のシートダイアログが展開されている場合は機能しません。何か案が?
ホセカルロス

4
これは完璧で最新の答えでした。私はこれを答えとしてマークする必要があります
Vikas Acharya

38

BottomSheetDialogコーナーが表示されていない理由を、デフォルトの白い背景色を設定され、これはあなたのスタイルをオーバーライドすることによって、ダイアログ透明の背景を作成する必要がそれらを表示するためには、ありますBottomSheetDialog

このスタイルをあなたの中で定義する 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>

そして、このスタイルを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();

2
受け入れられた答えよりも優れています。これにより、さまざまなBottomSheetDialogsでさまざまな背景を持つことができます
Luke

これで曲線が表示されますが、タッチすると画面全体の透明色が表示され、ダイアログ下部の白い色のみが表示されます@Badr修正はありますか?
アーノルドブラウン

それが私が探していた解決策であり、完全にハックフリーです。
Prateek Gupta

26

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>

スタイルを定義する

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

このようなカスタムBottomSheetDialogFragmentでこのスタイルを使用すると、機能します。

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

      ...
    }

コードと一緒に説明を追加すると便利です。
UditS

これは、のテーマを設定するのに適した場所Fragmentです。
DYS

10

マテリアルコンポーネントの最後のバージョンを使用する場合は、オーバーライドしてShapeAppearance.MaterialComponents.LargeComponent(一番下のシートがこの形状を使用するため)、必要な値を次のように設定する必要があります。

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

そして、アプリのスタイルを設定します。

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

Gabriele Mariottiのソリューションも同様で機能しますが、これはより単純です。


他のソリューションと比較すると、はるかに優れたソリューションです。これは、そこにあるソリューションのほとんどが、カスタム
ドローアブルの

1
いい感じ。これは適用されBottomSheetDialogますか?
Jaden Gu

1
すべての人への注意:この回答を使用ShapeAppearance.MaterialComponents.LargeComponentすると、ボトムシートだけでなく、を使用するすべてのコンポーネントのcornerSizeとファミリが同じになります。スタイル要件を確認し、すべてのコンポーネントの外観を変更するか、個々のコンポーネントまたはウィジェットのみを変更するかを決定します。
nitinkumarp

9

で回答狛イップから別の質問私のために働いた、あなたはそれを試してみてください。

ドローアブルでxmlを作成します。たとえば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>

これをレイアウトxmlルートノードに配置します。

レイアウトxmlの背景として設定します

android:background="@drawable/dialog_bg"

そしてonCreateView()これを入れて:

ダイアログの背景を透明に設定します

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

これは、フープを飛び越えずにすべてのDialogFragmentsで機能するため、適切なソリューションになるはずです。
jssingh 2018

3
私にとって、丸い角の後ろにはまだ白い角があります。したがって、ドローアブルの色を赤に変更すると、コードは正しく機能し、丸みを帯びた赤い長方形が作成されますが、その後ろにはデフォルトの白い長方形が残っています。「dialog.getWindow()。setBackgroundDrawableは...」コード変更内容に私のダイアログの上の領域「暗く」全体の色を書いたが、再び、それはこれら二つの小さなコーナーをミス。この問題の原因を知っていますか?
Nick Dev

上記のコメントに加えて、コードを実行するには、onCreateView()のコードをgetDialog()。 getWindow()...」に変更する必要があることに注意してください。おそらくこれが私にとってうまくいかない理由です。
Nick Dev

1
@NickDevこの解決策がコードに当てはまらないと思われる場合は、新しい質問を投稿してください。解決策が見つかるかもしれません。
Variag 2018

@Variagお問い合わせいただきありがとうございます。私は実際に、デフォルトの下部シートのモーダルダイアログを、その背後の暗い領域と同じ色の長方形で覆うという安価な回避策を思いつきました。次に、その上に角が丸い2番目の長方形を追加しました。理想的ではありませんが、見栄えがします。それでも私は助けに感謝します。
Nick Dev 2018年

8

私は今日同じことをチェックしていました、そしてはい、あなたはコードに従うことについて正しかったです

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

これはフラグメントの背景に適用されるため、代わりにダイアログウィンドウからボトムシートビューを取得し、背景を変更する必要があります。ここにコードがあります

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

ここのボトムシートは、変更したい実際のビューです。


私がこれを機能させる唯一の方法。ところでBottomSheetDialogFragment、ロジックがonCreateDialogメソッドに含まれるように使用しています
KirillStarostin19年

6
  1. 下のシートの背景として使用するシェイプドローアブルを作成します。左上隅と右上隅の半径に適切な値を指定します。

    <?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. 次に、「ボトムシートダイアログフラグメント」のスタイルを作成します

    <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. 次に、スタイルを指定するBottomSheetDilogFragmentを拡張するカスタムクラスを作成します。

    open class CustomRoundBottomSheet : BottomSheetDialogFragment() {
    
        override fun getTheme(): Int = R.style.BottomSheetDialogTheme
    
        override fun onCreateDialog(savedInstanceState: Bundle?): Dialog = BottomSheetDialog(requireContext(), theme)
    
    }
    
  4. ここで、丸い角のボトムシートが必要な場所でこのクラスを使用します。例えば

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

5

それは私のために働いた

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" />

以下のスタイルを追加

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

DialogFragmentクラスでは、メソッドオーバーライドgetThemeもYourselfスタイルを返します。

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

4

この回答はColor.TRANSPARENT、レイアウトに丸みを帯びた背景を持つドローアブルを設定した後、背景色をに設定する問題のみを対象としています。

解決策Color.TRANSPARENTを上書きする以外は、背景色をに設定するための答えはありませんでしたsetupDialog()

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

ただしcontentViewここでダイアログに設定したのは、で膨らませたときにview入るものではありません。それはあなたが使用することはできませんのようなので、トラブルを発行することができる、標準の流れを壊す-にonViewCreated()onCreateView()View BindingsKotlin Android ExtensionsonViewCreated()

だから私は背景を設定するために少し調整しますonActivityCreated()

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

同じ問題を抱えたこの助けを願っています


2

私はこの質問がすでに受け入れられた答えを持っていることを知っています。私が経験した問題と、それが最終的にどのように機能するようになったのかを文書化して、将来の誰かに役立つようにしたいと思います。

まず、私はTheme.AppCompat.Light.DarkActionBarの親として使用していましたAppTheme。これは、@ GabrieleMariottiソリューションがエラーでクラッシュし続けることを意味しましたCould not inflate Behavior subclass com.google.android.material.bottomsheet.BottomSheetBehavior。親をに変更するだけでこれを修正しましたTheme.MaterialComponents.Light.DarkActionBar。これは私たちのテーマにはまったく影響しませんでしたが、RTEはなくなりました。必要なアイテムをスタイルに含めるだけで、この問題を修正することもできます。しかし、BottomSheetBehaviorに必要なスタイルをわざわざ理解することはしませんでした。

次に、できる限り試してみますが、実際のフレームレイアウト(BottomSheetDialogFragmentでした)が丸い角を持つために使用するものを取得できませんでした。これを画像Drawableに設定しても機能するが、図形や@null。では機能しないことに気づきました。結局、LinearLayout私が使っていたのは背景が定義されていたからです。これは、スタイルの背景を上書きしていました。それを取り除くと、最終的に角が丸くなりました。

また、角を丸くするために背景の形を設定する必要はありませんでした。@Gabriele Mariottiのソリューションは、上記の変更を加えるとすぐに機能しました。ただし、背景色を希望どおりに設定するには、「backgroundTint」項目をオーバーライドする必要がありました。

PS:私はAndroid開発に不慣れで、私たちの大学で内部使用するために作られた古いアプリを維持しています。私はAndroidのレイアウトシステムやマテリアルライブラリにそれほど精通していません。それが私がこれを理解するのに3日かかった理由だと思います。これが将来誰かに役立つことを願っています。


1

これらの2つのメソッドを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();
        }
    }

次に、BottomsheetDialogFragmentクラスのsetDialogBorder(dialog)メソッドでsetupDialog()メソッドを呼び出します。

次に、ドローアブルフォルダにシェープファイルを作成します。

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

次に、xmlファイルで親ビューグループダイアログビューの背景を設定します。

android:background="@drawable/round_border_white"

完了!!


setMarginsでどのビューを使用しますか?
tmm1 2018

FrameLayout bottomSheet; これはsetDialogBorder()メソッドで定義されています。これは実際には、Androidの下部シートダイアログのデフォルトビューです。それはうまくいくでしょう。
DalveerSinghDaiya 2018

0

この問題を修正する別の方法は、BottomSheetDialogを拡張し、ニーズに合ったカスタムクラスを作成することです。レイアウトxmlファイルについても同じことを行い、背景やその他の必要なカスタマイズを追加できます。これには、背景を変更するときにAndroid(android.support.design.R.id.design_bottom_sheet)で使用されるID名に依存しないという利点もあります(ただし、ID名の変更がAFAIKで発生することはめったにありません)。


0

角が丸いカスタムドローアブルを作成し、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>

次に、以下のコードを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));
}

以下のようにマージンを設定するためにパラメータで遊ぶこともできます

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

0

bottom sheet themeトップラウンドレイアウトを実現するには、を変更する必要があります

カスタムドローアブルbackground_bottom_sheet_dialog_fragment.xmlを作成します。

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

次に、ドローアブルを背景として使用して、styles.xmlのbottomSheetDialogThemeをオーバーライドします。

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

これにより、ボトムシートの背景レイアウトが変更されます

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
}

0

角が丸い形状を追加し、ルートレイアウトの背景にします

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

BottomSheetDialogFragmentの背景を透明にします

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

Contraintlayout、Framelyaout、Linearlayout、Relativelayoutでの作業。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.