This is part 3 of a 5-part series on introductory Android development. If you’re just arriving, you should head on over to Part 1.
In Part 2, we started an Android project, poked around it a little, and launched an emulator. Now we’ll move on to making the app look like what we want.
You’ll notice I titled this part “Describing Your Layout,” not “Coding Your Layout” or “Programming Your Views.” This is because Android gives you the tools to define most of the characteristics of your Activity’s visuals in descriptive, not procedural terms. This helps speed up development, thanks to the nice GUI-based tools for layout, and helps you keep your programming logic out of the places you define your application’s outward appearances (and vice versa). It’s important to know that you could create your entire app in Java, writing the descriptive code for your layout procedurally in your Activity instead, but it’s a much better idea to keep things separate wherever possible.
The resources
We’re going to build a basic Twitter client, so let’s make it look like one. Let’s switch back into Eclipse and poke around at what we have so far. You’ll recall that besides our Activity’s Java file, we have layout and strings files in the res/layout and res/values folders. Let’s go check them out.
Here’s the basic layout the wizard created for us in res/layout/main.xml:
The main layout xml
You’ll notice there’s also a Layout graphical view for that, which you can switch from/to using the tabs at the bottom of the pane:
The graphical view
It has its limitations, but it’s a good way to get a quick glance at your UI without even firing up an emulator. For example, we can change the pre-generated strings; open up the res/values/strings.xml file and change the “hello” string to something more useful:
Editing strings
You can use the helpful XML properties editor, or just edit the source XML once you’re more comfortable.
Save the file, then go back to the preview of the main.xml:
The preview updates right away.
Handy – we didn’t even have to switch back into the emulator to check our changes out.
Placing widgets
It’s still not much of a screen yet, though. Let’s add a text field and a button to the view. The easiest way to do that is just to drag them from the palette of Views on the left of the preview right onto your layout.
You can drag widgets right onto the layout pane.
If you click to the source view, you can see the XML it generated for those items right there. If you go back to Debug (Run-> Debug) and open the emulator, you’ll see our new text box and button there, just like in the preview pane.
Prettying things up
So far so good, but let’s pretty things up a little before we move on.
Things we’ll fix in this layout:
* Meaningful IDs for items
* Useful button text
* “hint” text for the text box (grey text that disappears when the user starts typing)
* Fixed width for the textbox so it isn’t expanding/contracting as we type
* Layout margins on things so the display can “breathe” a little — this is important both visually, and so fat-fingered users can select the on-screen item they mean to.
You can do this with the Properties editor, which shows below the Layout view by default, or by editing the source XML to look like this:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" android:layout_margin="12dip" /> <EditText android:id="@+id/TwitterPosterMessageText" android:layout_margin="12dip" android:layout_height="wrap_content" android:layout_width="fill_parent" android:hint="What are you doing right now?"></EditText> <Button android:text="Tweet!" android:id="@+id/TwitterPosterPostButton" android:layout_margin="12dip" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> </LinearLayout>
Two things to notice here:
We specified our sizes in “dip” — density-independent pixels. This lets us indicate how much space something should use regardless of whether the user is on a high-resolution but small screen (like a shiny new high-end phone) or a low-res but big screen (like a TV). This is a good habit to get in to; it’ll simplify developing and testing applications that will work on present and future Android devices, regardless of resolution or size.
You’ll also notice that while we used the strings.xml file before with the default TextView, we’re using hard-coded messages for the EditText’s hint and the Button’s text. If we were making a proper internationalizable application, we’d use the Strings file to store those, but we’re going to keep things simple for the demo.
One more thing: we still have a pretty generic looking icon for our app if you look around the emulator’s program’s list:
Yawn.
That just won’t do for our cutting-edge Twitter client. I found a pretty good-looking set called Tweeties by Chris Wallace, which has some nice looking icons and is licensed under a CC Attribution-Noncommercial-Share Alike license:
Better!
Let’s use this or one of the other 48×48 .png files in the set. Rename it icon.png, and overwrite the res/drawable/icon.png file. You can drag the file straight from the Finder on OS X or the Windows Explorer into the appropriate folder in the project explorer panel in Eclipse.
Then let’s also use that icon as part of our Tweet button by setting it as the drawable_left of the button, either in the Properties editor or by manually editing the XML with this property:
android:drawableLeft="@drawable/icon"
Then go ahead and Debug the project again (Run->Debug) and pop back into the emulator:
The finished layout
Well, that’s shaping up. Go ahead and mess around with that a bit. Of course, for now it’s just a pretty face — we still have to tell our code what to actually do. We’ll get into that in Part 4.
On to Part 4!
Tags: android, twitternator-tutorial