Série da semana: Primeiros passos no Flutter

Veja mais
Menu de vídeos

3. Atributos da Toolbar

Você está deslogado

Agora que já adicionamos a Toolbar no aplicativo precisamos definir quais serão os seus atributos. Faremos isso modificando o arquivo de layout da Activity.

02:25 min

[conteudo-mvp]

Declarando atributos

Ao substituir a ActionBar nativa (adicionada ao projeto durante sua criação) pela Toolbar do pacote de compatibilidade, precisamos definir manualmente como esse novo componente será apresentado ao usuário. Esses atributos devem ser declarados no arquivo de layout da Activity, conforme podemos ver no código a seguir:

  <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          android:elevation="4dp"
          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
          app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
  

Explicando o código

Veja aqui quais são os principais pontos sobre o código acima e tire suas dúvidas.

Linhas 1 e 2:

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" 
    android:layout_width="match_parent"

Nessa linha utilizamos a Toolbar do pacote de compatibilidade. Damos a ela um id android:id="@+id/toolbar" para referenciá-la no código. Também damos uma largura android:layout_width="match_parent", definindo que ela ocupará todo o espaço horizontal disponível.

Linha 2:

android:layout_height="?attr/actionBarSize"

Aqui utilizamos o valor especial ?attr/actionBarSizepara que a altura da Toolbar seja a mesma utilizada pela ActionBar nativa.

Linhas 3 e 4:

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Definimos aqui o tema da barra do aplicativo, que determinará suas cores de fundo e texto, bem como o tema do menu flutuante. É importante que aqui sejam utilizados os temas Dark/Light em contraste, principalmente para permitir a leitura do texto.

Baixar código fonte Baixar vídeo Ver Código Final
Avalie o curso
Suporte ao aluno - Deixe a sua dúvida.