Usar Tabs no Android

Uma coisa muito útil é Tab. Quando você tem Activities Pai que tem alguns filhos, é bom usar Tabs. Deixa o App mais limpo, fácil e intuitivo para o usuário, ao invés de ficar sempre abrindo uma nova Activity e ficar indo e voltando(sinceramente, isso é chato pra caramba. Ter que ficar procurando coisas num App é a pior experiência que um usuário pode ter).

Como sou um usuário, meio que, exigente, gosto de aplicações fáceis de mexer e que penso em usá-la todo dia.
Uso também um método de produto chamado pretotype . -> http://www.pretotyping.org/ . É bom usar e desenvolver o lado usuário do Líder de projetos/programador/desenvolvedor/designer/etc.

Voltando….Irei postar um exemplo de como usar Tabs no seu projeto Android.

Primeiro tenha o elemento no xml. De preferencia no main.xml.

No main.xml temos a TabHost, que é onde as tabs ficarão. A TabHost é o objeto onde “hospeda” as Tabs. TabHost gerencia as tabs. TabWidget represetará cada uma das tabs. E o framelayout carregara os conteudos das Tabs. Pois Cada Tab tem seu layoiut (arquivo .xml) e tem sua Activity. (Não esqueça de especificar no main)


<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
>

<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
/>
</LinearLayout>
</TabHost>

Depois de ter o .xml . Vamos a MainActivity.java

 import android.app.ActivityGroup;
 import android.content.Intent;
 import android.content.res.Resources;
 import android.os.Bundle;
 import android.widget.TabHost;

//MainActivity herda de ActivityGroup, porque vocÊ está lidando
 //com várias atividades em um elemento só. Ou seja, o TabHost hospeda um grupo de atividades.
 public class MainActivity extends ActivityGroup {
 static TabHost tabHost;
 static int tab = -1;

@Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);

Resources res = getResources();
 tabHost = (TabHost)findViewById(R.id.tabhost);
 tabHost.setup(this.getLocalActivityManager());
 TabHost.TabSpec spec;
 Intent intent;

//Cada Tab adicionada tem sua própria Activity, que por sua vez , tem seu próprio .xml(layout) e //também tem um elemento Drawable. Esse elemento eu usei para mudar o ícone da Tab.
 //Quando ela não está ativa, o ícone é cinza. Quando ela está ativa, o ícone fica colorido e indica //pro usuário que ele está naquela Tab.

// Nesse meu exemplo, eu tenho 4 Tabs.4 Activities. 4 Layouts. 4 drawable que faz a mudança de ícone. // 1 para cada Tab.

// Adiciona Tab #1
 intent = new Intent().setClass(this, HomeActivity.class);
 spec = tabHost.newTabSpec("0").setIndicator("Home", res.getDrawable(R.drawable.tab_home)).setContent(intent);
 tabHost.addTab(spec);

// Adiciona Tab #2
 intent = new Intent(this, SearchActivity.class);
 spec = tabHost.newTabSpec("1").setIndicator("Cidade", res.getDrawable(R.drawable.tab_city)).setContent(intent);
 tabHost.addTab(spec);

// Adiciona Tab #3
 intent = new Intent().setClass(this, OndeEstouActivity.class);
 spec = tabHost.newTabSpec("2").setIndicator("Onde Estou?", res.getDrawable(R.drawable.tab_where)).setContent(intent);
 tabHost.addTab(spec);

// Adiciona Tab #4
 intent = new Intent().setClass(this, ListasActivity.class);
 spec = tabHost.newTabSpec("3").setIndicator("Mapas", res.getDrawable(R.drawable.tab_mapas)).setContent(intent);
 tabHost.addTab(spec);

//essa ultima linha indica qual tab será carregada ao iniciar essa activity. No nosso caso, a Primeira!!!

tabHost.setCurrentTab(0);

}

}

Pronto. Agora você Tabs em sua aplicação.
Vale lembrar que você precisar fazer uma Activity pra cada Tab que você irá ter e uma layout respectivamente.

Anúncios

28 comentários em “Usar Tabs no Android

  1. Olá Renato,
    Não consegui fazer roda a app com as tabs, o xml fica dando erro e na classe main o R.id.tabhost tbm.
    Os códigos são só estes mesmo?

      1. O código é este mesmo que você postou, só criei outras classes mas não declarei no manifest. Deve ser este o erro.
        Como eu faço isto? Pois aprendendo ainda a programar para Android e não sei muita coisa rsrs
        Vlw

  2. Renato, tem como eu colocar em cada tab uma intent (mesma classe) com base no mesmo drawable, ou seja instancias diferentes de uma mesma intent a partir do mesmo XML?

    1. Marcio, desculpa mas nao entendi muito bem oque vc quis dizer..
      Voce quer usar diferentes abas, porem as mesmas intent, mesmo xml , mesma activity?
      porem voce altera isso, com o parametro da intent?
      isso?
      Se for isso, tem como fazer sim!
      abs

  3. Isso mesmo renato, é que até hoje eu só via exemplos criando classes e XML diferentes para cada aba, inclusive é o exemplo no developers, e ontem tentei fazer isto que escrevi e funcionou!!! Então dentro de cada activity instanciada eu monto os botões, etc de acordo com um param que eu passo para cada activity. Gerou um efeito colateral pois os eventos de menu tiveram que serem tratados dentro de cada activity (não sei porque!) e não na ViewGroup onde o mesmo foi criado, mas consegui contornar…

    1. Marcio, o que da pra voce fazer para diferenciar seria colocar extras na intent
      e.g
      Intent i = new Intent();
      i.putStringExtra(“tab1”, “1”);
      e assim vai..
      Com isso, lá na activity voce pega esse parametor e consegue diferenciar as tabs…
      eu ainda vou fazer um post sobre isso..
      abs

  4. Olá Renato,

    Primeiro, parabéns pelo post. Vai ajudar muita gente.

    Eu queria saber como fica o ciclo de vida das activities usando abas. Quando eu seleciono outra aba, a aba atual é destruída?

    Abraços.

      1. Então cara, se você olhar bem na API, essa troca de activities é feita pela interface TabHost.OnTabChangeListener.
        Eu acredito que a Activity não seja destruída, pois não faz sentido você ficar criando e destruindo objetos em um ambiente muito limitado. Como se você tivesse enchendo e esvaziando toda hora sua pilha de memória.
        No caso das Tabs, fica salva o ultimo estado delas (savedInstanceState). Se você esta em uma Tab e vai pra outra e depois volta nela acontece o seguinte.
        O estado da primeira tab fica salvo.
        é iniciado a segunda
        quando voltar a primeira, é chamado o método onStart() e inicia com o ultimo estado salvo da Activity.
        De uma olhada nesse link sobre Activities -> http://developer.android.com/reference/android/app/Activity.html
        e TabActivity ->http://developer.android.com/reference/android/app/TabActivity.html

        Estava dando uma lida, nas novas versões do Android, não se usa mais Tabs, e sim Fragments.
        Farei um post em breve sobre…

        espero que tenha te ajudado.
        abraços

  5. Fala Renato, blz? acabei de conhecer o blog pesquisando pelo google, mas já tá favoritado aqui =]

    Estou tentando fazer algo que seria +/- assim:
    Tela principal com botões de Salvar e Cancelar.
    Logo abaixo o TabHost, onde vou ter outras abas (Dados Cadastrais, endereços, contatos, etc).
    Inicialmente criei uma ativity pra tratar o tabHost e outras pra cada aba. Porém na hora de salvar eu me toquei que não ia ter o os dados nessa activity do tabHost.
    Quando crio a intent de cada activity de cada aba, passo no extra o objeto que está sendo cadastrado, mas na principal não to conseguindo ter ideia de como recuperar esse objeto.

    Tem alguma ideia de como eu poderia resolver isso?

      1. Obrigado pela atenção Renato.
        O problema é que no formato que estou fazendo, seguindo o exemplo que vc passou, eu preciso alterar o objeto que vem no extra (tab) e depois retorná-lo para a activity TesteTab, pois eu coloquei o botão de salvar no xml que tem o tabHost (main.xml).
        A parte de passar o objeto para as Activities tá tranquilo, a dificuldade está sendo na hora de retornar esse objeto alterado para que eu possa gravá-lo através dos métodos que tenho na activity do tabhost.

      2. Putz, agora que reli o que escreveu vi que não tinha me atentado aos objetos estáticos… vou testar aqui e depois te aviso se deu certo.

      3. Fala Renato, blz?
        Bom, como eu tinha dito que ia dar um retorno, to escrevendo aqui no comentário mesmo… aí já fica a dica pra caso alguém esteja na mesma situação.

        Fiz usando objetos estáticos e funcionou certinho.
        Quando crio as abas, seto o objeto nas activities de cada aba.
        Depois quando dou um salvar na activity principal, uso métodos estáticos de cada uma dessas outras activities para pegar os valores dos campos e setar em um objeto estático delas. Após isso pego os valores do objeto estático e passo para o objeto dessa activity principal… funcionou redondinho.
        Valeu pela dica

  6. Você falou acima sobre o ciclo de vida do tabshost,
    e falo que ao ir para primeira e voltar pra segunda ele
    executa ele salva o estado no savedInstance, eu ainda
    so configurei o Oncreate, como posso configurar
    então o OnStart para que ele salve o estado da tela?

    ex: estou na aba 1 marco um checkbox
    vou para aba 2
    e volto para aba 1 ( quando voltar quero ver o checkbox marcado).

    Abrass cara

    Grato,
    Rafael.

  7. Cara, já dei um +1 no post, muito bom… mas pode me dar enviar um exemplo de drawable das tabs?? exemplo: R.drawable.tab_home (pois sou iniciante e estou perdido nessa parte), OBrigado

  8. Olá Renato.. estou fazendo meu TCC e tenhu um codigo pronto.. soh q ele nao usa TabLayouts e keria transformar ele pa usa com guias.. e nao to sabendo como fazer.. pq ele ja tem 2 activits.. gostaria de uma ajuda sua.. abços

  9. opa primeiramente quero dizer que este é um ótimo post o melhor q achei e olha q eu pesquisei.
    mas ta me dando um erro no codigo que diz o seguinte:
    sintax error or token”,”, void expected after this token

    pode me ajudar com isto?
    e urgente se puder ficarei mto grato!

  10. Parabéns pelo seu post, eu vi vários até o momento, e o seu me ajudou muito, no entanto restou uma duvida: Como eu faço para setar a aparecia do tab? Por exemplo: Trocar de icone, ou trocar de cor quando clicado, ao menos conseguir colocar uma cor pois até o momento nao consegui nada.

    Eu criei um xml para aplicar o efeito ao TabWidget da seguinte forma (android:background=”@drawable/tab_bg_selector), mas pelo que deduzi, tenho que setar algum parâmetro na hora que a minha activity cria o tab em questão. Pode me ajudar nessa?

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s