5

Eu já vi a própria documentação do android já fiz todos os passos de outros fóruns e ainda não consegui usar toolbar no meu layout de tela.

Como devo prosseguir passo a passo em relação a implementação e utilização no meu layout o toobar?

7
  • 1
    Infelizmente não consigo dizer exatamente o erro, porque ainda não disponibilizaram o código fonte da última versão do appcompat. Chuto que é o tema ou está usando setSupportActionBar antes do setContentView. Poderia verificar esses pontos?
    – Wakim
    Commented 2/11/2014 às 18:32
  • na questão do tema eu tive q adicionar no manifest.xml a linha android:theme="@style/Theme.AppCompat" pois antes estava só android:theme="@style/Theme" Commented 2/11/2014 às 18:34
  • 1
    Ok, troque o tema para @style/Theme.AppCompat.NoActionBar. Com esse tema, o seu app não terá Action Bar, e o Toolbar fará o papel de Action Bar no lugar.
    – Wakim
    Commented 2/11/2014 às 18:36
  • 1
    Acho que não deixei muito claro isso, vou melhorar isso na resposta. Adoro a plataforma Android, estou sempre tentando acompanhar as novas tecnologias. Uma dica que eu dou é tentar entender o que está por trás, vendo o código fonte sempre que tiver um erro estranho ou pra entender como funciona.
    – Wakim
    Commented 2/11/2014 às 18:44
  • 1
    @Wakim muito obrigado mesmo pela suas dicas. Commented 2/11/2014 às 19:09

1 Resposta 1

16

Para usar o Toolbar, você tem duas opções:

  1. Se seu aplicativo precisa suportar versões anteriores a 21 então deve usar o android.support.v7.widget.Toolbar em seus layouts;
  2. Caso contrário basta usar o android.widget.Toolbar.

Para começar, infelizmente, o Toolbar precisa estar em todos os layouts. Por questões de configurações de atributos de tema e posicionamento. Se instanciar o Toolbar e adicioná-lo manualmente no layout pode ser complicado ter de configurar sua posição e adicionar todos os atributos para estilizá-lo.

Lembrando que nessa resposta, é preciso importar a library do appcompat v7 21, ou adicionando o jar se for no Eclipse, ou importando a dependência se for no Android Studio. E como o appcompat depende da support library v4, ela precisa ser adicionado também.

Como estou usando o Android Studio, utilizo essas duas dependências:

 compile 'com.android.support:appcompat-v7:21.+'
 compile 'com.android.support:support-v4:21.+'

Atenção, se está usando o Toolbar como substituto da Action Bar, é preciso usar um tema sem o ActionBar. Para isso use os temas com final NoActionBar, tanto do appcompat quanto na versão 21. Um dos temas que uso eu uso do appcompat para esse propósito é o Theme.AppCompat.Light.NoActionBar.

Um exemplo de layout usando o Toolbar é:

<?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:orientation="vertical">

    <include android:id="@+id/toolbar" layout="@layout/toolbar_support" />

    <FrameLayout
        android:id="@+id/am_frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Nesse caso, utilizei o include por questões de reaproveitamento (DRY), supondo que o Toolbar terá sempre os mesmo atributos em todos os layouts não faz sentido repetir em todos os lugares.

A posição dele pode variar a vontade no layout, e isso é uma das vantagens de se utilizar o Toolbar.

Definição do Toolbar no include:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="@dimen/ab_height"
    android:layout_width="match_parent"
    android:minHeight="@dimen/ab_height"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Se estiver usando android.widget.Toolbar, a definição ficaria:

<android.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_height="@dimen/ab_height"
    android:layout_width="match_parent"
    android:minHeight="@dimen/ab_height"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.Material.ActionBar"
    android:popupTheme="@style/ThemeOverlay.Material.Light" />

Na Activity, algumas coisas precisam ser feitas.

Se quiser usar o Toolbar como um substituto para o ActionBar, basta usar o método setSupportActionBar (appcompat) ou setActionBar (Android 21) após o setContentView. Se está usando o appcompat, é primordial que sua Activity seja uma subclasse de ActionBarActivity.

Exemplo:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    // Dando a responsabilidade de Action Bar para o Toolbar
    Toolbar tlb = findViewById(R.id.toolbar);

    setSupportActionBar(tlb);
    // ou
    //setActionBar(tlb);

    // Apos isso, podera configurar sua Action Bar normalmente
    // Por exemplo:
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);

