Adicionando Tabs na ActionBar Android
Seguir

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes! Você receberá um email de confirmação. Somente depois de confirma-lo é que eu poderei lhe enviar os conteúdos semanais exclusivos. Os artigos em PDF são entregues somente para os inscritos na lista.

Email inválido.
Blog /Android /Adicionando Tabs na ActionBar Android

Adicionando Tabs na ActionBar Android

Vinícius Thiengo
(8592) (29)
Go-ahead
"O método consciente de tentativa e erro é mais bem-sucedido que o planejamento de um gênio isolado."
Peter Skillman
Prototipagem Android
Capa do curso Prototipagem Profissional de Aplicativos
TítuloAndroid: Prototipagem Profissional de Aplicativos
CategoriasAndroid, Design, Protótipo
AutorVinícius Thiengo
Vídeo aulas186
Tempo15 horas
ExercíciosSim
CertificadoSim
Acessar Curso
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Curso Android, gratuito
Lendo
TítuloTest-Driven Development: Teste e Design no Mundo Real
CategoriaEngenharia de Software
Autor(es)Mauricio Aniche
EditoraCasa do Código
Edição1
Ano2012
Páginas194
Conteúdo Exclusivo
Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba gratuitamente conteúdos Android sem precedentes!
Email inválido

Opa! Blz?

Nesse vídeo dou continuidade a série de vídeos sobre ActionBar no Android, porém dessa vez mostrando como colocar Tabs em nossas ActionBars. Tabs na ActionBar aparentemente podem parecer recursos interessantes somente para Tablets, mas não, Tabs funcionam perfeitamente também em smartphones. Fique atento a lógica utilizada para persistir a Tab atualmente selecionada (adaptada do livro "Google Android Para Tablets"), pois caso não seja feito isso, quando o usuário trocar a orientação de tela ou chamar o teclado fisíco será perdida a Tab que estava selecionada voltando assim para a Tab inicial. Ficar atento que para trabalhar com Tabs há a necessidade de trabalharmos também com Fragments, logo o conhecimento prévio de Fragments é necessário. Se você não viu o primeiro vídeo de ActionBar e não sabe trabalhar ainda com Fragments, esses posts estão todos na área de "Recomendado" desse post. Mas é isso, vou evitar evitar mais delongas e deixar você assistir ao vídeo.

O link para download do projeto se encontra logo abaixo no post.

Segue links das páginas apresentadas no vídeo:

Página da classe ActionBar no site oficial do Android

Página da classe Tab no site oficial do Android

Página da ActionBar UI no site oficial do Android

Vlw

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes!
Email inválido

Download

Download do arquivo .zip com os arquivos do vídeo.

Relacionado

Construindo View Personalizada no AndroidConstruindo View Personalizada no AndroidAndroid
Fragments no Android, Trabalhando com Múltiplas ActivitiesFragments no Android, Trabalhando com Múltiplas ActivitiesAndroid
Ciclo de Vida e Otimização de Fragments no AndroidCiclo de Vida e Otimização de Fragments no AndroidAndroid
Iniciando ActionBar no Android, Trabalhando Com MenuIniciando ActionBar no Android, Trabalhando Com MenuAndroid
android - actionbar - barra de ações no android - tab - tablistener - actionbar android

Compartilhar

Comentários Facebook

Comentários Blog (29)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.
Forneça seu nome válido.
Forneça seu email válido.
Forneça o comentário.
Enviando, aguarde...
Bruno Tadeu (1) (0)
01/11/2015
Boa noite, Thiengo.
Ao utilizar a tab, tive o seguinte erro:
11-01 22:53:13.415  30833-30833/br.com.expet.helpbras E/AndroidRuntime? FATAL EXCEPTION: main
    java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{br.com.expet.helpbras/br.com.expet.helpbras.CatalogoLinhas}: java.lang.IllegalAccessException: access to class not allowed
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1880)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1981)
            at android.app.ActivityThread.access$600(ActivityThread.java:123)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1147)
            at android.os.Handler.dispatchMessage(Handler.java:99)
            at android.os.Looper.loop(Looper.java:137)
            at android.app.ActivityThread.main(ActivityThread.java:4424)
            at java.lang.reflect.Method.invokeNative(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:511)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551)
            at dalvik.system.NativeStart.main(Native Method)
     Caused by: java.lang.IllegalAccessException: access to class not allowed
            at java.lang.Class.newInstanceImpl(Native Method)
            at java.lang.Class.newInstance(Class.java:1319)
            at android.app.Instrumentation.newActivity(Instrumentation.java:1023)
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1871)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1981)
            at android.app.ActivityThread.access$600(ActivityThread.java:123)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1147)
            at android.os.Handler.dispatchMessage(Handler.java:99)
            at android.os.Looper.loop(Looper.java:137)
            at android.app.ActivityThread.main(ActivityThread.java:4424)
            at java.lang.reflect.Method.invokeNative(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:511)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551)
            at dalvik.system.NativeStart.main(Native Method)

