AMS Part 3: Creating the Main Menu
| [](http://supermekanismo.files.wordpress.com/2012/02/screen1.jpg) |
| Slightly better than the last mockup. |
With part 3 of this guide, we'll touch on making the main menu. It will hopefully also introduce you to getting familiar with working with Android XML in your java code. Our focus is to recreate the screen above and of course add buttons and a template for running other classes.
| [](http://supermekanismo.files.wordpress.com/2012/02/manifest1.jpg) |
| Your project's manifest. |
Setting your project to be Debuggable
Because you can't have a perfect program, let's set the project to be debuggable. What it means is that we will be able to post our own custom messages when there's a horrific failure. Open your Android Manifest XML file and click the bottom tab named "Application". You should be able to see something similar to the image above. If you look at the entry fields, one of it is named "Debuggable" hit the dropdown button and select true and save.
You won't be able to see custom messages yet. They won't display on the console but instead in what's called "Logcat" Android version of nyancat. It's a logging system for viewing debug output. If it's not currently in your perspective, go to Window > Show View. Select Android from the folders and select logcat.
| [](http://supermekanismo.files.wordpress.com/2012/02/logcat2.jpg) |
| Select LogCat. The rainbow farting Android icon. |
Testing out Debugging
The first thing I'd like to show is how we show output through LogCat. Open you main java file (The one that is automatically created). Before we get to use LogCat, we need to (a) set the program to debuggable in code we have (b) importing Util.Log (c) using the Log method. We've already done the first requirement so let's move on to the 2nd and 3rd.
| [](http://supermekanismo.files.wordpress.com/2012/02/debug_code.jpg) |
| If you want the fancier black theme, check out my instructions [here](http://krisanthonyviceral.blogspot.com/2011/12/prevent-eyestrain-change-color-themes.html). |
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
public class AMS extends Activity{
private String TAG = "AMS";
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Log.i(TAG, "The program has started");
Log.d(TAG, "This is a debug message");
}
}
[/sourcecode]
Note: The sourcecode added was "glued-in" to the post to make it more convenient. The code posted in the notepad-looking extension was not tested. Double check with the image as it's the original one.
The only thing I added to the automatically generated code is line 5, 8, 15 and 16. Line 5 is importing the Util class and the Log functionality. In line 8 we add the a String named TAG. According to documentation, you should use a constant with the class name generating the message. In this case or in every case, the value of the string is the current class. Line 15 and 16 shows two possible methods for the Log class. The log class has several methods indicating the type of message. I is for information, d is for debug, WTF is What a Terrible Failure and so on (just use the dot operator or documentation to see the other available methods). What is the difference? The output changes depending on which method you use. Below is the output of the code.
| [](http://supermekanismo.files.wordpress.com/2012/02/debug_output2.jpg) |
| Click to enlarge. The other messages are from other parts of the system or apps. |
Explaining the other pieces of code
Before we head on further, there are more explanations that are needed. Your class extends Activity because as mentioned each UI is an Activity in Android. Also, onCreate( ) is the first part of an Activity's lifecycle. Here we tell the program that we're getting/creating the UI from the Main XML file from the layout folder.
What is R in Android?
That's a little tough to Google (I could be corrected on the exact definition). Anyway, the R class allows you to access files or data. For example, in R.layout.main we are returning a value that represents the Main XML file in the layout. It could also be used to retrieve strings, arrays, drawable items and so on. I think it's better understood once you play around with it. More information or lack of here.
Recreating the Mockup
From here, we'll spend a little more time on XML and UI before we do anymore coding because it'll make our life a little easier. Open your Main XML file. If you haven't done so I suggest your configuration. In one of the drop down menus above the UI you'll see screen sizes. Change it to whatever screen size your phone has. I'm using a Nexus S so there's already an option for that. You can also set the theme to full screen and no title bar. (Update: Delete the Hello World text label also)
| [](http://supermekanismo.files.wordpress.com/2012/02/clear2.jpg) |
| The current settings. Nice and empty. |
| [](http://supermekanismo.files.wordpress.com/2012/02/android_fullscreen.jpg) |
| Android full screen code at line 16. Click to enlarge. |
<uses-sdk android:minSdkVersion="10" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:debuggable="true">
<activity
android:name=".AMS"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER"
</intent-filter>
</activity>
[/sourcecode]
Some more explanations
If you are not familiar with XML like I was then here are some of the things you maybe wondering. Each line is a property of the current parent. When you introduce a new class, you have to declare it here to make it be accessible by your code (later an example will be shown). The @ command means that it is getting information from another folder. If you check the Drawable folder then there exists an icon named ic_launcher. Similarly, a string value named "app_name" exists but this time Values folder (strings.xml).
If you run the program now you can see well.. a black screen. Just as we set.
Importing Images
Save the two images below (or through here and here) two files that we'll use them in setting the background and logo for the menu. Create a new folder in your res folder called "drawable-nodpi" without quiotes. Place the two images there. Make sure that both file names are in small caps and contain no special character except underscore.
(Note: I created the images to fit the resolution for my Nexus S. I'm not sure yet if it will get stretched or such when you use it in another resolution).
| [](http://supermekanismo.files.wordpress.com/2012/02/logo21.png) |
| Logo. Click for the higher resolution version then save. |
| [](http://supermekanismo.files.wordpress.com/2012/02/background.jpg) |
| The background. Click to enlarge then save. |
Android Layouts
Once you've saved the images, open your Main XML file. If you're familiar with using Swing in Java then you know that you use Layout Managers to arrange the UI elements. In Android, Layouts are implemented. I'll discuss the differences between them in another post. For now, I'll discuss Linear Layout.
(Click here if you already want to know more about the different layouts)
Linear layout is the default layout for the automatically generated XML file. UI elements are arranged either horizontally or vertically. When linear layout is set to vertical then UI elements are stacked like rows. When the layout is otherwise set to horizontal then the UI elements are placed like columns.
To get a feel for what I'm talking about, you can drag UI elements into the screen. Since the default setting is on vertical, the UI elements will be in rows. Below is a screenshot of what we'll have using Linear layout. We'll fix the ugly buttons in the next post.
| [](http://supermekanismo.files.wordpress.com/2012/02/linearlayout2.jpg) |
| Linear layout with a little extra settings. |
Placing the Background
If you don't have the properties window ready, go to Window > Show View > General and select Properties. This window will make things a lot easier. Once you've placed it somewhere in your environment, click the screen. The properties window should now have some labels and fields similar to the screenshot below. In the background field, there should be a button. When you click the button a window will pop up. You're now searching for the image to use as your background. Under Drawable the image should be there. Select it and click okay. You should have a cool looking background now.
| [](http://supermekanismo.files.wordpress.com/2012/02/load_background.jpg) |
| The drawable property along with the reference selection chooser. Click for a larger version. |
Placing the Logo
Once you have you're orangey background (or whatever image you used) it's time to place the logo. To insert an image, we need to first place an ImageView as the container for the image. Simple stuff. From the palette UI elements from the left of your screen, go to Images and Media. There should be what looks like a picture frame (see screenshot below). Drag this to the the our UI being designed and a window should pop up. Select the logo file from the list. Congratulations! You now have a logo.
| [](http://supermekanismo.files.wordpress.com/2012/02/imageview.jpg?w=230) |
| The ImageView. |
A little adjustment to the Logo
The logo is a bit too far up. Let's bring it down a little bit. Click the image and it's properties should come up in the properties window. Scroll down and copy the values below. I'll explain it after.
If you can't read the values/label then the values are "wrap_content" for layout height and layout width. 50dip for layout margin top.
| [](http://supermekanismo.files.wordpress.com/2012/02/logoadjustment.jpg?w=230) |
| Adjusting the logo. |
Dip? Wrap Content?
These are some of the values you'll encounter working with Android and XML. For layout width and height, there are 3 options namely "wrap_content", "fill_parent" and "match_parent". Wrap content means that the object will adjust itself depending on how big or small the object it contains is. For example, A button labeled "Play" will be thinner than an object named "Highlights" if both buttons share the "wrap_content" property in layout width. Fill parent fill the current parent object. If the layout is a linear layout with vertical setting then a button would take up the whole row. Match parent.. matches the parent object.
Dip means density independent pixel. Since phones have different sizes, it's recommend to use dip instead of pixel (or px) to set sizes. For adjusting font sizes, SP or scale independent pixel is preferred. The full explanation on the whys are here.
| [](http://supermekanismo.files.wordpress.com/2012/02/first_decent_output2.jpg) |
| Hopefully both our output. |
Recap
After this very long post, hopefully you actually got the same output. We learned how to set out program to debuggable (to use later). You got an idea on the purpose of some of the autogenerated code. We had a brief look into working with XML. We set our application to be fancy and use full screen. We also added a background and logo. I do hope I explained things in the way that it's easy to understand yet not too in-depth to just stop you from learning more. If you have any questions, feel free to comment.
Disclaimer: I'm not an Android expert but actually just beginning to learn to develop for it. I'm writing much of these posts because I had some headaches in understanding and trying to make things work. My aim is to share what I discover and share it in a way that's easy to read, understand and repeat.
Next up Buttons!
In the next post, we'll place buttons and add functions to them. Sounds simple but there's a bit of work to perform if you're not used to it. I'll also study themes before I write the next one. We'll make the buttons look in sync with the rest of the UI.
**Update: **Current source code can be downloaded here.