Androideity

Programación android en español, tutoriales, documentación, noticias, smartphones, tablets, programación android, aplicaciones android

Pestañas en Android usando Eclipse

| | 71 Comentarios

Twitter: @JaimeYesidLeon

Cuando estás aprendiendo a desarrollar aplicaciones en cualquier sistema operativo es recomendable que sigas la tendencia de aquellas que ya están consolidadas, esas aplicaciones que fueron tomadas cómodamente y sin mucha complicación por los usuarios finales de las mismas, de esta manera facilitas la incursión de tus propias aplicaciones al mercado virtual. Por supuesto que no es obligatorio que lo hagas, pero es una buena práctica mientras te conviertes en un pez dentro de este mar de la informática. En Android no es la excepción y por eso hoy traemos un modo de diseño casi consolidado y muy utilizado para que lo apliques a tus desarrollos; sigue y conoce de qué se trata.

En Google y más específicamente en nuestro querido Android, quieren que los desarrolladores realicen unas aplicaciones con diseños agradables, funcionales, prácticas y que tengan una misma tendencia en cuanto a personalidad Android se refiere. Eso quiere decir que no tengas botones desproporcionados, textos volando sin que indiquen algo importante,  iconos que reflejen lo que realmente representan sin necesidad de explicaciones extensas y que tu aplicación tenga un orden agradable para que los usuarios no tengan que leer un manual de uso de la misma.

Una de las aplicaciones que han tenido una gran aceptación por parte de los usuarios de Android según afirma  la misma gente de Google, es la aplicación para Twitter. Esta aplicación si la vemos es muy práctica, sencilla de entender por los usuarios y las calificaciones dadas en el Market no lo desmienten.

Lo destacable de esta aplicación y lo cual nos interesa en estos momentos, aparte de su estética, es que esta divida en 4 secciones generales que abarcan toda la funcionalidad de la aplicación, pero dentro de cada una de esta sección encontrarás más funciones detalladas con las cuales el usuario puede interactuar. Estas 4 secciones o pestañas le dan aspecto limpio haciendo que el usuario sepa a donde ir cuando desee realizar alguna acción determinada. Este tipo de diseño por pestañas es una tendencia ya que también aplicaciones conocidas como Hotmail, GetJar y hasta la tienda de Samsung App la adopten para su uso (por solo mencionar las más usuales).

Estas aplicaciones demuestran que cuando se adopta un diseño que es aceptado por los usuarios, se crea una tendencia y es motivo por el cual hoy te traemos un ejemplo muy sencillo del uso de las pestañas en tus aplicaciones y que podría ser una plantilla para tus aplicaciones, modificando únicamente nombre e imágenes descriptivas.
La explicación de este tema de las pestañas la haremos paso a paso desarrollando explicando el uso de cada una de las características principales que necesitaremos para hacer este tipo de diseño, como son TabHost, TabWidget y FrameLayout:

La definición de un TabHost según la página oficial de Android es: Contenedor para una vista de ventanas con pestañas. Este objeto tiene dos hijos: un conjunto de etiquetas en las que el usuario hace clic para seleccionar una pestaña específica y un objeto FrameLayout que muestra el contenido de esta pestaña. Los elementos individuales suelen controlarse con un objeto contenedor, en lugar de establecer los valores de los elementos propios de los hijos.

El TabHost es el elemento raíz o principal del layout de la actividad principal, es como el molde de la aplicación, el cual esta dividió en 2 partes principales y personalizables, la primera es donde estarán las pestañas que vamos a utilizar en nuestra aplicación, la cual se llama TabWidget. La segunda parte principal es donde estará el contenido que realiza cada pestaña y el cual es un FrameLayout.

http://developer.android.com/reference/android/widget/TabHost.html

La definición de un TabWidget según la pagina oficial de Android es: un atributo que muestra una lista de las etiquetas de la pestaña que representa cada página de ficha de recogida de los padres. El objeto contenedor de este Widget es TabHost. Cuando el usuario selecciona una pestaña, este objeto envía un mensaje al contenedor principal, TabHost, para indicarle que debe cambiar la página mostrada. Por lo general no se utilizan muchos métodos directamente en este objeto. El TabHost contenedor se utiliza para agregar etiquetas, agregar el controlador de devolución de llamada, y gestión de devoluciones de llamada. Puede llamar a este objeto para recorrer la lista de las pestañas, o para modificar el diseño de la lista de la ficha, pero la mayoría de métodos se deben llamar en el objeto contenedor TabHost.
Así que básicamente un TabWidget es un elemento que contiene las pestañas con las cuales se  interactua cuando la aplicación esta corriendo. http://developer.android.com/reference/android/widget/TabWidget.html

