Drop In Component only partially extended on tablets

[markosopcic]

Describe the bug
On tablets, when we start the Drop In Component, the Payment methods bottom sheet doesn't extend so the payment methods aren't visible, only the title. Tested on both 5.3.0 and 5.3.1.

To Reproduce

1. Start the Drop In component on a tablet.
2. Bottom sheet is only partially extended and payment options arent visible.
3. You have to manually drag the bottom sheet to extend it.

Expected behavior
Bottom sheet is fully extended and payment options are visible

Screenshots
https://github.com/Adyen/adyen-android/assets/32719316/c03c0d90-8f6d-442a-99f6-b567e1869194

Smartphone:
Device Used: Galaxy Tab A9+
OS: Android 13
Screen Resolution: 1920 X 1200
Can also be reproduced on emulator.

Additional question:
Is there a way to limit the width of the Drop In Bottom sheet? If possible, we'd like to have it a fixed width on tablets.

[jreij]

Hi @markosopcic, thanks for reaching out. We will investigate the bottom sheet partially hidden issue and update you when we have a fix.

As for limiting the width of the bottom sheet, when I test this on an emulator using our own example app, I can see that the it does not fill the whole width of the screen. I don't have a Galaxy Tab A9+ to test this but since you mentioned that you can also reproduce this on an emulator, I'm assuming you can fix that with some tweaks to your theming setup.
Here's a few suggestions:

• Test your app with the default SDK theme by adding <style name="AdyenCheckout" parent="Adyen"/> to your styles.xml file and removing any other instances of AdyenCheckout.
• If that solves the problem then I believe you can achieve the same fix with your own theming. Take a look at our UI customization Guide to choose your preferred theming setup, then try to define your bottomSheetDialogTheme. You can take a look at our default setup in case it helps you.

[markosopcic]

Thank you for the response.
Indeed, the width of the sheet on tablets was my fault, I overrode the AdyenCheckout style but didn't set the bottomSheetDialogTheme. Thank you!

The issue with the sheet being only partially opened persists. Let me know if I can aid you in any way to fix this.

[markosopcic]

Also, something else i just noticed while trying to debug this. The corners on the bottom sheet change from rounded to pointy when i expand the sheet. Not a big deal, but just wanted to let you know. It also doesn't seem to be only on tablets but on phones as well. It seems to happen when you manually try to drag/expand the sheet upwards.

Screen.Recording.2024-05-09.at.11.08.15.mov

Screen.Recording.2024-05-09.at.11.11.18.mov

[jreij]

The corners on the bottom sheet change from rounded to pointy when i expand the sheet

I believe we are just following the default behavior of material design modal bottom sheets. If you take a look at this page, the rows "Modal bottom sheet (collapsed)" and "Modal bottom sheet (expanded / full screen)" indicate that collapsed bottom sheets should have rounded corners while full expanded ones should be flat.

I think you can modify that yourself though by overriding Widget.Adyen.BottomSheet.ShapeAppearance or setting shouldRemoveExpandedCorners in your bottomSheetDialogTheme. You can read the full discussion in this PR from the material components repo.

[markosopcic]

Thanks! Wasn't aware of that, but it felt strange that the corners change in place, without the whole sheet moving. I do drag it a bit down, but it bounces back up and changes the shape of the corner.

Also, I've found a temporary workaround for the original issue, which I think we can use untill this is resolved in the SDK, by setting the behavior_peekHeight for tablets only, using resource qualifiers.

    <style name="AdyenCheckout" parent="AppTheme">
        <!-- other values -->
        <item name="bottomSheetDialogTheme">@style/AdyenBottomSheetDialog</item>
    </style>

    <style name="AdyenBottomSheetDialog" parent="AdyenCheckout.BottomSheetDialogTheme">
        <item name="bottomSheetStyle">@style/AdyenBottomSheetStyle</item>
    </style>

    <style name="AdyenBottomSheetStyle" parent="AdyenCheckout.BottomSheet">
        <item name="behavior_peekHeight">1000dp</item>
    </style>

[jreij]

We just released 5.5.0 which includes a fix for this issue.