Android Question Tall canvas in ScrollView

You have got on to the wrong track in trying to deal with images. You should be using some form of scroll view - you are right there - with each row that you are drawing being one line entry in the scroll view. You will easily be able to deal with thousands of rows before reaching any limit, well over 5040 for example.

If nobody else comes forward I would be happy to draft our something to get you started, but unfortunately I cannot make a start on it just now. I am a bell-ringer myself, as you might have gathered. If you give me an outline of what you want I would be happy to help out.

Thank you, Brian, for your thoughts.

The reason I have used images is so that I can position the data (horizontally) in a flexible way. I also want to draw lines on the data and other shapes.

The USP of the app is that it allows a user to 'ring' a bell in real time, by tapping a panel. They have to try and keep time with the other bells, and if they ring early or late the position of their bell is displaced by the amount of the error. The idea is that the user can use the app not only to learn a method, but to develop listening skills in order to ring in time with the other bells.

The images below show the kind of thing I want to display. The first image is just a diagram of the Plain Bob Doubles method. In the second image the user has rung bell 5 early on the second row shown. It has been printed to the left of where it should have been, and a red shaded rectangle highlights the error. A bit later the bell is rung late and a green rectangle shows the error. The RMS value of the errors accrued is given when the ringing finishes, as feedback on how well they have done.



I had almost finished, accepting the limitation to the number of rows - in the region of 1200 - but then tested the app on an ancient tablet, running SDK21 (Android 5.0.1), and the scrollview refused even to show.

Here is a very quick demo - you should just look at it as a "proof-of-concept". It consists of a single scroll view that displays 5040 rows of Plain Hunt on twelve.

If this is a step in the right direction for you but you need more then come back to me. If it is not helpful then let me know and I will try something else.

Thanks so much! Yes, 5040 rows of Plain Hunt 12. Neat. I shall see if I can get my head around CustomListView and PreoptimizedCLV.
However, I don't think it would be possible to draw a line to show the path of one of the bells, would it? It's crucial to be able to do that.

Well - this is embarrassing! I did not see your post #3, made yesterday afternoon, until this morning, even though I was checking throughout yesterday evening on more than one device and could see that you were active on the forum. I have seen this effect before, and I think that it is because you are not a licenced user and your posts are moderated and therefore delayed. (I also think that making a small donation to AnywhereSoftware, proving that you are a real person, will remove this limitation).

Anyway, you must have thought that my reply was rubbish, but that might not be entirely the case. The solution to your problem is "tiling". That is the technique used in mapping to show a limitless two-dimensional surface. You are working in only one dimension, so let's think again of my CLV example. My demo displayed a possibly infinite series of layouts. Each layout contained twelve labels, but it could just have easily displayed an image. If each image displayed a single lead of a method then the CLV would scroll through a complete course, and even wrap back to the start. So that would have been a possible solution to the problem that you set in post #1.

However your first post did not include the requirement that the User can interact with the display. The way to do this is usually to add a transparent panel overlaying the scrollview to intercept touch actions. This is how mapping apps work, and they, of course, are working in two dimensions. You seem to have already developed that part of your app, and you obviously know what you are doing even if you call yourself a "hobbyist". But I would suggest that a possible path for you is to look closer at mapping and draughting apps and how they draw polygons on a scrolling surface. Of course, you have already invested a great deal of time in your app and it might be difficult to implement what might be a major change in its architecture.

Edit : Another passing thought . . .

. . . tested the app on an ancient tablet, running SDK21 (Android 5.0.1) . . .

Click to expand...

According to Google 90% of Android devices are running Android 11 or above and more than two thirds are running Android 13 or 14. I don't think that you have to worry about your app running on Android 5. But that might not be your real problem, of course.

I have had a chance now to think more about your problem and to understand better what you want to achieve, and how you want to do it. If you are testing your app on different devices then I guess that you must be coming to the end of its development and what I am going to suggest here may be too radical a change. However other people might look at these posts in the future and benefit from different ideas so I am going to suggest what I think would be a solution.

Here is an app that I wrote a few of years ago . . .




It is a record of daily steps. The view at the bottom left is a regular scrollview - not a CLV. I have been collecting data for nearly three years so the scrollview has over 1000 rows. As I scroll through the dates the graph at the top scrolls left and right smoothly and in perfect unison - except that it does not scroll. I monitor the ScrollChanged event from the scroll view and on every movement redraw the graph completely. Note : I do not mean that the graph updates on every row change - it updates on every touch movement on the scrollview - very smooth. If I knew how to post a video I would.

Imagine that we transfer this design concept to your app, with the canvas containing the graph rotated and moved to overlay the scrollview. The scrollview would be scrolled automatically in time with a soundtrack - you must be doing something like that already - now that action also needs to redraw the canvas. There would be very little drawing to do - just a few rectangles - and we are anyway not scrolling quickly. Time would not be a problem. You are already collecting the striking data from each row to compute the RMS value so this would allow the user to scan backwards through their performance as well.

As I said, I know that this might be a significant design change but I am sure that it would work. You do not need a large canvas, you just need to redraw the canvas content to match the scroll position of the change list. I am still not clear how the scrolling graphic of the method is created in your current app but I don't think that you are using a scrollview, and you do say that it is "clunky". I think you should seriously consider using a scrollable view and using a "tiled" set of images.

Thanks Brian. I made a donation to Anywhere Software some years ago, but not recently. Perhaps it's time for another! And I'll see if my profile needs updating.

I think 'tiles' will be an interesting way to go, and your CLV example will be my starting point. A list of images.

...just seen your latest post. I will definitely try tiling images together to make a complete touch consisting of one lead of the method on each tile. I'm sure it will work...!!!

The interactive stuff draws to a canvas on the scrollview, but the canvas is as wide as the scrollview (of course), which is as wide as the screen, and so unnecessarily large. I have just been experimenting with drawing to an imageview of controlled width, and adding this ImageView to the scrollview panel, with promising results.

Cheers.

I have managed to make considerable progress using multiple small ImageViews rather than one big one, so thanks for the suggestion. I don't understand why it works! I don't see why the system allows an app to create 52 images, each 48 rows tall, and tile them together into one scrollview, but won't allow one image 244 rows tall.
I am using one imageview for each lead of a method. It's a bit fiddly getting the blue lines to draw over from one imageview to the next, but I have managed to do just that, resulting in a nice freely-scrolling diagram of up to a half-peal. That will be plenty for the use that I expect the app to provide.

Thanks again.