ConstraintLayout + scrolling

from the CommonsWare Community archives

At April 22, 2020, 7:22pm, sudokai asked:

Hi!

I would like to create the following screen but I don’t know enough Android to do it.

This screen contains three components:

screen 1
screen 1888×1359 31.2 KB

The terms and conditions can be quite long and I would like to make only a portion of it visible on initial load. If the user scrolls up, they should see the rest:

screen 2
screen 2888×1359 29.6 KB

The issue is that I want the Product box to be dynamically sized according to the size of the screen and have the Buy button always appear near the bottom of the screen, while leaving some space afterwards to show a snippet of the Terms.

I can solve the first part of the problem by using a ConstraintLayout and setting the constraintBottom of the Buy button to the bottom of the parent and then setting the height of the Product to 0dp.

But as soon as I introduce the Terms component, since it’s too long, it pushes everything else towards the top:

Frame 3
Frame 3888×1359 12.6 KB

So I wrap my ConstraintLayout with a ScrollView and allow the ConstraintLayout to overflow, so I can scroll the screen, but then, the problem is that I can no longer position the Buy button relative to the bottom of the screen and dynamically size the Product.

I suspect the entire approach is wrong, but I have no idea how to proceed. Any help would be welcome. Thanks!

At April 22, 2020, 9:12pm, mmurphy replied:

Sorry, but I do not know of a good way to handle this.

You might need to consider some alternative implementation (e.g., the terms and conditions are collapsed, and clicking on them expands into the full text, where your objective is to show the collapsed terms without scrolling).

At April 23, 2020, 6:34pm, sudokai replied:

I ended up not using responsive sizing and different Android dimensions for different screen sizes. Not a perfect solution, but it mostly works for different screen sizes.