Action bar: Best practice for older Android versions

Question

I would like to have a menu bar at the top of my application - just like Facebook, Google+ or Twitter have:

Here's a screenshot from the Twitter app which shows this bar: It is shown in every activity and features the company logo on the left (clickable) and 1-3 menu items (clickable images) on the right.

It can also be seen in the GDCatalog app:

So there are a few requirements for that action bar:

• It has to work on older Android platforms, too, such as API level 8.
• It has to be available in every activity without repeating the code time and again.
• It has to adapt to the screen size so that it takes the full width.

What's the best practice to implement such an action bar?

GreenDroid does it like that (using merges):

<?xml version="1.0" encoding="utf-8"?>

<!--
/*
** Copyright (C) 2010 Cyril Mottier (http://www.cyrilmottier.com)
**
** Licensed under the Apache License, Version 2.0 (the "License");
** you may not use this file except in compliance with the License.
** You may obtain a copy of the License at
**
**     http://www.apache.org/licenses/LICENSE-2.0
**
** Unless required by applicable law or agreed to in writing, software
** distributed under the License is distributed on an "AS IS" BASIS,
** WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
** See the License for the specific language governing permissions and
** limitations under the License.
*/
-->

<merge
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageButton
        xmlns:android="http://schemas.android.com/apk/res/android"
        style="?attr/gdActionBarItemStyle"
        android:id="@+id/gd_action_bar_item"
        android:layout_height="fill_parent"
        android:scaleType="center" />

    <ImageView
        android:layout_width="?attr/gdActionBarDividerWidth"
        android:layout_height="fill_parent"
        android:background="?attr/gdActionBarDividerDrawable" />

    <TextView
        style="?attr/gdActionBarTitleStyle"
        android:id="@+id/gd_action_bar_title"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1.0"
        android:gravity="left|center_vertical"
        android:singleLine="true"
        android:textColor="?attr/gdActionBarTitleColor"
        android:textSize="16sp"
        android:textStyle="bold"
        android:paddingRight="10dp"
        android:paddingLeft="10dp" />

</merge>

Is this a good solution? Will it work on older platforms as well? What coding parts are still missing here?

I know that we can find several questions about these action bars here yet. But nevertheless, I couldn't find out what is the best and easiest way to implement the menu bar working across (almost) all API levels. Is Google's solution maybe the best?

Thanks a lot in advance!

Answer 1

You might want to checkout the ActionBarSherlock. The source code is available here. It will give you an idea of how it is used along with fragments. It will give you some idea on how to proceed.

There is an android compatibility library which google created to use some of the new API's they created for honeycomb on lower version such as 1.5 and above. It can be found in the android sdk folder like E:\Program Files\Android\android-sdk-windows\android-compatibility\v4\android-support-v4.jar. If you don not have this jar you will need to download it using the avd manager.

Answer 2

My personal preference is to use AndroidBarSherlock. It's an excellent package and performs very well. If you want to avoid fragments, you can also use Android-ActionBar. The only thing about the android-actionbar is that you'll have to add the actionbar to each of your layouts.

Answer 3

What I've done is added an xml layout file called titlebar.xml, which looks something like:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" style="@style/FullWidth">
    <RelativeLayout style="@style/FullWidth">
        <ImageView style="@style/WrapContent" android:src="@drawable/mylogo" android:layout_centerVertical="true" android:id="@+id/imageViewIcon" />
        <TextView style="@style/Title" android:layout_toRightOf="@+id/imageViewIcon" android:layout_toLeftOf="@+id/buttonSomeButton" android:id="@+id/textViewAppName"  android:text="@string/appName"/>
        <TextView style="@style/SubTitle" android:text="@string/empty" android:layout_marginLeft="3dip" android:layout_toRightOf="@+id/imageViewIcon" android:layout_toLeftOf="@+id/buttonSomeButton" android:layout_below="@+id/textViewAppName" android:id="@+id/textViewSubtitle" />
        <Button style="@style/NormalButton" android:id="@+id/buttonSomeButton" android:drawableRight="@drawable/button_image" android:layout_centerVertical="true" android:layout_alignParentTop="true" android:layout_alignParentRight="true" />
    </RelativeLayout>
</merge>

And then I have created a control that extends LinearLayout called TitleBar.java, that looks something like:

package com.sample.ui;

public class TitleBar extends LinearLayout {
    public TitleBar(Context context, AttributeSet attrs) {
        super(context, attrs);    
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.titlebar, this);
    }
}

You can hook up the buttons all within this class. If you need to have custom button handlers, you can create set methods in this class. It keeps it all nicely contained in a single control.

To use it in any XML file where I want to include this titlebar, to do so like:

<com.sample.ui.TitleBar style="@style/FullWidth" />

That works well for my purposes, and it is compatible with 2.1 and above. I haven't tested with below 2.1, but I don't see why it wouldn't work with previous versions.