Android Done Cancel Actionbar

Question

Is there any way to create custom actionbar like below screen, using actionbarsherlock library

Answer 1

Here is how you actually do it in xml

use Roman's layout in Honeycomb and above

/layout-v11/actionbar_custom_view_done_discard.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="?android:attr/dividerVertical"
    android:dividerPadding="12dp"
    android:orientation="horizontal"
    android:showDividers="middle" >

    <include layout="@layout/actionbar_discard_button" />

    <include layout="@layout/actionbar_done_button" />

</LinearLayout>

/layout-v11/actionbar_discard_button.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionbar_discard"
    style="?android:actionButtonStyle"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="@drawable/selectable_background_mystyle" >

    <TextView style="?android:actionBarTabTextStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingRight="20dp"
        android:drawableLeft="@drawable/ic_menu_cancel"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:text="@string/menu_cancel" />
</FrameLayout>

/layout-v11/actionbar_done_button.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionbar_done"
    style="?android:actionButtonStyle"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="@drawable/selectable_background_mystyle" >

    <TextView
        style="?android:actionBarTabTextStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableLeft="@drawable/ic_menu_save"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:paddingRight="20dp"
        android:text="@string/menu_save" />

</FrameLayout>

and backport it with ActionBar Sherlock

/layout/actionbar_custom_view_done_discard.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

   <include layout="@layout/actionbar_discard_button" />

    <View
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:layout_marginTop="12dp"
        android:layout_marginBottom="12dp"
        android:background="#55FFFFFF" />

    <include layout="@layout/actionbar_done_button" />

</LinearLayout>

/layout/actionbar_discard_button.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionbar_discard"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:paddingRight="20dp"
    android:background="@drawable/selectable_background_mystyle" >

    <TextView
        style="@style/Widget.Sherlock.ActionBar.TabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableLeft="@drawable/ic_menu_cancel"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:text="@string/menu_cancel" />

</FrameLayout>

/layout/actionbar_done_button.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionbar_done"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:paddingRight="20dp"
    android:background="@drawable/selectable_background_mystyle" >

    <TextView
        style="@style/Widget.Sherlock.ActionBar.TabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableLeft="@drawable/ic_menu_save"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:text="@string/menu_save" />

</FrameLayout>

Answer 2

You should be able to accomplish this via setCustomView(). Roman Nurik has a G+ post on ways of implementing DONE+DISCARD, with source code available. While his code does not use ActionBarSherlock, I suspect that it will port over.

However, bear in mind that button backgrounds look a bit different on Android 2.x than on 3.0+, and so you may need to do a bit more work to get your buttons in the action bar space to look the way that you want.

Answer 3

To complete the usage instructions @Vlasto Benny Lava has described, here's the code that actually sets the ActionBar (based on the original code for API 14 by Roman Nurik) -- adapted for ActionBarSherlock usage.

// BEGIN_INCLUDE (inflate_set_custom_view)
// Inflate a "Done/Cancel" custom action bar view.
final LayoutInflater inflater = (LayoutInflater) getSherlockActivity().getSupportActionBar()
    .getThemedContext().getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
final View customActionBarView = inflater.inflate(R.layout.actionbar_custom_view_done_discard,
    null);
customActionBarView.findViewById(R.id.actionbar_done).setOnClickListener(
    new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        // "Done"
        Toast.makeText(getActivity(), "DONE", Toast.LENGTH_SHORT).show();
      }
    });
customActionBarView.findViewById(R.id.actionbar_discard).setOnClickListener(
    new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        // "Cancel"
        Toast.makeText(getActivity(), "DISCARD", Toast.LENGTH_SHORT).show();
      }
    });

// Show the custom action bar view and hide the normal Home icon and title.
final ActionBar bar = getSherlockActivity().getSupportActionBar();
bar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM, ActionBar.DISPLAY_SHOW_CUSTOM
    | ActionBar.DISPLAY_SHOW_HOME | ActionBar.DISPLAY_SHOW_TITLE);
bar.setCustomView(customActionBarView, new ActionBar.LayoutParams(
    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
// END_INCLUDE (inflate_set_custom_view)

I use it for a Fragment hence the getSherlockActivity(). If used in Activity, you can freely omit that part.

There are two places where you can setup this custom ActionBar:

1. in Activitys onCreate() (or in Fragments onAttach()),

2. in Activitys/Fragments onCreateOptionsMenu().

On procedure how to revert the ActionBar to the "original" form (after the DONE or DISCARD was selected), you can refer to this answer.