How Do You Design The Other Areas Of The App That Are Visible When Scrolled?


#1

My page is longer than what’s shown here…

The scroller on the right isn’t working for me.

How do I design the lower parts of the application (the parts that become visible when scrolled) ?


#2

Hi Justin, you can’t scroll on the canvas when the content extends beyond the page, although you can do that if your elements are inside a scrollable element. You essentially need to temporarily move the elements if you want to see them on the canvas while styling. You can select them without seeing them using the Element Tree.


#3

I tried to use the Scrolling element but what do I set the height constraint too?

The only way I see the scroller is to reduce the size of the scrolling view to be smaller than my canvas/app.

I’m trying to have a page that’s around 2-3 times the standard cell phone height that is accessed when scrolled but I don’t know how to size the page or the scroll view to be able to design everything down below.


#4

It depends on your app layout but a common approach is to make the scroll view fill the page (100% height), then when you place items outside that (e.g. your elements extend to beyond 100%) it will scroll both on the canvas and in the app.

We do have an faq on this but it essentially tells you the same thing:


#5

I currently have the following setup:

image

Scroll view set to 100% as you suggest.

View Pager 1 set to 1000% just to have it extend beyond the page

Pager View 1 you cannot control the constraints…

But when I load the app it still won’t scroll even though View Pager 1 is 1000% (or otherwise extended beyond the visible view) and even though the scrolling is happening in the editor.

Am I structuring this wrong?

I’ll put something (such as an image view) well below the visible view but it still won’t scroll down??


#6

So this type of layout is not intended for certain elements - as you’ve mentioned with a pager view you can’t control the position of the child elements as it’s fixed by the element type. In terms of having a view pager inside a scroll view, I’d be surprised if that works because the view pager is itself scrollable and you have it inside another scrollable element. I’d be inclined to rethink this design if I were you.


#7

What am I supposed to put inside of a scrolling view so that the content is still dynamic though?

I can’t seem to bind a data source to certain elements and I’m trying to follow along with the Places app tutorial ‘places listing detail’ page.


#8

Dynamic views hold placeholder elements such as Text (labels, titles of buttons, textviews), Images, etc… think data. If you want a dynamic view that has a scrolling feature to load lists of data, Tables and Collection style views are your go to’s. Think of your phone’s “phone book app”. The list of names is a listview/tableview with a label inside of it, when you tap on it, it’s a scrollview or yet another listview/tableview with a bunch of custom cells in it holding the labels, images placeholders, etc.


#9

Most of the dynamic elements are automatically scrollable, so you wouldn’t normally place them inside another scrolling element. The place detail page in the example app uses a view pager to show a swipe view of images, so it only contains a pager view and an image element inside that. The text version explains all of the elements:

And you can see the app by creating a new project in Dropsource and choosing Places from the Example Apps section.


#10

Thanks for that Wade. I’m actually not looking to display a list of data but rather a detail page of a constrained API response to one thing. My content needs to be placed on a page that is much longer than the standard height of the phone which is why I’m trying to use a scrolling view of some sort along with a dynamic element that can call the data from our back end. But importantly it is not a list of data it is just one piece of data that I’m trying to display. It is similar to clicking on the place name inside the places app where it takes you to a detailed description of that place except in my case my page needs to be very long and needs to be able to scroll.


#11

You only need elements from the “dynamic” section for lists of data, but you can bind data fields from api requests to lots of the other elements for displaying text and images (everything except the view pager on that place search example app page does this). If you place whatever elements you need to display your data items inside a scroll view you should be able to see them all on the canvas.


#12

I tried that, but I’m still having issues it seems.

I’m not able to bind or display an image inside of an image view “on load” anymore, or “on code 200” without a data source assigned.

image

I also keep getting a binding error in the error checker the moment I bind a response to a text view asking me to bind the data source:

“This response field is inside the results data source, so it can only bind to elements inside a dynamic parent element that is bound to that data source. Please edit either the app_aircraft_description_text binding or bind the results data source to a parent element of Text View 1.”

My structure now looks like this:

image


#13

If you need to display an image from a field that isn’t in an array you can use the request status code events, but it sounds like your info is inside an array. That error indicates that you’re trying to bind a field that is inside a data source, for that you do need a dynamic element that contains repeating child elements. If you need a single item you’ll need to either use an endpoint that returns a single item, or if you’re passing this through to the page from the previous one when the user selects an item from a list you can just pass each data item you need into the page using page variables (like the places example app does with the place id but with each item you need), then you can use the page load events to show the variable data in the second page.


#14

Ok I did that and it took all of the page variables, but when i attempt to use the page variables on the 2nd page, it won’t ‘scale to fill’ and my constraints won’t ‘stick’ or something because there is always a margin.

This hasn’t happened before to other pages and I’m confident in my use of constraints and asset scale.

Is approximately 20 page variables something that the app can’t handle and it’s causeing another issue in the app?


#15

I’ve never encountered an issue with the number of page variables - can you be more specific about the “scale to fill” and margin issue? What are the constraints/settings, what is showing vs what you expect etc.


#16

Yeah neither have I before but I thought I’d ask.

This is how it looks:

This is the editor and related constraints. It’s quite wierd:

image

image

image


#17

Thanks @justincrabbe, I was able to successfully reproduce the issue and our Android developer is looking into it. The only way I’ve managed to force a scroll view to fill the page on Android is to have a fixed width or left value for one of the elements contained within it that essentially forces it to fill the page. We’ll let you know when we have any useful info from engineering though.


#18

@rkresnadi see this post from @sue.
It’s the same problem you were having with your scrollview constraints.


#19

For anyone else having problems with Scroll Views on Android, we have identified an issue that our Android team is working on a fix for right now, hoping to have that out within the next couple weeks. In the meantime you should be able to force your scroll views to extend across the page by using a fixed left or width value on one of the contained elements, not ideal if you’re aiming for percentage values but an option to try until we get that fix up.


#20

I don’t know how to manage this with fixed width as every phone has different sizes.

any idea when it will be fixed?