Android 101: Como criar um menu de opções e adicioná-lo à Action Bar

Um menu é útil para disponibilizar acesso a diferentes partes de uma aplicação. É fácil adicionar um menu a uma aplicação Android.

Criar um ficheiro de recurso para o menu

O primeiro passo é criar uma pasta menu na pasta res da aplicação.

Depois é necessário adicionar um ficheiro XML.

Definem-se as opções individuais usando o elemento item. Especificam-se os atributos id, icon e title para cada opção. Eis o ficheiro do menu da aplicação Honeybuzz:

<?xml version="1.0" encoding="utf-8"?>
<menu
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menuRefresh"
          android:icon="@android:drawable/ic_popup_sync"
          android:title="@string/menu_refresh"
          android:alphabeticShortcut="r"
          android:showAsAction="always" />
    <item android:id="@+id/menuProgress"
          android:actionLayout="@layout/progress"
          android:showAsAction="always" />
    <item android:id="@+id/menuNewBuzz"
          android:icon="@android:drawable/ic_input_add"
          android:title="@string/menu_new_buzz"
          android:alphabeticShortcut="n"
          android:showAsAction="ifRoom|withText" />
    <item android:id="@+id/menuAccounts"
          android:icon="@android:drawable/ic_lock_lock"
          android:title="@string/menu_accounts"
          android:alphabeticShortcut="a"
          android:showAsAction="withText" />
    <item android:id="@+id/menuPreferences"
          android:icon="@android:drawable/ic_menu_preferences"
          android:title="@string/menu_preferences"
          android:alphabeticShortcut="s"
          android:showAsAction="withText" />
    <item android:id="@+id/menuAbout"
          android:icon="@android:drawable/ic_menu_info_details"
          android:title="@string/menu_about"
          android:alphabeticShortcut="b"
          android:showAsAction="withText" />
</menu>

O atributo showAsAction permite especificar quando e como é que cada opção aparece-se na ActionBar (a ActionBar é a barra com o título que aparece no topo de uma aplicação Android a partir da versão Honeycomb). Os valores disponíveis são: ifRoom, withText, never e always.

Construir o menu e gerir as opções

Depois é preciso actualizar a Activity onde o menu vai aparecer. É preciso criar o método onCreateOptionsMenu para construir o menu e também o método onOptionsItemSelected para gerir as opções. Foi assim que o menu da aplicação Honeybuzz foi construído:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    this.menuHandler = menu;

    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu, menu);
    hideProgress();

    return super.onCreateOptionsMenu(menu);
}

public void showProgress() {
    this.menuHandler.findItem(R.id.menuRefresh).setVisible(false);
    this.menuHandler.findItem(R.id.menuProgress).setVisible(true);
}

public void hideProgress() {
    this.menuHandler.findItem(R.id.menuProgress).setVisible(false);
    this.menuHandler.findItem(R.id.menuRefresh).setVisible(true);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            // go home
            Intent intent = new Intent(this, HoneybuzzListActivity.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            startActivity(intent);
            return true;
        case R.id.menuNewBuzz:
            startActivity(new Intent(this, HoneybuzzAddActivity.class));
            return true;
        case R.id.menuAccounts:
            showDialog(DIALOG_ACCOUNTS);
            return true;
        case R.id.menuPreferences:
            startActivity(new Intent(this, HoneybuzzPreferences.class));
            return true;
        case R.id.menuRefresh:
            // refresh buzzes (handled on child Activity)
            return true;
            case R.id.menuAbout:
            loadAboutDialog(getString(R.string.about_title));
            return true;
    }

    return super.onOptionsItemSelected(item);
}

A Action Bar aparece por padrão no Honeycomb. Fica no topo do ecrã e inclui o ícone da aplicação. O menu vai ser adicionado à Action Bar e, dependendo dos atributos de cada opção, algumas opções irão aparecer como botões só com um ícone, enquanto as restantes estarão disponíveis como texto numa dropdown.

Normalmente quando se selecciona uma opção inicia-se uma Activity. Como a maioria das Activities é descendente da Activity principal, estas vão partilhar o mesmo menu. Os métodos showProgress/hideProgress são usados quando a aplicação está ocupada a processar informação. Existe um botão de refresh que pode ser activado para carregar os dados de novo e, quando a aplicação está a processar os dados, o botão vai ser substituído por um indicador de progresso.

Para gerir o botão home (o botão com o ícone da aplicação que fica no canto superior esquerdo) basta comparar o ID com android.R.id.home.

Como gerar ícones para as opções da Action Bar

Em geral cada opção é acompanhada de um ícone. É necessário fazerem-se diferentes imagens para tamanhos diferentes de ecrãs. O Android Asset Studio é uma ferramenta útil que gera as diferentes imagens. Basta fornecer uma imagem ou escolher uma da galeria e permite também adicionar um texto personalizado. Existem outras opções de configuração (padding, trim, theme) e no final faz-se o download de um arquivo zip com todas as imagens.

O Android Asset Studio também é útil para gerar ícones para outras partes da aplicação (launcher, Action Bar, etc.) e faz parte do android-ui-utils, que também fornece templates Photoshop para os ícones respeitando as directrizes do Android.

Além de poder criar os seus próprios ícones, também pode usar os ícones que vêm com o Android. O Android vem com um conjunto de drawables que podem ser usados em várias situações diferentes. Por exemplo, para o Froyo (Android 2.2) podem ver no Android Drawables explorer o que está disponível. Acedem-se a estes recursos desta forma: android.R.drawable.ic_menu_save.

Para ver que drawables estão disponíveis no Honeycomb (ou noutra versão qualquer), recomendo que adicionem uma ImageView a um ficheiro de layout, usando a vista "Graphical Layout". Depois se escolherem "System Resources" vão ver todas as opções disponíveis assim como uma imagem de amostra.

Mais recursos

Nuno Freitas
Publicado por Nuno Freitas em 28 novembro, 2011

Artigos relacionados