Step #6: Adding a Delete App Bar Item

We have one more app bar item to create, this one to allow the user to delete an item. We will add that to the app bar on EditFragment, so the user can delete the item from there.

Right-click over res/drawable/ in the project tree and choose “New” > “Vector Asset” from the context menu. This brings up the Vector Asset Wizard. There, click the “Clip Art” button and search for delete:

Choose the “delete” icon and click “OK” to close up the icon selector. Change the name to ic_delete. Then, click “Next” and “Finish” to close up the wizard and set up our icon.

Once again, if the icon selector did not open, that may be due to this Arctic Fox bug. Instead, just close up the Vector Asset wizard, and download this file into res/drawable instead.

Open res/menu/actions_edit.xml in the IDE. In the graphical designer view, drag a second “Menu Item” into the preview area.

In the Attributes pane, fill in delete for the “id”. Then, choose both “ifRoom” and “withText” for the “showAsAction” option. Next, click on the “O” button next to the “icon” field. This will bring up an drawable resource selector. Click on ic_delete in the list of drawables, then click OK to accept that choice of icon. Then, click the “O” button next to the “title” field. As before, this brings up a string resource selector. Click on “+”, then click on “String Value” in the resulting drop-down. In the dialog, fill in menu_delete as the resource name and “Delete” as the resource value. Click OK to close the dialog, to complete the configuration of this app bar item.

Now, when you run the app and you go to add a new to-do item, or later you edit an existing to-do item, you will see the “delete” app bar item:

The fact that there is a delete icon for an add operation is… disturbing. We will address that later in this tutorial.