tags:

views:

523

answers:

4

Hi,

I'm taking my first steps in Android programming.

My application is to create entries in a database. For this task I have created a new Activity. All is fine - but I don't really like how it looks.

Currently, the emulator shows this:
Current Layout

I'd like to have something similar to the "New Contact" Activity:

  • Buttons at the bottom of the window, not directly below the other controls (I'll hopefully figure that out myself)
  • Buttons within a nice "box" like shown in the screenshot (what's the control hosting the buttons here?)
  • When soft-keyboard is displayed, the buttons should "move up". If there's not enough room, the entire area should be scrollable (I'll try and figure that out myself too)

Sample can be seen here:
alt text

Which control hosts the buttons in the above "New contact" screenshot? I'd like to use the same for my buttons.

A: 

You can put them in LinearLayout and assign weight of 1 to each of the buttons. Also if you own dev phone / or want to see UI of the application in emulator - there is a very cool tool call hierarchyviewer http://developer.android.com/guide/developing/tools/hierarchy-viewer.html and you can see how UI of app you like has been laydown.

Alex Volovoy
Hi, maybe I wasn't being clear enough - the buttons are basically layed out as I want them to be, but I do not know how I'd be able to create the nice, silver button "container" as shown in the second screenshot.
Thorsten Dittmar
+2  A: 

The contacts layout looks like a ListView sitting on top of some sort of RelativeLayout or LinearLayout housing the buttons. The silver background may simply have been set using android:background on the Layout itself (layouts are views).

I found that the commonsware books are excellent resources for getting started and have good examples for this type of layout.

RickNotFred
Hey, thanks for the shout-out!
CommonsWare
I also found this topic on contacts source code: http://stackoverflow.com/questions/560411/application-source-code-for-contactsandroid
RickNotFred
Thanks, you are my hero. Set android:background to "@android:drawable/bottom_bar" and I get exactly what I wanted. Perfect!
Thorsten Dittmar
+3  A: 

One way to figure out what an existing activity does is to use hierarchyviewer and examine the activity's contents.

Another way to figure out what a native Android activity does is to look at the source code. In this case, it would appear that the buttons are inside of a horizontal LinearLayout with style="@android:style/ButtonBar" to give the silver sheen. That style, in turn, uses @android:drawable/bottom_bar as its background. That image can be found in your SDK installation -- go to the platform directory of your choice, then data/res/drawable-hdpi and data/res/drawable-mdpi for the two versions.

CommonsWare
+1  A: 

Hey, this is a little late, and I know you've already got the silver bar you wanted, which is all good, but I've stumbled upon a really good guide on controlling the soft keyboard for best user experience. It covers, among other things, how to make the visible area resize to fit the button bar in the view while typing, which is done by specifying the activity in the manifest file like so:

<activity android:name=".MyActivity" android:windowSoftInputMode="resize" />

I really recommend reading it, it covers a lot more helpful stuff than just that. Hope that helps; I couldn't see that anyone else has answered that particular part of your question.

David Hedlund
+1 Thanks for pointing me to the IME guide! While I've figured out already how to make the visible area resize when the input panel is shown, this article seems to hold other very valuable information!
Thorsten Dittmar