Por último según Android un FrameLayout está diseñado para bloquear un área en la pantalla para mostrar un solo elemento. Por lo general el FrameLayout deben ser usado para sostener un punto de vista uno elemento hijo porque es difícil  organizar puntos de vista del elemento hijo de una manera que sea escalable a diferentes tamaños de pantalla sin que los hijos se superponen entre sí. Se pueden añadir varios elementos hijos a un FrameLayout y el control de su posición con la propiedad gravity del FrameLayout modificando el atributo android: layout_gravity.
En resumidas cuentas es el contendor de lo que quiero mostrar en cada pestaña, ya sean botones, textos, cajas, imágenes, videos etc. http://developer.android.com/reference/android/widget/FrameLayout.html

Con estas definiciones ya claras, empezaremos a crear nuestro proyecto en el cual mostraremos una aplicación que tenga 4 pestañas con 4 diferentes actividades en la que mostraran el texto que indica que se encuentra en la actividad seleccionada con un simple TextView. No haremos nada en las pestañas para no alargar el post, tú decides que va en cada una de las pestañas dependiendo de las necesidades de la aplicación que este haciendo. Por último personalizamos las 4 pestañas con iconos representativos, en uno mostraremos el símbolo de un explorador, en la otra mostraremos el símbolo de Skype, en la otra el símbolo de la red Wi-Fi y en la última se encontrará el símbolo de Bluethoot, todos estos a modo de ejemplo pero que tu lo podrás personalizar a tu acomodo.

1.    Creamos un nuevo proyecto el cual llamamos Pestanas, utilizamos la versión 2.3 de Android, llamamos el paquete como com.androideity.pestanas y nombramos a la actividad principal MainActivity.

2.    En segunda instancia creamos las 4 actividades que utilizaremos en la aplicación llamándolas Pestana1.class, Pestana2.class, Pestana3.class, Pestana4.class dentro del paquete  com.androideity.pestanas. Al mismo tiempo creamos el respectivo layout para cada actividad con el mismo nombre representativo de la actividad: pestana1.xml, pestana2.xml, pestana3.xml, pestana4.xml. Así nuestro proyecto va tomando la siguiente forma:

3.    Con nuestros archivos creados, pasamos a vincular los layout a las respectivas actividades, en los cuales simplemente escribiremos un texto con el nombre de la pestaña que representara. Lo que debemos hacer es mas fácil verlo en las siguientes imágenes:

4.    Como has visto en entregas anteriores aquí en Androideity, debemos vincular cada una de las actividades al Manifiesto para que puedan ser llamadas y poder trabajar con estas, así que procedemos a incluirlas en el archivo AndroidManifest.xml de la siguiente manera:

5.    Perfecto, hasta este momento ya tenemos nuestra “carpintería” terminada, ahora a lo que vinimos. Vamos a modificar nuestro layout principal main.xml para que contenga los recursos necesarios que nos permiten utilizar las pestañas en nuestro proyecto.  En primera medida definimos el TabHost que contendrá los elementos principales de la actividad. En segunda instancia creamos un LinearLayout vertical para contener ordenadamente los 2 elementos principales que son el TabWidget y el FrameLayout. El detalle del archivo lo encuentras en la siguiente imagen:6.    Con nuestros elementos listos y creados agregamos a nuestro proyecto las imágenes de los iconos que representaran las funciones de cada una de las 4 pestañas que vamos a utilizar. Para nuestro caso elegimos unos al azar y comunes para mostrarte un ejemplo, pero tu elijes el que mas se acomode a tus necesidades.
Es recomendable tener 2 imágenes para cada una de las pestañas, una que sea la que se muestra cuando se ha seleccionado la pestaña y otra igual pero que represente que la pestaña no esta seleccionada. En mi caso use una imagen a color para representar la pestaña seleccionada y la misma imagen pero de color gris para mostrar cuando la pestaña NO esta seleccionada. Tu puedes colocar la que quieras, pero te recomendamos que sean imágenes representativas y que constituyan la esencia del programa y en lo posible en archivos .png para que se transmita las transparencias; las imágenes con sus respectivos nombres representativos que utilice para este proyecto te las muestro a continuación:

