0

I'm trying to make a view/layout that shows a periodic table (chemical elements), as can be seen in the following picture:

periodic table of elements

However I'm not sure how to tackle the problem of displaying this table. There are some obvious requirements:

  • The user should be able to zoom in and out on the table (pinch to zoom)
  • The user should be able to move the table (horizontal, vertical, diagonal... scroll)
  • Each rectangle representing a chemical element should be clickable (click will display detailed information either as a pop-up or in a new activity).
  • The element rectangles should be flexible and easy to maintain: I want to be able to change background colors dynamically. Also the name of the element will be dislpayed in the block, but when zoomed out I should be able to hide it, because it won't be readable.
  • Of course, all interaction should be as efficient and fluid as possible.

At first I thought to combine a ScrollView and a HorizontalScrollView to get the scrolling functionality and implement a zooming action on it. Inside I would put a TableLayout where each cell contains a Linearlayout (element rectangle).

However, I seam to remember that embedding a HorizontalScrollView inside a ScrollView is discouraged. Also I'm wondering if instantiating at least 118 Linearlayouts (chemical elements) and put them in a tablelayout will use too many resources.

What, in your experience, would be the "best" approach for this problem? Is there any way to do it efficiently with existing layouts and widgets? Or should I implement my own custom view/surfaceview (with or without OpenGL)?

Community
  • 1
  • 1
PieterV
  • 730
  • 6
  • 21
  • Go for a grid view. You can scroll and zoom in that. For more details look here http://stackoverflow.com/questions/5246566/android-2-1-how-to-zoom-in-out-and-scroll-on-a-gridview – Iqbal S Apr 15 '15 at 19:11
  • Here is another solution, but it does not support zooming: http://stackoverflow.com/questions/2044775/scrollview-vertical-and-horizontal-in-android Or you can give up, convert your table to a HTML file and display it inside a simple WebView, it supports scrolling/zooming and is optimized rather well. – pelya Apr 15 '15 at 19:21
  • @lqbal : I don't think a gridview lets me scroll in both horizontal and vertical direction (or any combination). – PieterV Apr 16 '15 at 07:03
  • @pelya : Personally, I'd like to build this in Android (Java) code itself, but as a backup plan, this is actually not a bad idea, thanks! – PieterV Apr 16 '15 at 07:06

0 Answers0