Options Menu Layout in Android App

Question

I am new to Android Development and i already searched for my question - i guess i didnt use the right keywords :(

I'd like to have a menu like this in my app:

What I get instead is this:

The first Screenshot is taken in the calculator app made by Google.

Question is now: How do I create it their way? I checked Google, this page, developer.android.com ~ nothing :(

I looked up, how to create a custom view for the standard

    @Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();       
    inflater.inflate(R.menu.mainmenu, menu);
    return true;
}

But that always looked pretty much the same, except for background-colors, "how many items in a row", etc. - not in any way like I want it to be.

---

Ok, looking at example-sources by Google, i found out its a problem with

        <activity
        android:theme="@android:style/Theme.NoTitleBar" >

in my AndroidManifest.xml

If I change this to

        <activity
        android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" >

it works perfectly. But this causes another problem ...

Using Theme.NoTitleBar i get a nice-looking TabWidget:

Using Theme.Holo.NoActionBar.Fullscreen i get this one:

This also affects all my buttons and so on :( Any suggestions?

Answer 1

You are doing nothing wrong. The look just changed over various android versions.

The calculator screenshot should be taken on an Android 4 device, while your screenshot should be taken on android 2.3. You can test this by setting up emulators with various android versions(1) and run your app in it. The look will change accordingly while using an identical codebase.

And I would recommend not to change that, your users are most likely used to the look&feel of their particular android version. Standing out is not a good thing here (imho).

(1) Test on 2.2. or lower, 2.3 and 4.0. These are the major changes.