[Dev:Android ] — Componente Toolbar, os primeiros passos

O Toolbar é um dos principais componentes de um aplicativo Android. Através dele, o usuário acessa as funcionalidades mais importantes do aplicativo. Por exemplo, no Inbox da Google, o usuário pode acessar o menu lateral e visualizar seu perfil, pastas de emails, entre outras opções.

No Whatsapp, pode realizar pesquisas, visualizar as configurações e iniciar uma nova conversa.

O Toolbar é o sucessor da ActionBar, sendo adotado a partir da Api 21 do Android SDK. Os detalhes de design do Toolbar pode ser encontrado na documentação do Material Design. O Toolbar não possui compatibilidade com as versões anteriores, mas felizmente a Google desenvolveu uma biblioteca de compatibilidade, a Support Library. Esta biblioteca permite a compatibilidade não apenas da Toolbar, mas de vários componentes com as versões mais antigas do Android SDK.

Utilizar esta biblioteca é simples, de maneira geral, a Support Library já está incluída no arquivo build.gradle do projeto Android criado através do Android Studio.

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:24.2.0'
}

O primeiro passo para adicionar o Toolbar no aplicativo, é modificar o tema no arquivo res/values/styles.xml. De maneira geral, o tema do Aplicativo está como Theme.AppCompat.Light.DarkActionBar.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

É preciso mudar o tema para Theme.AppCompat.Light.NoActionBar e adicionar um novo tema específico para o Toolbar, que iremos chamar de ToolbarTheme.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="ToolbarTheme" parent="Theme.AppCompat.Light.DarkActionBar"/>

No layout da Activity, deve ser adicionado o código xml do Toolbar.

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ToolbarTheme"
android:background="@color/colorPrimary"/>

Na ferramenta de preview do Android Studio, o layout deverá ser exibido apenas com sua cor de fundo, sem título e ícones.

O título do Toolbar deve ser definido programaticamente no código Java da Activity.

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//Inicializa o toolbar a partir do layout
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
//Define o título
toolbar.setTitle("Meu Título");
//Define o Toolbar como ActionBar
//para permitir a compatibilidade

setSupportActionBar(toolbar);

}

Agora está tudo pronto, execute o Aplicativo e o verifique o resultado. Deve ser próximo a imagem abaixo.

Próximos passos : Adicionar a opção de voltar ou acionar o menu no lado esquerdo e as ações no lado direito.

O projeto Android pode ser acessado no GitLab.

Espero ter ajudado,
Abs!