Write and sell Android apps with Basic 4 Android: Part 2

In Part 1 of this feature, we saw how simple it is to create Android apps in the low-cost Basic 4 Android development environment. This month, we’ll look at some advanced features and functions you can include in your apps.

Adding graphics to your app

We’ve seen how easy it is to place Android views – buttons, labels and so forth – on the screen and plumb in code to make them all work together. However, an app built entirely out of standard system UI elements will look drab and characterless.

In B4A, it’s easy to add custom graphics to your app. As an example, let’s imagine we’re creating a simple stopwatch app with three custom buttons: start, stop and reset. We might begin by positioning these as regular buttons in the Designer, then modify their properties to make them appear as custom images rather than the default appearance.

To do this, click on “Add Images” in the Designer and select the files you want to use – most popular file formats are supported. In our example, we’ve chosen three images from the free Find Icons service.

The images don’t immediately appear onscreen; adding them just makes them available for your interface to use. To attach the “play” image to our first button, we must change which sort of “Drawable” the button is, defining it as an element with customisable properties. We do this by selecting the button and changing its Drawable property from DefaultDrawable to StateListDrawable.

When you change this setting, you’ll see a new set of properties. Set EnabledDrawable to BitmapDrawable and a property will appear entitled “Image file”. Click in the blank space next to this for a dropdown menu showing your imported images. Choose the appropriate icon and the Designer view will update to show your image, scaled to fit the area of your button (you can change this behaviour by adjusting the image’s Gravity property).

The name of the button still appears superimposed on the graphic, but this is just for convenience within the Designer – if you check the button’s Text property you’ll see it’s blank, and there’ll be no text overlaid when your code runs.

You can also specify additional images (or colours or gradients) for when the button is pressed and when it’s disabled.

Animation

If you’re interested in writing games, you’ll want to know how to animate your views. Let’s create an example app that moves a spaceship randomly around the screen. This involves using library functions that aren’t available in the B4A trial – the full version is required.

We’ll start by creating a panel in the designer; this will be our play area. We’ll use the GradientDrawable mode to give it a colour gradient, and we’ll set the Corner radius to 10 to give it rounded corners.

Next, we’ll place our spaceship – we’ve used a charmingly retro image, once again from Find Icons – in its starting position. For this we’ll use an ImageView, a type of view that houses a graphic, and we’ll set its parent property to specify the panel rather than the activity. This means the spaceship can move only within the play area – it won’t be visible if it goes off the edge – and its dimensions and co-ordinates will be relative to the panel rather than the activity.