I love pen and paper. It has been a tight part of my life for as long as I remembered. To further affirming my point, I once almost decided to quit my school halfway as a Computer Science student in order to pursue a wild and unknown land of English Literacy. I’m glad I’m not taking that route even if I’m still curious about that particular path, if you must know. A ‘what if’ question, if you will. One thing was clear, you’d rarely see me, if ever, without my notepad and a pen either stuck in the corner of my mouth or stuck out of my breast pocket.
So, most of the time, before I started to craft anything, writing materials or crunching codes, I sat and staring at the white blank sheet of paper and start doodling. This image below is a sketch I made during the few minutes before my lunch break is over. The idea, both the idea for taking a quick break and the general idea for the app, has knocking the night before and it was so simple that I’ve given myself seven days to finish it. Seven days or bust, that is what I thought.
The first order of the day, and the main concern about part one of this series is to translate the sketches into an actual initial layout. The obvious are easy, there’s a couple of TextViews with perhaps a different style and color scheme to be applied on later when the usability factors were weighed in but on a first iteration, setting up a TextViews are easy.
Probably the first obstacle I had encountered was when I wanted to simulate the vertical bar graphs shown in my sketch. The first obvious thing I had tried was definitely HorizontalScrollView with a ListView in it. Perhaps I’m not that good or I’m just lazy because I immediately look for another way on the first stumble, which is when I read this on the HorizontalScrollView class documentation.
“You should never use a HorizontalScrollView with a ListView, since ListView takes care of its own scrolling.”
And true enough, my ListView displaying the list not the way I had wanted it to be and immediately I went into seeking for another solution. My next guinea pig is Gallery and I had a better success with it until I read this part from its documentation.
“A view that shows items in a center-locked, horizontally scrolling list.”
I figured I could make the Gallery left-oriented by manipulating its various properties and XML keys. No luck. But I went on, anyway. The first data sets that I tried was TextViews. Simple. However, since I wanted to display a vertical graph, the texts simply won’t do so I created a green bar (which happens to be my favorite color, by the way. The color of envy, euh, I mean, money). I’ve been using a custom green bar since KoinKuLator so it’s simply reusing that class, which extends View, and overriding its onDraw method to draw a simple rectangle. Tweaked a bit to satisfy the vertical orientation, and there we have it.
Problem, the vertical bars hung like a cave stalactite. Tweaked again for a bit, and I came with a solution to draw two rectangles, the first one, the above rectangle has its alpha sets to hex-value 00, completely invisible, and the second rectangle, the one that holds the information draws directly below it. Both of these rectangles has a total combined height of 100dip, hard-coded with the height of its Gallery container. The resulting display was as follows.
Not really breathtaking, but since I aim to do a rapid development, this will have do for the time being as I went into the back-end of the app.
To be continued…