7.    Pero como hacemos para mostrar una imagen cuando pulse sobre la pestaña correspondiente y otra cuando no este activa la pestaña? Lo que debes haces es crear un recurso, el cual es un archivo .xml que le indique que imagen usar en cada caso. Veamos como debe ser el archivo para la primera imagen:

Aquí en este archivo es la mayor parte conocida por los post publicados anteriormente aquí en Androideity, lo destacable de estas líneas es: android:state_selected=”true” la cual indica que la imagen que se vincula dentro de este  <ítem> es la que va a ser la que será mostrada cuando sea pulsada la respectiva pestaña, en nuestro caso muestra el archivo pestana1_color, y por defecto el otro archivo se mostrara cuando la pestaña no se encuentre a la vista del usuario, que para nuestro caso es pestana1_gris.  Lo mismo se hace para los demás archivos de la siguiente manera:

Todos estos archivos tanto las imágenes como los recursos, deben ir en la carpeta res/drawable o en mi caso la deje en la res/drawable-mdpi debido a que mi dispositivo que utilizo para probar las aplicaciones tiene una resolución de mediana densidad de pixeles. Así que mi archivo sigue viéndose de la siguiente manera:

8.    Para terminar con nuestra aplicación, necesitamos codificar la actividad principal que llamamos MainActivity.class para que haga toda la magia y nos muestre nuestras lindas pestañas en acción; así que vamos por partes explicando:

8.1    En primera instancia te mostramos los importes necesarios para que funcione la aplicación, así como el inicio de la clase principal que extiende a TabActivity y se muestra el layout main.xml que ya mostramos previamente:

8.2    Ahora creamos nuestro TabHost (explicado previamente), asi como un Tab.Spec llamado spec que contendrá las especificaciones de nuestra pestaña a mostrar, también creamos el intent que usaremos para llamar cada una de las 4 actividades que ya creamos, y por ultimo en esta sección llamamos a los recursos que creamos, los cuales son los iconos de las pestañas y sus respectivos .xml:

8.3    Ahora llamamos un nuevo intent que mostrara la respectiva actividad creada, configuramos las características de nuestra pestaña en donde primero ira el nombre que la identifica, después ira el texto que se mostrara encima del icono que llamamos con la función res.getDrawable haciendo referencia al respectivo archivo que ya creamos y finalizando esta línea de código hacemos un setContent(intent) para el previo intent creado.
Pero esto no se mostraría si no le hemos cargado las respectivas especificaciones a nuestro contenedor de tablas y esto lo hacemos con la línea de código tabHost.addTab(spec).

8.4    Las líneas de código anterior debemos repetirlas para cada una de las pestañas que deseemos crear, las cuales en nuestro caso son 4. Así que el código respectivo de las mismas es el siguiente:

9.    Terminamos guardando compilando y enviando al emulador o al dispositivo en el cual hacemos las respectivas pruebas y el resultado te lo mostramos en las siguientes imágenes, en una aparecen las pestañas sin imagenes y la siguiente con el proyecto terminado.Para terminar hemos realizado un video que complementa la explicación y muestra paso a paso como se desarrolla este proyecto:

Espero que te sea de ayuda este tema para tus futuras aplicaciones, espera pronto nuevos temas sobre esta fabulosa plataforma Android.
Nota: Si detectas algún error en el código, en la explicación, escrito o en el video, por favor escríbenos y con mucho gusto la corregimos. Agradecemos tu ayuda.
Nota 2: No te dejamos el código porque queremos que gastes teclado y aprendas escribiendo. Pero si necesitas algún código mostrado en este post, con mucho gusto te lo haré llegar.

 

 

Comparte este post

Acerca de: jaime

Hola, mi nombre es Jaime Yesid Leon, soy de Bogotá–Colombia, soy Ingeniero Electrónico, me encanta la electrónica, los microcontroladores y la programación. Practico futbol, leo mucho y no dejo los video-juegos para nada. Hago lo que me gusta y desde que conocí el SO Android me enamore y por eso estaré aquí aportando mi granito de arena a Androideity, una pagina genial.

