Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition

Adding the Android CSS

There are a number of UI conventions that make an Android app look like an Android app. In the next section, we’ll add the distinctive title bar, lists with rounded corners, finger-friendly links that look like glossy buttons, etc. With the text editor of your choice, create a file named android.css and add the code shown in Example 2-2 to it, then save the file in the same directory as your HTML document.

Example 2-2. Setting some general site-wide styles on the HTML body element

body {
    background-color: #ddd; /* Background color */
    color: #222;            /* Foreground color used for text */
    font-family: Helvetica; 
    font-size: 14px;
    margin: 0;              /* Amount of negative space around the 
                               outside of the body */
    padding: 0;             /* Amount of negative space around the 
                               inside of the body */
}

Tip

All text on Android is rendered using a custom font named Droid (as of Android 4.0, Droid has been replaced by a new font, Roboto). The Droid font family was specifically built for mobile devices, has excellent character set support, and contains three variants: Droid Sans, Droid Sans Mono, and Droid Serif. Therefore, specifying a font family of Helvetica as we’ve done here will only have an effect on devices other than Android.

Now let’s attack the header div that contains the main home link (i.e., the logo link) and the primary and secondary site navigation. The first step is to format the logo link as a clickable title bar. Add the following to the android.css file:

#header h1 { margin: 0; padding: ...