Круглый угол для BottomSheetDialogFragment

У меня есть пользовательский 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"/>

но проблема в том, что когда я устанавливаю этот файл ресурсов в качестве фона моего корневого элемента Layout, углы все еще не округлены

и я не могу использовать ниже код:

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

потому что его переопределяет фоновый фон BottomSheetDialog, и не будет какого-либо полупрозрачного серого цвета над моим представлением снизу

Ответы

Ответ 1

Создайте пользовательский 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 используя bottomSheetDialogTheme в качестве фона:

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

Это изменит все дескрипторы BottomSheet вашего приложения.

Ответ 2

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

Ответ 3

Я проверял то же самое сегодня, и да, вы были правы в следующем коде

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

здесь Bottomsheet - это фактический вид, который вы хотите изменить.

Ответ 4

Отвечать Koma Yip из другого вопроса, который работал на меня, вы должны попробовать.

Создайте xml в drawable, скажем, 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));

Ответ 5

создать фигуру с именем 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);
      }

      ...
    }

Ответ 6

С новой библиотекой Material Component вы можете настроить форму вашего компонента, используя атрибут shapeAppearanceOverlay в своем стиле.

Просто используйте 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>

enter image description here

Ответ 7

Добавьте эти два метода в класс 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();
        }
    }

Теперь вызовите setDialogBorder(dialog) методе setupDialog() вашего класса BottomsheetDialogFragment.

Теперь создайте файл формы в вашей папке с рисунком.

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

Готово!!

Ответ 8

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

}

Ответ 9

Еще один способ исправить эту проблему - расширить BottomSheetDialog и создать пользовательский класс, который соответствует вашим потребностям. Вы можете сделать то же самое для XML файла макета и добавить фон или любые другие настройки. Это также имеет преимущество, что вы не будете зависеть от имен имен, используемых Android (android.support.design.R.id.design_bottom_sheet) при изменении фона (хотя изменение имени идентификатора редко происходит AFAIK).

Ответ 10

Создайте пользовательский чертеж с закругленным углом и установите его как фон вашего корня макета 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);

Ответ 11

Этот ответ предназначен только для установки цвета фона в Color.TRANSPARENT после настройки Color.TRANSPARENT с закругленным фоном на макет.

Ни один из ответов не 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 Bindings - Kotlin Android Extensions в onViewCreated()

Поэтому я немного подстраиваю настройку фона в onActivityCreated():

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

Надеюсь, что эта помощь поможет

Ответ 12

Вы должны изменить 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>

Затем переопределите bottomSheetDialogTheme для styles.xml, используя рисование в качестве фона:

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

Ответ 13

Создать собственный стиль

<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_corner_top_only</item>
    </style>

затем переопределите этот метод в пользовательском фрагменте.

@Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //bottom sheet round corners can be obtained but the while background appears to remove that we need to add this.
        setStyle(DialogFragment.STYLE_NO_FRAME,R.style.AppBottomSheetDialogTheme);
    }

Это работает со мной, надеюсь, это будет работать с вами.