This will create a skeleton Android project with one main Activity. Read the highlighted text on the Activity documentation page.
EOD )); $page->AddPost(new Post('Running your app for the first time', <<It will take a minute or two for the emulator to start up. When it finally finishes starting up, you will see
Bring up the code on your computer (or view it here). The code:
- Defines a class HelloWorld which extends Activity. That means HelloWorld is an Activity that we can put our own code into.
- Defines a method called onCreate, which gets called when HelloWorld is created (when the app is started).
- The main thing onCreate method does is call setContentView(R.layout.main), which sets the visual layout on the screen and the contents of the elements (the text you see when you start the app)
So what is this R.layout.main that the "ContentView" is set to? It is defined in another file:
Open up that file on your computer, we'll have some fun with it.
EOD )); $page->AddPost(new Post('Getting our hands dirty', <<In the first part of the video, we navigated to the TextView, which was found inside a LinearLayout. A LinearLayout is a container for other visual elements that need to be arranged linearly (top to bottom or left to right). This LinearLayout only has one element inside it - our TextView.
A TextView displays text on the screen. It is currently the only visual element used by the app. The video shows how to make 3 changes to it:
- We set the Gravity to center. That caused our text to be center-aligned. Click here for more options for the gravity attribute.
- We changed the Text to Hello World!!!.
- We changed the Text Appearance to ?android:attr/textAppearanceLarge. What is ?android:attr/textAppearanceLarge, you ask? It is a set of appearance attributes that you can use when you want to make some text look relatively large. Some other options are: ?android:attr/textAppearanceMedium, ?android:attr/textAppearanceSmall, ?android:attr/textAppearanceLargeInverse, ?android:attr/textAppearanceMediumInverse, ?android:attr/textAppearanceSmallInverse.
There are some other simple attributes you can play with - for example, try setting the color to #FF0000. That happens to be red. You can use this online color picker to find other color codes (move your mouse over the color wheel, and look at where it says "Hex Color".
Play with the appearance for as long as you'd like. At any time, you can run the app on the emulator (all you need to do now is highlight the HelloWorld project on the left, click the green play button, and choose Android Application) - the app should look similar to the layout preview in Eclipse. When you're ready to move on, we'll add a button.
EOD )); $page->AddPost(new Post('Adding a button, and making it do something', <<The example adds a button to our LinearLayout. Because of how LinearLayout works (in this case, laying out elements top to bottom), it is displayed below the TextView. The example also customizes the buttons in three different ways:
- We set the Id to @+id/MyButton. This will allow us to access the button from Java code using the Id MyButton.
- We set the Text to Button. This changed the text displayed in the button.
- This time, we changed Layout gravity to center. This centered the button. If you are curious about the difference between gravity (which we modified for the TextView) and Layout gravity: gravity changed the positioning of the text within the TextView. Layout gravity changed the positioning of the button within the LinearLayout.
Try running the app. You will find that you can click the button - but nothing really happens. We'll change that next.
Go back to your HelloWorld.java file. Replace the contents with the code below (the comments in the code tell you what's going on):
package com.urbanstew.HelloWorld;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class HelloWorld extends Activity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// This retrieves the Button with ID MyButton
// and stores it into the class variable myButton (see below)
// so we can easily access it
// We use R.id.MyButton because, in the layout editor, we set
// the Id of the button to @+id/MyButton. If we had set the Id
// of the button to @+id/SomethingElse, we'd be using R.id.SomethingElse.
myButton = (Button) findViewById(R.id.MyButton);
// Now we set our button's OnClickListener - this is what will
// get executed when the button is clicked
myButton.setOnClickListener(new OnClickListener()
{
// Specifically, the method below gets executed when
// the button is clicked.
public void onClick(View v)
{
// As a simple example, let's just change the text
// of the button when the button is clicked:
myButton.setText("Please do not press this button again");
}
});
}
// Class variable myButton
Button myButton;
}
Now try running the app. This time, when you click the button, you should see the text change. You can run the app again, and click the button, for as long as it makes you happy.
EOD
));
$page->AddPost(new Post('Next steps', <<You can now use these skills to experiment - try to add another TextView (it's just like adding a Button), or another Button. Make your Java code do other interesting things when you click a button. Try to access a TextView programatically (it's just like accessing the Button) - make sure you know it's Id (what we set to @+id/MyButton for the Button)!
If you want to play with something new, try creating an EditText in your layout. That one allows the user to enter text. Read the EditText documentation, it is actually relatively digestable. You will also find handy the documentation for Editable, which is the class returned by EditText's getText method. Try to use the documentation to figure out how to access the EditText programmatically from Java code. To get you started, here is some code that would clear out text of an EditText with Id EditText01: (you will need to add import android.widget.EditText; to your import statements at the top of the file)
EditText text;
// retreive the EditText using its Id
text = (EditText) findViewById(R.id.EditText01);
// clear the EditText
text.getText().clear();
// append something to the EditText
text.getText().append("!!!");
If you need some ideas on what you can do programatically with a TextView or Button, you can take a look at the Public Methods in the TextView documentation and the Button documentation. There's a lot of stuff there - if you're looking for something specific you want to do and can't find it, ask.
EOD )); $page->AddPost(new Post('Back to tutorial page', <<