December 21, 2014
Hot Topics:

Create Some Buttons and a Clock in Android, Page 2

  • March 30, 2012
  • By Jessica Thornsby
  • Send Email »
  • More Articles »

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.


Tags: Eclipse, Android development

Originally published on http://www.developer.com.

Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel