Design the User Interface

Create the look and feel of your app.

Step 1

CuteKitty is a simple app that you can build in a very short time. You will create a button that has a picture of a cat on it and then program the button so that when it is clicked a "meow" sound plays.

To build CuteKitty, you'll need an image file of a cat and an audio file with a "meow" sound. These files are on your computer in Desktop / Media Library.

To start designing your app, go to the Designer editor by selecting the Designer tab.

Step 2

Components are the basic elements you use to make Android apps. They are like the ingredients in a recipe. Some components are very simple, like a Label component, which just shows text on the screen, or more complex like a Button component that you tap to make something happen.

To add a component in your app, you need to click and drag it onto the Viewer. 

From the User Interface palette, drag and drop the Button component onto the Viewer.

Step 3

To make the button have an image of a cat, go to the Properties pane and under Image, upload an image file of a cat from your media library. 

The image of a cat should now appear on the phone. If the image is squashed or stretched, go to the Properties pane and adjust the Width and Height of the button to fit your phone screen.

To change the button's Text property: delete "Text for Button1" and leave it blank so that there is no writing over the cat’s face. 

Step 4

From the User Interface palette, drag and drop the Label component onto the Viewer, placing it below the picture of the cat.

Under the Properties pane:

  • Change the Text property of Label1 to "Pet the Kitty"
  • Change the FontSize of Label1 to 30
  • Change the BackgroundColor and TextColor to any colour you like

Step 5

From the Media palette, drag and drop the Sound component onto the Viewer. Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components. 

Go to the Properties pane and upload an audio file of a cat from your media library as the Source. Set the MinimumInterval to “1000”.