Sígueme en Twitter

Leer todos mis artículos

También puede interesarte

Comentarios de este artículo

  • jesús joel cuqlui vidarte

    Muy interesante

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Con mucho gusto amigo Jesús.

  • http://www.adnfriki.com/ iRe – Android

    Mil gracias de verdad, cada día os estoy más agradecida, un fuerte abrazo :D

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Que bueno que te sea de ayuda iRe-Android; seguiremos mejorando en nuestras explicaciones y de seguro las novedades que estamos preparando te van a gustar mas.

      Cordial saludo.

  • JLuis

    Buen ejemplo viejo, una pregunta, si quisiera que, estas 4 pestañas se mostraran después de un login, o de una pantalla principal de bienvenida en la que no se deben de mostrar estas 4 pestañas, eso deberia de ser configurado en la main activity? y como debería de llevarme después de la pantalla de bienvenida o el login a estas 4 pestañas de manera correcta, de antemano gracias!

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola JLuis,

      Ok, hay varias formas de hacer lo que dices.
      Si quieres desde la MainActivity hacerlo, puedes hacer por ejemplo con un StartActivityForResult, lanzando una actividad de login y que compare el resultado obtenido con unos datos guardados y autorice o niegue el ingreso, como se hace en un correo electronico.

      Si lo que quieres es una pantalla de bienvenida, pueden hacerlo con una activity que se inicie al momento de empezar la aplicacion y que se mate cuando el usuario oprima algun boton de enter.

      Puedes probar a hacer 2 actividades una de bienvenida y otra de contenido, y cuando te funcione como quieres, ahora si pruebas a colocarle el TabHost y ha adicionar todo el contenido que quieras colocarle.

      Intentalo y si tienes alguna duda me avisas, podriamos hacer una segunda parte de este post, con lo que dices ya haciendo mas cosas en cada actividad.

      Cordial saludo

  • JLuis

    Gracias por la respuesta Jaime hare las pruebas, y si estaria bien hacer una segunda parte de este tema, ya que se pueden dar casos com el que te preguntaba o en su defecto uso de multiples bases de datos y cosas mas complejas dentro de tabs! slds.

  • JLuis

    Que tal Jaime, por medio de un intent enlace una pantalla de bienvenida con las tabs, ahora mi pregunta es: como puedo agregar una listview fabricada por medio de SQLite a la tab uno? de antemano gracias!

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola JLuis,
      Me alegra mucho que lo conseguiste. Ahora es carpinteria como decia un profesor.
      Como te dije anteriormente hay varias manera de hacer las cosas, si quieres hacer que una o varias de las pestañas del TabHost contenga un listView podria por ejemplo extender la actividad a un ListActivity (public class Lista extends ListActivity) y obtener los datos ya sea de un ArrayList o de una base de datos como tu sugieres. Por esto es que explique este tema de pestañas con actividades independientes ya que puedes hacer lo que quieras en cada una de ellas.

      Ya con la base de datos es otro cuento que me quedaria dificil explicarte en esta respuesta. Pero aqui en Androideity, nuestra querida Condesa tiene 3 tutoriales que de seguro te aclaran tus dudas sobre SQLite, empezando con este http://androideity.com/2011/10/12/manejo-de-bases-de-datos-en-android-i/

      Un cordial saludo

  • Softmpr

    Es realmente una aportación muy útil, sobre todo para gente autodidacta como yo.
    Tienes

    Muchas grácias por compartir tus conocimientos de una forma tan altruista.

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola amigo Softmpr,

      Muchas gracias por tu comentario, me alegra que te sea de utilidad este post, ya que la idea es esa y me animas a seguir escribiendo mas cosas interesantes y de una manera mas facil de entender. Por eso hago el esfuerzo de hacer los videos y mostrar imagenes, para ver que efectivamente lo que aqui mostramos en verdad funciona.

      Me alegra que seas autodidacta, Einstein menciono alguna vez: “La educacion empieza cuando se ha olvidado todo lo aprendido en la escuela”.

      Cordial saludo

      Jaime

  • Invitado

    al tratar de hacerlo por java*

  • Marcela Peña Murallas

    Jaime, puedes poner el codigo?!! porfavooor!!..esto en realidad es lo que necesito, y creo que las imagenes no se muestran completas.

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Marcela:

      Ok voy a enviarte los archivos del proyecto para que pruebes y puedas encontrar el error que tengas.
      Recuerda revisar la version de Android que tengas, porque no estoy muy seguro si estas pestañas se pueden crear desde una version inferior a la 2.1.

      Si puedes decirme en que parte esta el error o si puedes colocar parte del codigo que estas trabajando seria muy bueno.

      Espero que lo primero que hagas este proyecto tal cual como te muestro, y despues le añanas lo que necesitas hacer dentro de cada actividad. Para evitar cualquier tipo de confusion.

      Te recuerdo que en el video esta paso a paso como se hace este proyecto asi que lo puedes ver muy claramente sin ningun problema.

      Cordial saludo

      Jaime

    • Kyutvillan

      Marcela eche codigo use el teclado… :P

  • Kyutvillan

    Hola, gracias por compartir tus conocimientos en esta plataforma, resulta que escribo el codigo tal cual esta ahi para la MainActivity pero me salen errores en estas lineas para cada pestaña :

    intent=new Intent().setClass(this, Pestana1.class);
    spec= tabHost.newTabSpec(“Pestaña1″).setIndicator(“Navegador”, res.getDrawable(R.drawable.Chrome));–> en esa linea me sale error para cada una de las pestañas
    tabHost.addTab(spec);

    Agradezco me puedan colborar

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Kyutvillan,
      Si escribes el error que te sale seria mucho mas facil saber en que estas fallanado; pero muy posiblemente es que no encuentra el archivo llamado Chrome.
      Con el segmento de codigo -R.drawable.nombredelarchivo- tomas la imagen que vallas a mostrar en la pestaña, asi que verifica que tengas el archivo al cual haces referencia, y que este exactamente escrito.

      Recuerda que todos los archivos que adjuntas como recurosos, ya sean imagenes o archivos de musica, deben ir obligatoriamente en minuscula, de lo contrario siempre te saldran errores en la compilacion.

      Revisa lo que te digo y si no te funciona escribe el error que te aperece para que sea mas facil saber a que puede hacer referencia.

      Cordial saludo y gracias por visitar la pagina

      Jaime Leon

    • Marcela Peña Murallas

      ushh Kyutvillan?? si escribes el error todos quizas te podriamos ayudar!! no es que podamos ver lo que estas haciendo!

  • http://twitter.com/ReyesRicardoM Ricardo Reyes Ramos

    Buen dia, justamente estoy aprendiendo como hobbie a programar en android y esto era exacto lo que deseaba hacer, sin embargo tengo una duda he querido agregar la funcion de navegador para que se muestre una pagina web en la pestaña principal y no lo he logrado, alguna orientacion, ya que estoy por volverme loco jeje… ya que al poner el codigo en el archivo pestaña1.java (en mi caso NewsActivity.java) me abre la web en el navegador y no en la pestaña…. y siendo honesto no he encontrado la forma de hacerlo desde lo que seria el archivo pestaña1.xml… alguien me podria orientar? … debo mencionar que soy diseñador industrial y la programacion no es mi fuerte aun que me apaciona =)

    • emmanuel bta.

      hola amigo, recien estoy empezando a programar en este mundo de las app, y me gustaria saber si me puedes pasar tu codigo, para guiarme ya que no tnego ni idea de como se utilizan los tabhost, y mucho menos sabria como cargar una pagina web….

      muy buen aporte, esta muy buena la interfaz.. saludos

  • Gabriel

    PERFECT !!!!!!! :D DDD muchas gracias ….. :D DD

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Gracias a ti Gabriel por seguirnos.

      Jaime

  • Jhonny Gomez

    Es simplemente lo que uno espera :D Felicitaciones a aurora (condesa_sama) y a todos los que hacen esta bonita labor de enseñar y compartir la info.

  • http://twitter.com/Manuel_M2 Manuel

    hola estoy realizando mi tesis de ing electronica con android me podrias ayudar con el codigo para que me llamar una actividad cuando seleccione un item de la lista? estare agradecido saludos

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Manuel:
      Exactamente eso es lo que hace este programa que explico; cada vez que pulsas un item de los 4 que mostramos, se lanza una nueva actividad en la cual puedes hacer lo que necesites.

      Cordial saludo

  • Gabriel

    una pregunta…como le puedo cambiar el color al fondo de cada pestaña ?? no los linear layout sino los tabs……..o sea …al fondo del cuadrado en donde dice navegador (para el caso del ejemplo que dieron )??????

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Gabriel:

      Para cambiarle el color a la pestaña debes agregar esta linea a tu codigo con el color que desees:
      tabHots.getTabWidget().getChildAt(i).setBackgroundColor(Color.GREEN);
      En este caso es verde, pero puedes cambiar al color que desees como lo enseñamos en otro tutorial.

      Espero te sea de ayuda

      Jaime

  • Aalucard9

    Hola me parece muy bien ele ejemplo que realizaste, solo tengo una pregunta
    Cual evento se utiliza en este caso para conocer cual pestaña seleccioné??….
    Agradesco tu ayuda …

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Aalucard9:

      No entiendo tu pregunta, no sabes que pestaña seleccionaste?.
      Cada pestaña tiene un identificador, si quieres saber cual para usarla mas adelante, deberias guardarla en una variable de tipo string y la usas cuando la necesites.

      Jaime Leon

  • Fherraiz62

    Muchas gracias por tu trabajo, me funciona bien pero creo que no me ejecuta los layout con la información que tienen cada uno de ellos, si cambian los botones pero no saca lo de pestaña1, 2, etc. Si me puedes ayudar te lo agradezco

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Fherraiz62:

      En los layout solo coloque un textview, que indica que pestaña esta pulsada, no mas, depronto copiaste el mismo y no le cambiaste el contenido a cada textview y te aparece el mismo texto.
      Revisalo o sino me pones el codigo a ver que pasa.

      Saludos

      Jaime

  • Jessi

    Hola, gracias por el tuto, podrias explicar como hacer cuando se quiere llamar a una activity desde un activity de la pestaña??
    Es decir en una pestaña tengo un activity llamada Notas y en esta activity hay un boton que me abre otra activity, el problema es que se pierden las pestañas al abrir esta segunda activity. Como hago para conservar las pestañas???

    • http://profile.yahoo.com/MK3U5TEA6RXPUM6O5UMKGXI2XI Cristian Diego Sierra

      Yo estoy con el mismo problema, he encontrado esto, pero no consigo que funcione: http://united-coders.com/nico-heid/use-android-activitygroup-within-tabhost-to-show-different-activity a ver si hay suerte

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Jessi:

      Si claro, si creas otra activity por fuera del contenedor te vas a salir de la actividad principal, tienes 2 opciones:
      1. Puedes colocar mas pestañas dentro del TabHost, y que se encuentren dentro de las mismas opciones de la pestañas.
      2. Puedes hacer la actividad que abras tambien tenga un contenedor de TabHost como el que te muestro, y se amplien mucho mas las opciones.

      Intentalo y si tienes dudas me avisas.

      Saludos

      Jaime

  • julian Garcia

    Que onda…

    he seguido el turorial al pie de la letra y no puedo comprender como al principio metes las pestañas en el res/layout y después dices que todas van en el drawable.

    en el onCreate de cada pestana.java va setContentView(R.layout.pestana1);

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Julian:

      Esto se debe al tipo de View que estamos manejando, es un separador que le da orden a las pestañas para que no se vea un solo tono, para que se vea marcado que arriba existen unas opciones de seleccion, es mas estetico.

      Saludos

      Jaime

  • francisco

    como puedo hacer para poner un map en una pestaña?

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola francisco:

      La verdad es que no lo he probado para mostrar un mapa, pero en teoria lo primero que debes hacer es en el layout crear tu MapView con tu respectivo apiKey asi como lo explico condesa_sama en uno de sus tutoriales.
      Despues extiendes tu actividad principal como MapActivity, y en el Manifiest agregas el permiso de acceso a internet, por ultimo debes escribir el metodo isRouteDisplay que se genera automaticamente y listo deberias tener el mapView funcionando.

      Hazlo y me cuentas.

      Saludos

      Jaime

  • Carreto

    tengo algunas dudas sobre las imagenes q se ponen en los xml, ya que se pone una imagen para cuando este marcada y otra cuando no, pero cuando se crea el intent se asigna otra imagen?

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Carreto:

      Cuando llamas el intent es cuando cambia la imagen para tener el aspecto de tener una imagen que sobresalga y resalte mas que las otras, como en la aplicacion de twitter, que se marca en azul la que tienes activa y en gris las que estan ocultas.

      Saludos

      Jaime

  • Ramon Landazuri

    Maestro!!! en verdad que me acabas de abrir un panorama de posibilidades muchas gracias!! excelente tutorial :)

    • Yesid León

      Hola Ramon,
      Me da mucha gracia lo de maestro, no amigo aqui todos somos colaboradores para que la educación llegue a mas personas.
      Quedate pendiente de la segunda entrega que complementa a este tutorial.

      Gracias por tu mensaje

      Jaime Leon

  • http://twitter.com/Samaniegomx Donaldo Samaniego

    Hola que tal muy buen tutorial me gusta para algo que traigo en mente, pero al momento de correrlo me muestra el siguiente error:

    The application Prueba pestanas (process com.prueba.pruebapestanas) has stopped unexpectedly. Please try again

    Me puedes explicar por favor que puedo tener según yo esta igual a como lo publicaste la duda que tengo es que en el MainActivity Extiende de TabActivity y no de Activity?

    Saludos

  • Segio91

    Hola buenas, lo primero enorabuena por todos estos tutoriales estan muy mascaitos y limpios… gracias!
    pero tengo un problema con las pestañas… ya sea copiando el codigo del xml del tabhost, tab widget y framelayout del tutorial en el main.xml o bien arrastrando de la paleta de composite el elemento de pestañas, cuando lo veo en Graphical Layout sin lanzar el emulador se me ve pero al lanzar el emulador no aparecen aunque si ocupan el lugar :S
    no se si me he explicado con claridad.
    Un saludo

  • Perico De los Palotes

    Hola, en primer lugar enhorabuena por el tutorial, muy bien detallado todo!

    No sé si aún contestarás a comentarios pero me ha surgido una duda con respecto la fichero AndroidManifest.xml. ¿Por qué cuando creas las actividades en android:name pones “.Pestana1? el punto no lo entiendo. Si hacemos referencia al archivo Pestana1.java

    Por otra parte creo que lo de TabActivity está obsoleto o eso me dice el eclipse.

    Muchas gracias!

  • Andres

    Hola Amigo, excelente tutorial, digno de un 10. He intentado ejecutarlo pero me dice que el TabActivity is deprecated , entonces ya no me funciona. Esto es debido a mi compilación o es porque ya no vale esa libreria?

    Muchas gracias.

  • Butifarro

    Hola! Solo un pequeño apunte. Todo esto está deprecated desde Android 3.0, así que no sirve de nada aprenderlo. Saludos!

  • Ogerardo17

    Duda cuando escribo el metodo getTabHost() me manda este error, “The method getTabHost() is undefined for the type RutasdfActivity”, mi duda es en donde lo declararon o cual es el codigo de este metodo

    • Josepphh

      amigo no te olvides el

      TabActivity

  • Lalo NX

    Oie tengo una duda, en mi metodo de conten al momento de hacer setContent me sale un error… me dice que is undefinided for the type Drawable

  • daniel

    Gracias pero cuando quiero correr la aplicacion se detiene y me dice The application Prueba pestanas (process com.prueba.pruebapestanas) has stopped unexpectedly. Please try again
    Sabes como puedo solucionarlo ??

    PD: tambien tengo error en :TabHost tabHost = getTabHost(); y me dice que hay que crear un metodo que retorna un null

  • Gabrielus

    Excelente aporte…
    Esta bueno que nos dejes escribir a nosotros el codigo en vez de dejarnos la fuente…
    Un consejo, para ganar tiempo, estaria bueno que sí compartas los demas recursos como imagenes…

    Muy buen post, es el segundo que leo y están muy bueno… espero poder colaborar!!!

  • Katerine R.

    Muchas gracias

  • Roberto bonilla

    Hola fijate que hice esto justamente como esta tanto en el tutorial y en el video pero no logro hacer que las imagenes aparescan en las tabulares agradeceria tu ayuda

  • yur

    Hola! Al poner extends TabActivity dice que está obsoleto, si pongo solo Activity me da error en getTabHost(), como lo puedo solucionar?

  • Dindiel

    Vuestro trabajo y voluntad es impagable chic@s! Gracias a vosotros voy metiéndome poco a poco en este mundillo. Muchas gracias!!

  • Moises Glez.

    hola me preguntaba si esto se podría usar a aplicar en android 2.2

  • http://twitter.com/oso_la_1987 Hector Torres (Oso)

    hola mira te cuento gracias por el post esta bueno lo transcribi todo edite los iconos por otros que yo necesitaba y al momento de echar a correr la aplicacion en mi celu para poder ver como quedo resulta que no mostraba nada lanza un error que dise la aplicacion se detuvo y no optengo nada quisiera saver si es que es posible de que me envies tu codigo para poder ver si es que hise algo mal eso de ante mano muchas gracias

  • Neo

    A la hora de extender la clase MainActivity de TabActivity me dice que se encuentra “deprecated”, cual sería la nueva forma de hacer esto para las nuevas versiones? Gracias

    • jorgegus

      pon un supresswarning YOLO o usa un ActioBar en lugar del TabHost pero solo para versiones 4.0+

  • J-Nip

    Al cambiar de pestaña simplemente se me cierra la app.

    Entonces lo que hice, fue cambiar el codigo de los .xml del a un para insertar controles, asi me dejo abrir la app, pero ya no pude cambiar lo iconos a gris.

  • luisa hernandez

    Hola. Muchas gracias por este tutorial. Creo que tengo todo ya bien, pero me sale un error al ejecutarlo que dice:

    Fatal exception: main

    java.lang.RuntimeException

    Binaty XML file line #12 error inflating class android.windget.tabwidget

    Te agradecería tu ayuda. Gracias

  • Juam12

    hola jaime muy buen post! tengo un problema no me muestra las imagenes estoy usando un L5 android 4.0 podrias decirme cual es el error? o cual puede ser la causa?

  • vrr

    Hola, lo he hecho exactamente como tu has indicado y me explota, no me funciona, esta super interesante, pero no soy capaz de dar con el error, me podrias ayudar via mail, te lo agradeceria bastante

  • arezong

    Muchas gracias, me ha sido de mucha utilidad.
    Tengo un problema y es que no se muestran las imagenes de las distintas pestañas… solo aparece el nombre, pero no la imagen asociada.
    Creo que seguí el ejemplo al pie de la letra. No sé cual será el problema.
    Alguna sugerencia???

    Saludos.

  • http://twitter.com/roberto_enrique Enrique Gudiño

    Hola Jaime como se puede hacer actualmente con pestañas segui el tutorial tal cual pero a la hora de correr en el emulador me dice que se detuvo el proceso de la aplicación y no se ejecutó nada, gracias, espero tu respuesta

  • Nenis

    por que comienza las pestañas .xml en la carpeta de layout y despues ya estan en drawable-mdpi?? me marca errores en los archivos .java en el onCreate

  • emmanuel bta

    Hola amigo, no se si sea mucha molestia que me pases tu codigoo, soy nuevo en esto y en la escula me dejaron un proyecto iwal como el que muestras aki, me gustaria tener tu proyecto y para guiarmee… y hacer algo similar al tuyo, yo se que existen manuales y todo, pero no soy tam bueno entendiendoloss..

  • Monky D Luffy

    hola amigo ya revise todo tu tutorial que plasmas aki, la verdad muy bueno, pero no termino de entender, y vi en tu post 2 sobre este tema k tambien existe el codigo para el codigo 1 pero no esta disponible. y me gustaria k me lo pasaras si no es mucha molesiaa… gracias…

  • Andres

    Amigo gracias por tus tutoriales tu podrías hacer un tutorial sobre los fixed tabs + android por favor ya que nadie lo hace es muy difícil tengo un ejemplo con las librerias , sherlock pero tiene muchos errores. El que trae eclipse solo usa un layout.XML pero ocupo usar mas. Muchas gracias!!!

  • Claudio Ramos

    hola como estan?..les pido ayuda..quiero pasar parametros a una pestaña y de esa a otra, pero con parametro diferente..como lo puedo hacer?