In this tutorial, you’ll develop a basic app for Android 4.0, aka Ice Cream Sandwich. You’ll also learn how to modify the XML to add different types of buttons to your app. Finally, we’ll move onto something more complicated: creating a clock widget and altering the location where this widget appears on the home screen.
To follow this tutorial, you’ll need to install some software. The great thing about developing for Android is that everything you need can be downloaded for free:
The first step is to create a new Android project. Open your Eclipse installation, and let’s get started!
1) Open the File menu. Select New followed by Project.
2) In the New Project wizard, select Android followed by Android Project. Click Next.
3) Enter a name for your project (in this example, we’ll use AndroidApp) and select the location where your project will be stored. Click Next.
4) Enter a build target — this must not be greater than the target used by the Android Virtual Device (AVD), which is used to configure your Android Emulator. Click Next.
5) On the Application Info page, enter the following information:
After you have entered this information, click Finish.
You have just created your first Android project.
You are now ready to create a basic Android app.
In Eclipse’s Package Explorer, open the res folder, followed by layout andmain.xml.
The big advantage of declaring your UI in XML is that it helps to keep the presentation of your app separate from the code that controls your app’s behavior. For this reason, we will be solely working with XML in this tutorial. At this point, your XML code should read like this:
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello” />
But how will this look on an actual Android device? The Android SDK includes a mobile device emulator, which allows you to quickly and easily test your app without ever leaving the development environment. To see your app in action, make sure the AndroidApp folder is selected in Eclipse’s Package Explorer, and select Run from the menu.
Tip: The Android Emulator can take a few minutes to load, so be patient!
After the Android Emulator has finished loading, you can see your basic app in action.
Obviously, we still have some way to go before your app is ready for the Android Market! But let’s start by adding a basic button. Adding a button that says Ok is simply a matter of adding a code snippet to themain.xml folder:
The XML code should now look like this:
Check this in the Android Emulator.
Tip: To change the text displayed on the button, you simply need to edit one line: android:text="Ok" /> .
So, if you wanted your button to say Cancel you would enter:
android:text="Cancel" />With Android, the buttons you can add are practically endless, but another popular button is the radio button. Again, thanks to Eclipse and the ADT project, this is simply a matter of writing a few lines of code:
The entire code should now look like this:
Run this code in the Android Emulator and you will see a radio button has successfully been added.
Tip: Again, changing the text displayed on this button is simply a matter of altering one line: android:text="Yes" /> .
Now you’ve got the hang of creating some buttons, it’s time to try something more complicated.
In themain.xml file, delete the code for the two buttons you have just created (or alternatively, create a new Android project). In this part of the tutorial, we’re going to create an analog clock and then move it around the screen.
The XML for a basic analog clock is:
Add this to your existing code:
Check this is the Android Emulator. You should now see a working analog clock!
Your clock will automatically appear in the top left hand corner, but we can change this by adding a few lines of code and specifying whether the clock should appear centered, in the right hand corner, or at the bottom of the screen. The code you should add/modify, has been highlighted in the screenshot below:
Run this in the Android Emulator.
Changing the location of the clock is a similar process to altering the text for your buttons; simply modify the following line:
android:gravity="center" android_layout_gravity="center">For example, if you wanted your clock to be displayed in the right hand corner, the command would be:
android:gravity="right" android_layout_gravity="right">If you’ve caught the Android bug and want to learn more about developing for this increasingly popular platform, Lars Vogel has published one of the most comprehensive tutorials on the Web.
