Android action bar with two stretched buttons

Question

Does anybody know how to easily implement an action bar with two stretched buttons?

Here is an example of the Google calendar app:

Answer 1

I know 2 ways to do this, but one doesn't stay on top.

Here is the 1st:

You need to override the method onCreateOptionsMenu, but this is add on the ActionBar, you need API 11 to do this and when you rotate the screen this buttons appear on ActionBar, this depends of the screen size.

 @Override
 public void onCreateOptionsMenu(Menu menu, MenuInflater inflater)
 {
     MenuItem add = menu.add(Menu.NONE, ADD_TIME, 0, R.string.add_time);
     add.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

     MenuItem qkAdd = menu.add(Menu.NONE, QUICK_ADD_TIME, 1, R.string.quick_add_time);
     qkAdd.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
 }

and this is the result:

if you're using a Fragment you need to set setHasOptionsMenu to true, otherwise the menu wont show.

Here is the 2nd:

cancel_done.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_bar"
android:orientation="horizontal" >

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:dividerPadding="12dp"
    android:orientation="vertical"
    android:showDividers="end" >

    <Button
        android:id="@+id/button1"
        style="@drawable/btn_cab_done_holo_light"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="@drawable/btn_cab_done_holo_light"
        android:text="CANCEL"
        android:textSize="14sp" />

</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:dividerPadding="12dp"
    android:orientation="vertical"
    android:showDividers="beginning" >

    <Button
        android:id="@+id/button2"
        style="@drawable/btn_cab_done_holo_light"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="@drawable/btn_cab_done_holo_light"
        android:text="DONE"
        android:textSize="14sp" />

</LinearLayout>
</LinearLayout>

the resource style btn_cab_done_holo_light.xml you can find on ..\sdk\platforms\android-%%\data\res\drawable and then on your layout you just add:

        <include
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_gravity="fill"
            layout="@layout/cancel_done" />

and this is the result:

I don't now if is the best way, but it's working.

Answer 2

You can use the actionMode of the ActionBar to implement the Done and Cancel actions.

See http://developer.android.com/guide/topics/ui/menus.html#CAB

Answer 3

Is called done bar in android. have a look at this it will be helpfull https://github.com/googlesamples/android-DoneBar

Answer 4

If you rather have this in the ActionBar for whatever reason, one way to achieve this is by using a custom view on the Action bar. Within you Custom View's layout then worry about setting up the buttons width.

Telling the activity to use a custom view for the action bar:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);   
    final ActionBar ab = getActionBar();
    ab.setDisplayShowHomeEnabled(false);
    ab.setDisplayShowTitleEnabled(false);     
    final LayoutInflater inflater = (LayoutInflater)getSystemService("layout_inflater");
    View view = inflater.inflate(R.layout.action_bar_edit_mode,null); 
    ab.setCustomView(view);
    ab.setDisplayShowCustomEnabled(true);
}

layout/action_bar_edit_mode.xml can then look something like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="fill_horizontal"
    android:orientation="horizontal" >
    <LinearLayout 
        android:layout_alignParentLeft="true"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Button
        android:id="@+id/action_bar_button_cancel"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"           
        android:layout_weight="1"
        android:text="Cancel" />

        <Button
        android:id="@+id/action_bar_button_ok"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"           
        android:layout_weight="1"
        android:text="Ok" />
    </LinearLayout>    
</RelativeLayout>

Hope it helps someone!

Note: I realize the ugly nesting layouts here and normally I wouldn't recommend this but for some reason the actionbar's own layout refuses to let the LinearLayout take up the entire width on its own. Normally you should avoid nesting layouts unnecessarily like this! Perhaps if someone sees this they can point us to a better solution?

What it looks like:

EDIT: There is an excellent post by Roman Nurik where he explains a way to do this very nicely.

EDIT 2: If anyone is curious, the correct way to lay out the buttons so that they expand the width of the actionbar without the need to nest your layouts like I did above, is to set the custom view with the proper layout parameters that allows its component to match the parent group.

Essentially:

actionBar.setCustomView(view,new ActionBar.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT));

Answer 5

Make a horizontal LinearLayout with two buttons. Then set each of their widths to match_parent and android:layout_weight="0.5" (Each button will then take up 50% of the space).

EDIT:

To apply as the ActionBar background:

(ActionBarSherlock) getSupportActionBar().setCustomView(R.layout.my_view);
(ActionBar) getActionBar().setCustomView(R.layout.my_view);