Conference-app-2020: When BottomSheet is expanded, top left corner is not rounded

Created on 11 Jan 2020  ·  10Comments  ·  Source: DroidKaigi/conference-app-2020

Kind (Required)

Choose the suitable template if exists.

  • Other

    Overview (Required)

  • Title says it all.

    Screenshot

welcome contribute

Most helpful comment

@takahirom

I have two ideas.

  1. use BottomSheetBehavior.addBottomSheetCallback and adjust topLeft radius.
    https://github.com/material-components/material-components-android/pull/437#issuecomment-536734312
  2. create shape background and attach to fragment_bottom_sheet_sessions's constraintLayout (such as DroidKaigi2019 app). Not use Widget.DroidKaigi.BottomSheet.

Which is best solution?

All 10 comments

I think this is default behavior 🤔
https://github.com/material-components/material-components-android/pull/437

Should I fix this issue? 😃

I checked with the designer. Since this is a feature of the app, I want to put it in. 🍨

@takahirom

I have two ideas.

  1. use BottomSheetBehavior.addBottomSheetCallback and adjust topLeft radius.
    https://github.com/material-components/material-components-android/pull/437#issuecomment-536734312
  2. create shape background and attach to fragment_bottom_sheet_sessions's constraintLayout (such as DroidKaigi2019 app). Not use Widget.DroidKaigi.BottomSheet.

Which is best solution?

@Dai1678 Thanks for the idea!!
The first one seems to be good because it can get on the mechanism of the component.

Thank you. I will try this issue.

Thanks! Assigned 👍

すみません。意図を全部英語で正しく伝えきるのが難しいので日本語で失礼します...

use BottomSheetBehavior.addBottomSheetCallback and adjust topLeft radius.

支持頂いたこちらの方法で実装してみているのですが、上手くいかない状況でヘルプを頂きたいです

左上の角のみを調整するのにMaterialShapeDrawableを使って実装してみているのですが、以下の問題点が発生してしまっています

  • 常に角は丸い仕様なので、addBottomSheetCallback内ではなくonViewCreatedの直後でレイアウトに対してMaterialShapeDrawableをセットするようにしたが、MaterialShapeDrawableが適用されない (メソッドは呼ばれている)
  • backgroundmaterialShapeDrawableを設定すると、そのレイアウトに設定されていたstyle(もしくはbackgroundTintのみ?)が無視されるので setTintでR.attr.colorSurfaceを適用したが、ダークモード時の色が以前と変わってしまった
    (Widget.MaterialComponents.BottomSheetbackgroundTintで定義されている値がcolorSurfaceだったので使用)

作業中のコード
https://github.com/Dai1678/conference-app-2020/blob/ba1ece7bbfac32facaf64ed642deebc954738b09/feature/session/src/main/java/io/github/droidkaigi/confsched2020/session/ui/SessionsFragment.kt#L273-L288

|ライトモード|ダークモード|
|---|---|
|||

つたない文章で申し訳ありませんがご確認頂けると助かります。
他に良い方法があればご教授頂きたいです。

@Dai1678
How about use MaterialShapeDrawable.createWithElevationOverlay for the second problem?

Like this ↓

val materialShapeDrawable = MaterialShapeDrawable.createWithElevationOverlay(requireActivity(), elevation).apply {
    setShapeAppearanceModel(shapeAppearanceModel)
}

@Dai1678
I think the first problem can be solved by setting shapeAppearance to null.

<style name="Widget.DroidKaigi.BottomSheet" parent="Widget.MaterialComponents.BottomSheet">
    <item name="shapeAppearance">@null</item>
</style>

materialBackground that BottomSheetBehavior has is not overwritten by setBackground.

@NUmeroAndDev
Thank you for reply!!!

All your suggestions worked correctly.
I will create fix PR.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

takahirom picture takahirom  ·  6Comments

rkonno picture rkonno  ·  5Comments

jmatsu picture jmatsu  ·  4Comments

kumamotone picture kumamotone  ·  3Comments

FujiKinaga picture FujiKinaga  ·  6Comments