Its great to see so many new Android devices appearing. Developers love this, unless their apps look ugly on hardware they hadn't tried them on! The problem is having to cater for all the new screen sizes. Even worse - the same device can change orientation any time, like when rotating from portrait to landscape. To show a few techniques to help with this heres FlexiMaze, an app to plonk our little mouse buddy in a maze with some cheese to hunt. All the elements are scaled according to the screen size and orientation.

Tutorial: FlexiMaze Skill: Advanced    Market install Download source

FlexiMaze is an app which uses no hardcoded values for either its display elements nor the maze layout itself. It gets the current screen metrics (width and height) and proportionally scales everything according to them. The maze layout comes from an XML file, the mouse and cheese are rendered using Vector draw() commands and the tiles are 9-patch PNG's which the Android framework scales correctly. Don't worry - all this is explained in the tutorial. There are 5 levels, and each one behaves exactly the same way taking its maze from an XML resource. Heres how it looks:

And heres how the XML used to create them looks:

<levels>
    <level>
        <name>Level One</name>
        <layout>
            WWWWWW
            W.W.CW
            W...WW
            W.W..W
            WMW.WW
            WWWWWW
        </layout>
    </level>
    ...
    <level>
        <name>Level Five</name>
        <layout>
            WWWWWWWWWWWWWWWWWWWW
            WWWWW....WWWWC.....W
            WWWWW.W.WWW.WWWWWW.W
            W.....W.WW.......W.W
            WWWW.......WWWW.WW.W
            W...W.WWWW.........W
            W.WWW.W..W.WWWWWWW.W
            W.WW..WW.W.WW......W
            W....WWW.W....WWWW.W
            W.W.WWWW.W.WWWW..WWW
            W.W.WW.W.W.W.WW.WWWW
            WM...........W.....W
            W.WW.WWW.W.W.WWWWW.W
            W.WW.WWW.W.WWWWWWW.W
            W.....WW.W.........W
            WWWWWWWWWWWWWWWWWWWW
        </layout>
    </level>        
</levels>

A simple character mapping system is used: W for a Wall, M for the Mouse etc. The width of the maze is determined from the length of the first line. Using an external representation like this is a good start to solving the display independence issue as the logic has been abstracted away from all physical screen mappings before we even start. The "game" engine is simple too - you guide the mouse by sliding him around the screen with your finger and it just takes you to the next level when you find the cheese, or loops back to the first if you finish the last one. The XML maze file is bundled up as an asset in the /assets folder, and all levels are read in and stored in the LevelManager class at application startup. This contains the XML parser and maintains the levels as a List of Level objects, each of which holds their respective mazes.