Para usar setSupportActionBar ou setActionBar, é preciso usar um tema que não tenha Action Bar, senão terá problemas. Pois está adicionando um Action Bar a uma Window que já tem um. Para isso use um dos temas com sufixo *.NoActionBar (e.g: Theme.AppCompat.NoActionBar, Theme.Material.NoActionBar e etc...)

Em relação a construção de menus, usando setSupportActionBar ou setActionBar, as demais callbacks (onCreateOptionsMenu, onOptionsItemSelected e etc...) continuam sendo chamados igualmente. Logo não é preciso realizar nenhuma alteração no código.

Caso não esteja setando o Toolbar como ActionBar, é preciso usar o método Toolbar.inflateMenu para adicionar itens de menu ao Toolbar.


Algumas observações importantes

  1. Se usar um dos temas sem Action Bar (e.g: Theme.AppCompat.Light.NoActionBar), e não setar o Toolbar usando o setSupportActionBar ou setActionBar, irá ter problemas com NullPointerException nas chamadas do getSupportActionBar ou getActionBar.

  2. Se estiver usando Action Mode com o Toolbar no topo da tela, o Toolbar não é sobreposto pela barra do Action Mode , como no Action Bar padrão. A barra do Action Mode fica acima do Toolbar. Para evitar esse problema recomendo que esconda o Toolbar durante o Action Mode.

    Um exemplo seria:

    @Override
    public boolean onCreateActionMode(ActionMode actionMode, Menu menu) {
        MenuInflater inflater = actionMode.getMenuInflater();
    
        inflater.inflate(R.menu.custom_deck_cab, menu);
    
        Toolbar tlb = findViewById(R.id.toolbar);        
        tlb.setVisibility(View.GONE);
    
        return true;
    }
    
    @Override
    public void onDestroyActionMode(ActionMode actionMode) {
        Toolbar tlb = findViewById(R.id.toolbar);        
        tlb.setVisibility(View.VISIBLE);
    }
    
  3. Nessa nova versão, houve a depreciação dos métodos relacionados aos modos de navegação do Action Bar (e.g: setNavigationMode, setSelectedNavigationItem e setListNavigationCallbacks), logo se usa navegação por abas ou lista (NAVIGATION_MODE_LIST ou NAVIGATION_MODE_TABS), deverá migrar para o Toolbar.

    Essa migração pode ser feita adicionando View's ao Toolbar, já que ele é um ViewGroup. Para navegação por abas, poderá adicionar um PagerTabStrip, ou semelhantes, no Toolbar. Se estiver usando navegação por lista, poderá adicionar um Spinner ao Toolbar, e conseguirá o mesmo efeito.

Referências:

  1. http://android-developers.blogspot.com.br/2014/10/appcompat-v21-material-design-for-pre.html
  2. https://chris.banes.me/2014/10/17/appcompat-v21/
6
  • já esta quase dando certo^^ obrigado mesmo.. somente da um erro na activity dizendo que precisa do seguinte código: requestWindowFeature(Window.FEATURE_ACTION_BAR); e eu adicionei antes do setContentView(R.layout.activity_main); depois da o seguinte erro : requestFeature() must be called before adding content, procurei muito nos foruns e não achei solução. Commented 2/11/2014 às 17:56
  • 1
    Hmm, estranho esse erro, esse foram todos os passos que fiz pra migrar do Action Bar para o Toolbar e não deu erro nenhum. Onde esse erro ocorre? poderia colocar a mensagem inteira e o local? Eu não recomendo chamar o requestWindowFeature(Window.FEATURE_ACTION_BAR) porque ele vai adicionar o ActionBar e não é necessário.
    – Wakim
    Commented 2/11/2014 às 18:12
  • ok eu so chamei o requestWindowFeature(Window.FEATURE_ACTION_BAR) tinha dado um erro anterior, tive q adicionar... mas vou tirar e mostrar o erro no meu post. Commented 2/11/2014 às 18:15
  • Sobre usar o Action Mode, o Toolbar também pode ser sobreposto usando <item name="windowActionModeOverlay">true</item> no tema do app ao invés de ser feito programaticamente. Link: stackoverflow.com/questions/26443403/…
    – Luídne
    Commented 19/01/2015 às 18:47
  • @Luídne, hmmm, não sabia disso. Bem legal saber desse atributo.
    – Wakim
    Commented 19/01/2015 às 19:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .