Cancel Done buttons in Calendar App - Is it part of Action Bar?

Question

Hi, I'm refering the Cancel/Done button in Calendar app. These 2 buttons are pinned on the top, and they are always visible, even if you scrolling the bottom "form".

May I know, is it part of Action Bar? If so, how should the implementation look like?

Answer 1

Remember that Android is open source, and most apps preinstalled on an android device running aosp are open source.

Here's the project: https://github.com/android/platform_packages_apps_calendar

Yes, it is a custom ActionBar setup, here's the XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:divider="?android:attr/dividerVertical"
android:dividerPadding="12dip
android:showDividers="middle">

<!-- id must match corresponding menu item id -->
<LinearLayout
    android:id="@+id/action_cancel
    style="@style/EditEventCustomActionButton">

<ImageView
    android:src="@drawable/ic_menu_cancel_holo_light"
    style="@style/EditEventCustomActionButtonImage" />
    <TextView
        android:text="@string/discard_label"
        style="@style/EditEventCustomActionButtonText" />

</LinearLayout>

<!-- id must match corresponding menu item id -->
<LinearLayout
    android:id="@+id/action_done"
    style="@style/EditEventCustomActionButton">

    <ImageView
        android:src="@drawable/ic_menu_done_holo_light"
        style="@style/EditEventCustomActionButtonImage" />
    <TextView
        android:text="@string/save_label"
        style="@style/EditEventCustomActionButtonText" />

    </LinearLayout
</LinearLayout>

That is later set on runtime:

View actionBarButtons = inflater.inflate(R.layout.edit_event_custom_actionbar,
new LinearLayout(mContext), false);
View cancelActionView = actionBarButtons.findViewById(R.id.action_cancel);
cancelActionView.setOnClickListener(mActionBarListener);
View doneActionView = actionBarButtons.findViewById(R.id.action_done);
doneActionView.setOnClickListener(mActionBarListener);
mContext.getActionBar().setCustomView(actionBarButtons);

Hope that helped

Answer 2

Just for share... To implement into a sherlock fragment, the LayoutInflater used is the one from oncreateView method:

    setHasOptionsMenu(true);
    View actionBarButtons = inflater.inflate(R.layout.edit_event_custom_actionbar, new LinearLayout(getActivity()), false);

    View cancelActionView = actionBarButtons.findViewById(R.id.action_cancel);
    cancelActionView.setOnClickListener(mActionBarListener);

    View doneActionView = actionBarButtons.findViewById(R.id.action_done);
    doneActionView.setOnClickListener(mActionBarListener);


    getSherlockActivity().getSupportActionBar().setHomeButtonEnabled(false);
    getSherlockActivity().getSupportActionBar().setDisplayShowHomeEnabled(false);
    getSherlockActivity().getSupportActionBar().setDisplayHomeAsUpEnabled(false);
    getSherlockActivity().getSupportActionBar().setDisplayShowTitleEnabled(false);

    getSherlockActivity().getSupportActionBar().setDisplayShowCustomEnabled(true);
    getSherlockActivity().getSupportActionBar().setCustomView(actionBarButtons);

where the action bar listener is

private final View.OnClickListener mActionBarListener = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        onActionBarItemSelected(v.getId());
    }
};

private boolean onActionBarItemSelected(int itemId) {
    switch (itemId) {
    case R.id.action_done:
        save();
        break;
    case R.id.action_cancel:
        System.err.println("cancel");
        getActivity().onBackPressed();
        break;
    }
    return true;
}

and the layout is the same of previous post:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:divider="?android:attr/dividerVertical"
android:dividerPadding="12dip
android:showDividers="middle">

<!-- id must match corresponding menu item id -->
<LinearLayout
    android:id="@+id/action_cancel
    style="@style/EditEventCustomActionButton">

<ImageView
    android:src="@drawable/ic_menu_cancel_holo_light"
    style="@style/EditEventCustomActionButtonImage" />
    <TextView
        android:text="@string/discard_label"
        style="@style/EditEventCustomActionButtonText" />

</LinearLayout>

<!-- id must match corresponding menu item id -->
<LinearLayout
    android:id="@+id/action_done"
    style="@style/EditEventCustomActionButton">

    <ImageView
        android:src="@drawable/ic_menu_done_holo_light"
        style="@style/EditEventCustomActionButtonImage" />
    <TextView
        android:text="@string/save_label"
        style="@style/EditEventCustomActionButtonText" />

    </LinearLayout
</LinearLayout>