http://www.developer.com/ws/android/programming/create-some-buttons-and-a-clock-in-android.html

Back to article

Write Your First Android App with Eclipse


March 30, 2012

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:

  • Eclipse (if you're new to Eclipse, the Eclipse Classic package is recommended)
  • Android SDK
  • The ADT Plugin for Eclipse (this can be downloaded through Eclipse's Update Manager. If you're new to Eclipse, the Android Developers website has all the information you need to add ADT to your Eclipse installation)

Create a New Android Project

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.

ADT Plugin

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.

ADT Plugin

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.

ADT Plugin

5) On the Application Info page, enter the following information:

  • Package name
  • Create Activity
  • Minimum SDK

After you have entered this information, click Finish.

ADT Figure 4

You have just created your first Android project.

Create Your Android App

You are now ready to create a basic Android app.

In Eclipse's Package Explorer, open the res folder, followed by layout andmain.xml.

ADT Figure 5

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:

{?xml version="1.0" encoding="utf-8"?}
{LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" }

 

 {TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="@string/hello" /}

{/LinearLayout}

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.

ADT Plugin

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.

ADT Plugin

Create Some Buttons in Android

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:

 {Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Ok" /}

The XML code should now look like this:

ADT Plugin

Check this in the Android Emulator.

ADT Plugin

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:

{RadioButton
 android:id="@+id/radioButton1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Yes" /}

The entire code should now look like this:

ADT Plugin

Run this code in the Android Emulator and you will see a radio button has successfully been added.

ADT Plugin

Tip: Again, changing the text displayed on this button is simply a matter of altering one line: android:text="Yes" />.

Creating a Clock Widget in Android

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:

{AnalogClock
 android:id="@+id/analogClock1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" /}
{/LinearLayout}

Add this to your existing code:

ADT Plugin

Check this is the Android Emulator. You should now see a working analog clock!

ADT Plugin

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:

ADT Plugin

Run this in the Android Emulator.

ADT Plugin

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"}

Further Reading

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.

Sitemap | Contact Us