Você saberia me explicar o que houve e como proceder? Grato desde já.
Responder
Vinícius Thiengo (0) (0)
03/11/2015
Fala Bruno, blz?
ActionBar está depreciada, utilize agora Toolbar junto a outras entidades e Themes do Material Design, veja essa série (https://www.youtube.com/playlist?list=PLBA57K2L2RIKq7_IpaZRTL96CyLNDzF2F ). Abraço
Responder
Rony (1) (0)
11/04/2015
Olá Thiengo, utilizei seu exemplo de TAB, consegui usar, mas na hora que chamo a activity da erro, não to utilizando com a action bar, minha activity tem apenas uma ImageView no topo e abaixo da ImageView o fragmento, mas está dando um erro.
Você poderia me ajudar?

04-11 15:01:27.587  32618-32618/com.example.ronysueliton.patospizzas E/AndroidRuntime? FATAL EXCEPTION: main
    Process: com.example.ronysueliton.patospizzas, PID: 32618
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.ronysueliton.patospizzas/com.example.ronysueliton.patospizzas.Nome_Pizzaria}: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.app.ActionBar.setNavigationMode(int)' on a null object reference
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2314)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2388)
            at android.app.ActivityThread.access$800(ActivityThread.java:148)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1292)
            at android.os.Handler.dispatchMessage(Handler.java:102)
            at android.os.Looper.loop(Looper.java:135)
            at android.app.ActivityThread.main(ActivityThread.java:5312)
            at java.lang.reflect.Method.invoke(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:372)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:901)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:696)
     Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.app.ActionBar.setNavigationMode(int)' on a null object reference
            at com.example.ronysueliton.patospizzas.Nome_Pizzaria.onCreate(Nome_Pizzaria.java:27)
            at android.app.Activity.performCreate(Activity.java:5953)
            at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1128)
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2267)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2388)
            at android.app.ActivityThread.access$800(ActivityThread.java:148)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1292)
            at android.os.Handler.dispatchMessage(Handler.java:102)
            at android.os.Looper.loop(Looper.java:135)
            at android.app.ActivityThread.main(ActivityThread.java:5312)
            at java.lang.reflect.Method.invoke(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:372)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:901)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:696)
