Which Android layout can be used for panning and zooming

Question

I am creating an app as a challenge wheres users can quickly generate schematic lay-outs of an area. There is a start node and people can either extend the node or create a new node up, right, left, or down. Each node describes something in that area (park, wood, whatever) The distances between nodes are always the same. Basically you build this lay-out node by node (just like you create the mindmap node by node in this video: https://www.reddit.com/r/AndroidStudio/comments/m57n0f/what_layout_on_android_allows_the_user_to_pan_the/?utm_source=share&utm_medium=mweb)

I want people to be able to pan and zoom out to quickly move from one end of the lay-out to the other to quickly add to or edit the layout. Except I don't know what layout to use. Using a horizontal and vertical layout doesn't seem to be the solution... (No zoom and pretty clunky because you can't go diagonally)

Bonus: How would you go about to programmatically add these new nodes if the distances and rules are always the same (similar to how it's shown in the video?)

I saw this blog post about dynamically adding an imageview and button relative to each other - which sounds like a solution, right? https://abhiandroid.com/ui/dynamic-relativelayout-params-programmatically.html

score 2 · Answer 1 · answered Mar 15 '21 at 07:45

Simply use this library.

implementation 'com.jsibbold:zoomage:1.3.1'

In XML

<com.jsibbold.zoomage.ZoomageView
        android:id="@+id/img_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        android:scaleType="matrix"
        app:zoomage_animateOnReset="true"
        app:zoomage_doubleTapToZoom="true"
        app:zoomage_maxScale="9"
        app:zoomage_minScale="0.5"      
        app:zoomage_zoomable="true" />

more details on GitHub

score 0 · Answer 2 · answered Mar 15 '21 at 01:42

You should override SurfaceView and draw rectangles and text in the method onDraw, with your surface you can zoom and pan the matrix using triangle arithmetics with the user touches, and to keep everything in the same scale you always use a 1x1 matrix to store the schematic layout and only from the SurfaceView you zoom it. This approach is much easier then trying to adjust Android Views in the screen but if you want to follow this path theres also a setScaleX/Y setScrollX/Y from ViewGroup that you can apply to the root of your screen, but yet you need to read user input from touch.

Which Android layout can be used for panning and zooming

2 Answers2