MM’s Subsystems Views

Coming soon to Mobile Metagenomics is full support for the Subsystems views that the web-based RTMg cgi provides. Rob and I had a meeting on Thursday to discuss some ideas for how we’d like to present the data. The coolest idea (in my opinion) that came out of our discussion was creating a graph of the subsystems. We will create percentages based on the most represented subsystem (which will take up 100% of the screen width/height depending on phone orientation). To make things even more slick, we think it would be nice to overlay text data onto the graph bars. This saves screen real-estate and presents information in a cleaner, easier to view manner. These are incredibly important principles to consider when working with handheld devices like cell phones.

I spent some quality time with Google searches for the past two days, and I’ve come up with what looks like a solid proof-of-concept. Take a peek behind the Read More and all will be revealed!

I created several mock-ups with various ideas for achieving the graph bars with text overlay. The current frontrunner is actually the most simple of my ideas; a colored rectangle with text written on top of it. This is achieved by creating a ShapeDrawable and putting it inside of an ImageView. This is done by simply


after the ImageView has been findViewById -ed from your xml, and the myShape has been defined. I’m not entirely sure how I’m going to handle the sizing and percentages yet (whether on the drawable side of the ImageView side, but most likely the latter). The color is set by:


where Color.BLUE can be any of the defined Color-dot colors, or other custom RGB colors.

The trickier part is overlaying the text, this is done with

getWindow().addContentView(myTextView, myImageView.getLayoutParams()); 

after you have created myTextView programmatically (which is a fancy way of saying ‘not from xml’). The first parameter of addContentView is the view you’d like to overlay on another view. The second parameter is the set of LayoutParams which tell Android where you want to stick the new view. We make it easy on ourselves by asking myImageView what it’s layoutParams are, and feeding those straight into the method that is asking for them.

When all is said and done, we get our Proof-Of-Concept: