Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When BottomSheet is expanded, top left corner is not rounded #104

Closed
NUmeroAndDev opened this issue Jan 11, 2020 · 10 comments · Fixed by #377 · May be fixed by #542
Closed

When BottomSheet is expanded, top left corner is not rounded #104

NUmeroAndDev opened this issue Jan 11, 2020 · 10 comments · Fixed by #377 · May be fixed by #542
Assignees

Comments

@NUmeroAndDev
Copy link
Collaborator

Kind (Required)

Choose the suitable template if exists.

  • Other

Overview (Required)

  • Title says it all.

Screenshot

@koogawa
Copy link
Contributor

koogawa commented Jan 15, 2020

I think this is default behavior 🤔
material-components/material-components-android#437

Should I fix this issue? 😃

@takahirom
Copy link
Member

takahirom commented Jan 15, 2020

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

@Dai1678
Copy link
Contributor

Dai1678 commented Jan 16, 2020

@takahirom

I have two ideas.

  1. use BottomSheetBehavior.addBottomSheetCallback and adjust topLeft radius.
    [bottomsheet] do not remove corners when bottomsheet is not fully expanded material-components/material-components-android#437 (comment)
  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?

@takahirom
Copy link
Member

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

@Dai1678
Copy link
Contributor

Dai1678 commented Jan 16, 2020

Thank you. I will try this issue.

@takahirom
Copy link
Member

Thanks! Assigned 👍

@Dai1678
Copy link
Contributor

Dai1678 commented Jan 17, 2020

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

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

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

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

@NUmeroAndDev
Copy link
Collaborator Author

NUmeroAndDev commented Jan 18, 2020

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

Like this ↓

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

@NUmeroAndDev
Copy link
Collaborator Author

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

@Dai1678
Copy link
Contributor

Dai1678 commented Jan 18, 2020

@NUmeroAndDev
Thank you for reply!!!

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

valjapan added a commit to valjapan/conference-app-2020 that referenced this issue Jan 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment