Tab Widget No Android

0 Flares Twitter 0 Facebook 0 Filament.io Made with Flare More Info'> 0 Flares ×

Hoje vamos conhecer a Widget Tab Widget no Anroid. Não deixe de conferir.

Projeto

Hoje vamos aprender um exercício que utiliza mais de uma tela no Android. Nossa aplicação terá três telas, e nas telas, vamos ter o componente Tab Widget para mudarmos e tela.

Aplicação

Vamos criar um novo projeto. Clique no menu “File” / “New” / “Other” / Android Project depois cique em Next.

Nome do projeto: TabWidget.

Versão: Android 2.2.

Nome da aplicação: TabWidget.

Package Name: br.tabwidget.com.

Create Activity: TabWidgetActivity.

Minimum SDK: 8.

Layout

Agora abra o seu arquivo main.xml que fica localizado na pasta “res” / “layout” de um duplo clique no arquivo e a tela será carreda. Agora com o nosso arquivo main.xml carregado clique na guia main.xml.
Vide Imagem abaixo:

Imagem Layout

Imagem Layout

Inserindo uma imagem no layout

Para inserir uma imagem no layout primeiramente acesse a pasta “res”/”drawable mdpi” em “drawable mdpi” clique com o botão direito “import”/”File System” clique em  “Next” (Vide Imagem1)e selecione o local da imagem.

Imagem1

Imagem1

Depois selecione a imagem e clique em Finish (Vide Imagem2)

Imagem2

Imagem2

Imagens

Eu selecionei 3 imagens e com o nome de cada imagem de “tela1″ até “tela3″.

E adicione o codigo abaixo:

<?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android: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>

Bom nossa primeira tela está pronta, agora vamos adicionar a tela2.

Adicionando Novo Arquivo xml no Android

para adicionar outra tela ou arquivo clique com o botão direito do mouse na pasta layout / “New” / File.

File name  “tela1.xml”.

Adicionando um layout na aplicação

Linear Layout (vertical).

No arquivo tela1.xml digite o código:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Tela1"
android:textSize="20sp" />

<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.10"
android:gravity="center" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="160sp"
android:layout_height="160sp"
android:src="@drawable/tela1" />

</LinearLayout>

</LinearLayout>

Adicionando Novo Arquivo xml no Android

para adicionar outra tela ou arquivo clique com o botão direito do mouse na pasta layout / “New” / File.

File name  “tela2.xml”.

Adicionando um layout na aplicação

Linear Layout (vertical).

No arquivo tela2.xml digite o código:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Tela2"
android:textSize="20sp" />

<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.10"
android:gravity="center" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="160sp"
android:layout_height="160sp"
android:src="@drawable/tela2" />

</LinearLayout>

</LinearLayout>

Adicionando Novo Arquivo xml no Android

para adicionar outra tela ou arquivo clique com o botão direito do mouse na pasta layout / “New” / File.

File name “tela3.xml””.

Adicionando um layout na aplicação

Linear Layout (vertical).

No arquivo tela3.xml digite o código:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Tela3"
android:textSize="20sp" />

<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.10"
android:gravity="center" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="160sp"
android:layout_height="160sp"
android:src="@drawable/tela3" />

</LinearLayout>

</LinearLayout>

Agora já temos toda a parte de tela do Android, todas devidamente configuradas com os botões e as TextViews.

Codificação do Projeto TabWidgetActivity.java

Agora vamos para a parte do código. De um duplo clique no arquivo TabWidgetActivity.java e vamos digitar os códigos:

package br.tabwidget.com;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;

public class TabWidgetActivity extends TabActivity {

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

TabHost tbHost = getTabHost();
TabHost.TabSpec Spec;
Intent intent;

intent = new Intent().setClass(this, AppTela1.class);
Spec = tbHost.newTabSpec("tab1").setIndicator("Tela1")
.setContent(intent);
tbHost.addTab(Spec);

intent = new Intent().setClass(this, AppTela2.class);
Spec = tbHost.newTabSpec("tab2").setIndicator("Tela2")
.setContent(intent);
tbHost.addTab(Spec);

intent = new Intent().setClass(this, AppTela3.class);
Spec = tbHost.newTabSpec("tab3").setIndicator("Tela3")
.setContent(intent);
tbHost.addTab(Spec);

tbHost.setCurrentTab(0);

}
}

Agora vamos criar uma classe com o nome de AppTela1, botão direito do mouse em “br.tabwidget.com” / “New” / “Class.”

Name AppTela1.

Codificação do Projeto Apptela1.java

Agora abra o arquivo AppTelas1.java e digite:

package br.tabwidget.com;

import android.app.Activity;
import android.os.Bundle;

public class AppTela1 extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tela1);

}

}

Agora vamos criar uma classe com o nome de AppTela2, botão direito do mouse em “br.tabwidget.com” / “New” / “Class.”

Name AppTela2.

Codificação do Projeto Apptela2.java

Agora abra o arquivo AppTelas2.java e digite:

package br.tabwidget.com;

import android.app.Activity;
import android.os.Bundle;

public class AppTela2 extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tela2);
}

}

Agora vamos criar uma classe com o nome de AppTela3, botão direito do mouse em “br.tabwidget.com” / “New” / “Class.”

Name AppTela3.

Codificação do Projeto Apptela3.java

Agora abra o arquivo AppTelas3.java e digite:

package br.tabwidget.com;

import android.app.Activity;
import android.os.Bundle;

public class AppTela3 extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tela3);
}

}

Configurando o AndroidManifest.xml

Para concluir esta aplicação abra agora o arquivo AndroidManifest.xml que fica localizado abaixo da pasta “res”, de um duplo clique nele e clique na guia AndroidManifest.xml para acessar o código, depois de acessar o código digite abaixo da Tag </activity> o código:

<activity  android:name=".AppTela1"
android:label="@string/app_name"></activity>
<activity  android:name=".AppTela2"
android:label="@string/app_name"></activity>
<activity android:name=".AppTela3"
android:label="@string/app_name"></activity>

Executando o Projeto

Feito isso agora é hora de testar a aplicação.
Botão direito no projeto “Run As” / Android Applications e conferir o resultado.
Vamos ver abaixo como ficou nossa aplicação:
AplicaçãoPronta

AplicaçãoPronta

Faça Download do Projeto:TabWidget (1016)

Espero que tenham gostado e até a próxima.



									
Renato Ramos

About Renato Ramos

Graduado em Gestão de tecnologia da informação. Um Entusiasta da tecnologia e de seus avanços. Amante das tecnologias mobile, desde cedo alterando firmwares, sistemas e realizando atualizações e estudando tudo que possível em dispositivos moveis. Programador IOS, Android, Windows Mobile, PhoneGap.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>