Simple Badge with Overlay ExampleAfter looking at the Simple Badge example, let's take it one notch up and add a bit of user interactivity to it. First, let's take a look at the config.xml file: Note that in addition to the contentpath and paths section, we also added an animations section, where we define transitions that can be performed on elements when they are shown or hidden. Each animation node has an id that allows us to refer to it, the name of the property it modifies, the startvalue for that property, as well as the endvalue, and duration in seconds for performing the animation. In this particular case, the two animations are fadeIn and fadeOut -- each modifies the alpha property from 0 to 1 and vice versa in 2 seconds. In content.xml, we have the following markup: In the elements section, we have a background Image, a Label and another Image, just like before. Note, however, that the avatar Image now has an onShow property which is set to fadeIn, an animation defined in config.xml. We also added a Button element, which has a click event associated with it. When clicked, the button sets the visibility of the overlay element to true. But what is the overlay element? Overlay is a special kind of element called container. It allows you to group several elements together. The properties of the container propagate down to its children: so, for example, if you scale the container down, change its opacity, or position -- all of its children will be affected. This is precisely what happens in this case: overlay is initially set to being invisible, and when the button mybutton is clicked, its visible property is set to true. The overlay container has a couple more images and a label, and when appearing, they all gently fade in, because the overlay container has both an onShow and onHide properties set to specific animations.