Building Android Apps : Animation - Adding the Dates Panel

11/21/2010 5:51:31 PM

Let’s add the Dates panel. The Dates panel will have a list of relative dates beginning with today and going back to five days ago (Figure 1 ). Add the HTML for the Dates panel (shown in Example 1) right after the About panel, just before the closing </body> (in a moment, I’ll show you how to add a link to this from the Home panel).

Example 1. The HTML for the Dates panel

<div id="dates">
    <div class="toolbar">
        <h1>Dates</h1>
        <a class="button back" href="#">Back</a>
    </div>
    <ul class="edgetoedge">
        <li class="arrow"><a id="0" href="#date">Today</a></li>
        <li class="arrow"><a id="1" href="#date">Yesterday</a></li>
        <li class="arrow"><a id="2" href="#date">2 Days Ago</a></li>
        <li class="arrow"><a id="3" href="#date">3 Days Ago</a></li>
        <li class="arrow"><a id="4" href="#date">4 Days Ago</a></li>
        <li class="arrow"><a id="5" href="#date">5 Days Ago</a></li>
    </ul>
</div>

Figure 1. The Dates panel consists of a toolbar with a Back button and a clickable list of relative dates

Like the About panel, the Dates panel has a toolbar with a title and Back button. After the toolbar, there is an unordered edgetoedge list of links. Notice that all of the links have unique IDs (i.e., 0 through 5) but the same href (i.e., #date)—more on that in a bit.

Next, you have to update the Home panel with a link to the Dates panel. Add the line shown in bold to the Home panel in index.html:

<div id="home">
    <div class="toolbar">
        <h1>Kilo</h1>
    </div>
    <ul class="edgetoedge">
        <li class="arrow"><a href="#dates">Dates</a></li>
        <li class="arrow"><a href="#about">About</a></li>
    </ul>
</div>

And just like that, we’ve added a new panel to the app (Figure 2). Clicking on an item on the Dates panel doesn’t do anything yet. Let’s rectify that situation by adding a panel to display a date item (the Date panel).