Responder
Vinícius Thiengo (0) (0)
12/04/2015
Fala Rony, blz?
O que está fazendo é chamando o método setNavigationMode() em seu script, porém de uma variável null. Verifica se está inicializando a variável que está referenciando a ActionBar e se depois da referenciação seu script em nenhum momento está deixando essa variável como null novamente. Note que se estiver obtendo a referencia ao ActionBar em um script assíncrono, vc terá de aguardar a referencia acontecer para depois chamar os métodos da ActionBar referenciada pela variável. Ms mesmo com a explicação acima recomendo que migre para a Toolbar (http://www.thiengo.com.br/toolbar-material-design-android-parte-1 ), pois a ActionBar está depreciada e pode lhe dar mt dor de cabeça se persistir com ela agora. Abraço
Responder
Ricardo (1) (0)
06/11/2014
Fala thiengo blz,  eu construi um  menu com tabs usando o tabactivity centralizado la embaixo na tela. tenho 4 abas , eu consigo fazer aparecer um icone de menu somente em uma delas? pq se eu coloco um icone de menu esta aparecendo em todas as telas .
Responder
Vinícius Thiengo (0) (0)
07/11/2014
Fala Ricardo, blz?
Então, as tabs estão chamando outras Activities ou outros fragments? Se for Activity é só vc não implementar o script de Menu nela igual vc implementa na Activity que vc deseja mostrar os icones de menu. Se for fragment ou vc passa a chamar a Activity que apresentará então o fragment (removendo no caso o código de menu) ou vc tenta remover / apresentar o menu dinamicamente, dê uma olhada na discussão e resposta certa desse link (http://stackoverflow.com/questions/12419142/dynamic-control-of-action-menu-items-in-actionbar ) para menu dinâmico. Abraço
Responder
Jonatas Oliveira (0) (0)
30/09/2014
Fala Thiengo blz?

Valeu pelas videos aulas, ajudaram bastante, mas recentemente eu passei por uma situação nunca vista antes.
Umas das minha telas que fará parte da tab, já estende uma ListActivity, então como farei para estender a classe Fragment? (eu sei que nao pode).
Não faço ideia de como implementa-la como interface, sou meio leigo no assunto.

Obrigadooo, abraço
Responder
Vinícius Thiengo (0) (0)
30/09/2014
Fala Jonatas, blz!
Então, sua solução acho que é tranquila, basta vc utilizar um ListView ao invés de um ListActivity, dessa forma pode estender sem problemas o Fragment. Se não me engano exatamente tudo que a ListActivity permite fazer o ListView tb permite. O ListView no caso viria no layout personalizado de seu Fragment, no método onCreateView(). Abraço
Responder
Jonatas Oliveira (0) (0)
01/10/2014
Aew Thiengo, consegui usar o onCreateView e ao meu ver esta tudo certo.
Porém aparece um erro nessa linha:
adapterListView = new AdapterListView_Cat(this, nomes);
Ele não aceita o 'this' como parametro.
Você sabe como posso concertar isso?

Obrigadoooo novamente!
Responder
Vinícius Thiengo (0) (0)
01/10/2014
Jonatas, ao invés de colocar this coloque getActivity() para ver se passa. Abraço
Responder
Marcos Filho (0) (0)
15/08/2014
Opa Thiengo, beleza? cara MUITO boa sua aula, dei um super salto no aprendizado, sou estudante de engenharia da computaçao, sou novo na plataforma android... Cara, estou penando pra colocar essas tabs no rodapé do aplictivo, como se fosse lá em baixo, até consigo colocar itens usando o slitactionbar, mas preciso realmente usar nas tabs, já vi algo sobre tabhost, mas n entendi bem a ligação entre o tabhost e as nossas tabs criadas, você poderia me dar uma luz? Obrigado cara, parabéns pelo trabalho!
Responder
Vinícius Thiengo (0) (0)
15/08/2014
Fala Marcos, blz?
Então, se não me engano não tem como colocar as Tabs no bottom (se não me engano), o que podemos fazer na verdade é colocar um espaço para itens de menu no bottom e assim simular as Tabs no bottom. Dê uma olhada na primeira resposta desee link do stackoverflow: http://stackoverflow.com/questions/14133850/actionbar-sherlock-tabs-on-the-bottom
Eu concoordo com o camarada, mas é aquilo, eu não tenho plena certeza que não é possível colocar as Tabs no bottom. Acho que se for possível vc terá de fazer pelo style da APP, pois por lá eu sei que tem como mudar muitas coisa na ActionBar. Abraço
Responder
Marcos Filho (0) (0)
16/08/2014
Então cara, para facilitar minha vida eu deixei na parte de cima mesmo, porém eu preciso de um item na action bar(sem ser tab, as tabs ja tão em baixo da actionBar) e outros dois itens no  bottom, como eu só posso ultilizar o mesmo main para criar itens quando eu uso o splitActionBarWhenNarrow" todos os itens vão pro bottom, mas eu queria que um item específico ficasse na actionBar, existe algum modo de fazer isso ou todos os itens terão que estar necessariamente no mesmo local?
Responder
Vinícius Thiengo (0) (0)
16/08/2014
Marcos, se não me engano vc pode fazer isso de duas maneiras, uma é utilizando uma custom view no topo de sua ActionBar, assim vc teria de colocar na mão o logo da sua APP e então um botão no lado direito para simular esse item. A outra forma seria vc deixar o menu no topo  mesmo apenas com seu item e então simular o menu completo no bottom criando no caso o menu na mão (eu fiz algo similar na APP do blog, olha lá). Abraço
Responder
Eduardo Santana (0) (0)
08/08/2014
Thiengo, primeiramente parabéns pelo trabalho. Minha dúvida é a seguinte: Quando utilizo ActionBar + Tabs eu devo utilizar Fragments para cada TAB, onde  e como eu devo fazer a INTERFACE de comunicação(entrada de dados) com o usuário? Devo continuar utilizando Activity?  Você tem algum TUTO que explique isso?
Responder
Vinícius Thiengo (0) (0)
09/08/2014
Fala Eduardo, blz?
Então, vc continuará utilizando Activity, mas como agora envolve ActionBar e Tabs a maneira de trabalhar é um pouco diferente, vc terá de utilizar Fragments para poder ter os conteúdos das Tabs (com fragments é maneira recomendada). Não tem muito mistério, é quase como trabalhar com Activity. Melhor do que falar deixo uns links sobre Fragment e ActionBar que podem lhe ajudar a entender melhor:

Fragments no Android, Trabalhando com Múltiplas Activities (http://www.thiengo.com.br/fragments-no-android-trabalhando-com-multiplas-activities )

Ciclo de Vida e Otimização de Fragments no Android (http://www.thiengo.com.br/ciclo-de-vida-e-otimizacao-de-fragments-no-android )

Iniciando ActionBar no Android, Trabalhando Com Menu (http://www.thiengo.com.br/iniciando-com-actionbar-no-android-trabalhando-com-menu )

Adicionando Tabs na ActionBar Android (http://www.thiengo.com.br/adicionando-tabs-actionbar-android )

Criando Suporte ActionBar Android Com ActionBarSherlock (http://www.thiengo.com.br/criando-suporte-actionbar-android-com-actionbarsherlock )

SearchView, Botão Home e Mudança de Título na ActionBar Android (http://www.thiengo.com.br/searchview-botao-home-e-mudanca-de-titulo-no-actionbar-android )

Customizando ActionBar Android Com ActionBar Style Generator (http://www.thiengo.com.br/customizando-actionbar-android-com-actionbar-style-generator )

Colocando Botão de Update no ActionBar Android (http://www.thiengo.com.br/colocando-botao-de-update-no-actionbar-android )

Navigator Drawer na ActionBar Android, Entendendo e Utilizando (http://www.thiengo.com.br/navigator-drawer-actionbar-android-entendendo-e-utilizando )

Abraço
Responder
Eduardo Santana (0) (0)
09/08/2014
Muito obrigado Thiengo, vou dar uma estudada no conteúdo. Abraço.
Responder
Vinícius Mendes de Souza (0) (0)
01/07/2014
Boa Noite Thiengo, como estás ?

Primeiramente meus parabéns pelo blog que acompanho sempre. É uma honra para nós desenvolvedores contarmos com um portal como este.

A minha dúvida é a seguinte: é possível deixar as Tabs em baixo da ActionBar e não na action Bar ? Por exemplo, quando viramos o celular (landscape), as tabs aparecem na actionbar, e eu gostaria de deixá-las em baixo da actionbar. É possível definir elas para aparecer APENAS em baixo da action bar ?

Grato desde já,
Responder
Vinícius Thiengo (0) (0)
02/07/2014
Fala Vinícius, blz?
Então, não sei confirma para ti se realmente tem como fazer isso com a ActionBar, pois ela é um componente nativo e mesmo q permita a estilização de algumas partes, outras ainda não é possível, mas encontrei esse link que pode lhe ajudar (http://stackoverflow.com/questions/21848822/how-to-always-display-actionbar-tabs-below-actionbar-in-android ). Abraço
Responder
Vinícius Mendes de Souza (0) (0)
02/07/2014
Então, eu havia visto esse recurso que tu me sugeriu aí no stackoverflow, inclusive utilizei uma library sugerida neste comentário do stackoverflow (http://stackoverflow.com/questions/16544162/android-google-play-like-tabs/16544501#16544501 ). Esta library é até simples de se utilizar, e atende no que se trata de manter as tabs sempre a baixo da actionbar, porém pelo fato de não ser as tabs inclusas na actionbar, então eu não consigo utilizar aquele método que vc utilizou no tutorial " getActionBar().setSelectedNavigationItem() " para definir que uma tab seja selecionada. Digo isso pois preciso recuperar em qual tab o usuário está no onSaveInstanceState, mas não consigo fazer isso da mesma forma que a actionBar. A library é essa (https://github.com/astuetz/PagerSlidingTabStrip ), e até foi sugerida pelo canal Android Developers no YouTube. Se tiver interesse de dar uma "fuçada" nela e ver o que tu acha hehe. Obrigado desde já. Abraço Thiengo.
Responder
Vinícius Thiengo (0) (0)
02/07/2014
Opa, vlw Vinícius, vou dar uma olhada sim, mas será q formulando uma lógica vc não consegue, via código e utilizando o saveInstanceState, obter a tab selecionada e então coloca-la em primeiro plano, acho q deve ser possível, mas enfim, vou dar uma olhada na lib. Abraço
Responder
Marcos Ferreira (0) (0)
20/05/2014
cara, tem como chamar uma activity ao invés de uma fragment na tab ?
Responder
Vinícius Thiengo (0) (0)
21/05/2014
Fala Marcos, blz?
Tem sim, só que vc terá de trabalhar com uma classe pai para todas as activities de seu projeto para ter as tabs em todas elas, ou vc não coloca tabs em todas as Activities, ainda terá de trabalhar a lógica para manter a atual tab selecionada na nova Activity, porém essa parte final é mais tranquila, a primeira parte é somente chata de se implementar. abraço
Responder
Marcelo (1) (0)
31/03/2014
Oi Thiengo, tudo bem? Segui suas explicações sobre implementação da actionbar só que pra mim aconteceu o seguinte problema, ao clicar nas tabs dá pra navegar normalmente, porém quando clico no botão voltar do celular ou tablet ele fecha a aplicação, aí coloquei no onTabSelected o comando addToBackStack e ele funcionou quase que 100% o problema é quando giro a tela ele adiciona novamente na pilha o fragmento atual já que chama novamente o onTabSelected... aí quando aperto voltar ele volta para o mesmo fragmento pois ele vai adicionando na pilha o mesmo fragmento a cada giro de tela, tem como eu verificar no onTabSelected se é o mesma tab que está selecionada e não adicionar ao "BackStack", assim ao girar a tela o BackStack não teria o mesmo fragmento adicionado mais de uma vez. Obrigado... abcs
Responder
Vinícius Thiengo (0) (0)
31/03/2014
Fala Marcelo, blz? Então esse problema que vc está enfrentando eu já passei tb. A solução para ele não é exata, ou seja, envolve lógica mesmo e trabalhar com a pilha Android as vezes não é trivial, eu não sei dizer a vc se tem como acessar a pilha de atividades do Android via script, mas acho que uma solução possível para seu problema seria vc chamar via script o método onBackPressed() da atividade android, pois ele irá simular o aperto ao botão voltar do android, mas é bom testar esse método chamando ele depois de as tabs terem sido colocadas para funcionar (imaginando que vc está construindo essas no onCreate() vc pode chamar esse método de volta no onStart(), mas tem que testar para ver se funciona). Não sei se irá funcionar, mas acho que cola, pois imagina comigo, toda vez que tiver reconstrução de tela a variavel Bundle de onCreate não mais será nula, então vc sabe que não é a primeira vez que o onCreate da activity é chamado, logo se houve reconstrução de tela mt provavelmente sempre terá a mesma tab duas vezes no topo da pilha, então chamar esse método de volta via script depois da construção das tabs e antes de onResume(), pois nesse ultimo o usuário já ve a tela, tirará a dupplicação da pilha e o usuário, provavelmente, nem verá isso acontecer... mas é o que falei, vc terá d testar para ver se funciona. Ressaltando que o método onBackPressed() deve ser sobrescrito, ou seja, @Override nele. E tome cuidado, pois o botão voltar perderá a funcionalidade, logo ai vc terá de roer a mente para bolar uma lógica que resolva esse problema. Abraço
Responder
Marcelo (1) (0)
31/03/2014
Então eu consigo adicionar os fragments na pilha e voltar normalmente pressionando o botão voltar, o problema é que a tab não fica com o foco na hora que volta entende? por exemplo, se eu clico na tab 2 e depois volto apertando o botão voltar do aparelho ele volta para a fragment 1 mas o foco continua na tab 2, eu estou com uma ideia aqui de controlar isso via array. Se der certo te mando caso se interesse em ver. Abcs e obrigado :-)
Responder
Vinícius Thiengo (0) (0)
31/03/2014
A, agora entendi... bom se a ideia der certo quero sim ver a lógica utilizada. Abraço Marcelo
Responder
Marcelo (0) (0)
01/04/2014
Oi Vinícius... deu certo aqui...fiz o controle com arraylist... tem como você me mandar um email pra eu te explicar uma  outra pegada que estou fazendo? fica complicado explicar por aqui porque quero mandar algumas imagens tb.... valeu!!!...abcs
Responder
Vinícius Thiengo (0) (0)
01/04/2014
Fala Marcelo, show de bola vc ter conseguido, segue email: thiengocalopsita@gmail.com, abraço
Responder