Android - need UI help/advice

Question

I have been working on Android for the past couple of months getting to know how various components work.

One area I am completely lacking in knowledge is any sort of User Interface or graphical interface creation.

As an excercise I have been asked to break down the HTC call screen into what components it contains and rebuild as close as possible.

Here is a picture of the HTC call screen:

From my understanding the above UI has a custom title bar where "Meteor" and the call time appears.

Then the main image in the middle block along with a text view showing the called party, in this case "Voice Mail" and the number.

The bottom is then a custom view maybe with three custom buttons used within it.

Would I be correct in my above assumptions?

So the parts I should look into start programming are a custom title bar and a custom view with three custom buttons to place at the bottom?

What layout would be reccomended?

I hope this question is seen as relative to Stack Overflow, if it is not then I will delete it.

Thanks in advance

Answer 1

using c:\Program Files\Android SDK\tools\hierarchyviewer.bat you can check out how screens on programs have been created

Answer 2

I've been looking at that layout and changed my mind a few times about it, but I think this is how it's done. Disclaimer: I haven't tried using steelbytes's method, so I could be entirely wrong!

1) The reflection of the robot under the text is probably done in a similar manner to that of the LunarLander example application. That game has a drawing canvas with a floating TextView in the middle of the screen to display text. It uses a FrameLayout which contains a customised View (which extends SurfaceView and holds the drawing of the graphics) and a RelativeLayout, which in turn has a TextView. The trick is that the customised drawing View and the RelativeLayout are both set to fill_parent, but the RelativeLayout's TextView gets drawn on top of the drawing View. I imagine you'd have to do something similar because drawing a reflection of the dialed contact's image would probably require a Canvas of some sort because it would have to be able to generate the reflection programmatically.

2) The list of buttons at the bottom probably isn't a customised View, but it's cleverly done to look like that. I think it's just a simple horizontal LinearLayout with a gradient-coloured background with 3 buttons in it. The clever part comes with the choice of artwork used for the buttons; to achieve that look where they appear to be cut into the button bar, they used carefully drawn background images with shading on the edges.That way it looks like the button bar has three holes cut in it for the buttons, but the buttons are just drawn on top of it like other buttons.

Answer 3

I, Like yourself, have just gotten interested in developing for Android, and don't know much about it, myself, so take this with a grain or two of salt.

If you want to see how layouts work, there is a programming environment called Eclipse that you can download for free. It has a sort of form designer / layout editor that you can play with that shows you what your layout will look like, a tree view that shows how your layouts are nested, and you can view the raw XML used to create it.

This is an installation guide: http://developer.android.com/sdk/eclipse-adt.html#installing

It contains everything you need to know to get eclipse installed and working with the android SDK.

The Android SDK has a package with sample applications. You can import these samples into eclipse and then check the layout editor to see what they did. However, not all layout components seem to work in eclipse's editor, so running the program in an android virtual device may be necessary to see what the app looks like to start with.

That's the best way I can think of for beginners like you and I to get acquainted with how layouts work in android.