TabLayout - ¿Cómo Añadir Pestañas en Android

14/7/2019 TabLayout: ¿Cómo Añadir Pestañas En Android?
 Contacto  
 BLOG   LIBRERÍA ANDROID  COMIENZA AQUÍ
 BLOG   LIBRERÍA ANDROID  COMIENZA AQUÍ
TabLayout: ¿Cómo
Añadir Pestañas En
Android?
 James Revelo  Junio 27, 2015
Si deseas dividir tu contenido en subcategorías, usar un

Navigation Drawer no te será su ciente. Para ello debes usar
pestañas o tabs en tu aplicación Android.

www.hermosaprogramacion.com/2015/06/tablayout-como-anadir-pestanas-en-android/ 1/35
Esta vez la librería de diseño no se ha olvidado de este

componente tan vital para la navegación. Nos ha entregado a los
Android Developers el TabLayout.
Ya sé que antes habíamos visto como añadir pestañas en la

action bar, pero recuerda que el nuevo concepto de App Bar
cambió todo.
Obtén
El TabLayout es un componente que facilita el cambio entre un
contenido y otro. Ahora va por separado y no se liga a la Action
Contenido
Bar directamente. Exclusivo
Aprende a
Nos provee una forma automatizada y simpli cada para
programar apps
asociarse a un View Pager, librándonos de todo el trabajo de
Android con tips y
coordinación entre los Swipe Views y las pestañas.
recursos que solo
comparto con
Veamos como añadir un Tab Layout y de qué forma integrarlo en los suscriptores de
un ejemplo completo. mi boletín privado
Descargar Proyecto Final En Android

Studio Correo
SUSCRIBIRSE
TabLayout: ¿Como Crear Pestañas En Android?
¿Qué buscas?
Buscar
Lo Más Popular
Crear Un Web
A continuación, sigue las instrucciones para desbloquear el link Service Para
de descarga del proyecto nal: Android Con

Mysql, Php y Json
Descargar Código ¿Cómo

Sincronizar
Sqlite Con
Mysql En
Añadir Tabs Con El TabLayout Android?
En Android Aplicación
Android Con
La lista de checkeo para Material Design nos indica de fondo que Navigation
las pestañas ahora hacen parte de la super cie de la App Bar. Drawer Y Tabs
Adicionalmente el estilo elimina las barras verticales de
separación que antes se les añadía.
NavigationView:
Navigation Drawer Con
Material Design
TabLayout:
¿Cómo Añadir
Pestañas En
Android?
Realizar
En de nición Xml simplemente incluyes dentro de la etiqueta
Peticiones
AppBarLayout el componente TabLayout :
Http Con La
Librería Volley En Android
<android.support.design.widget.AppBarLayout 
android:id="@+id/appbar"
Tutorial De
...> Bases De
<android.support.v7.widget.Toolbar Datos SQLite
android:id="@+id/toolbar" En
.../>
Aplicaciones Android
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent" Servicio Web
android:layout_height="wrap_content" /> RESTful Para
</android.support.design.widget.AppBarLayout>
Android Con
Php, Mysql y Json
El código anterior es para crear tabs prede nidas debajo de la

Tutorial De
toolbar.
Listas Y
Adaptadores
En Android
Toolbar En
Android:
Creación De

Action Bar En Material

Design
Como ves, el TabLayout actúa como un widget normal. Así que

puedes obtener su instancia programáticamente con
findViewById() :
TabLayout tabs = (TabLayout) findViewById(R.id.tabs); 
Para añadir pestañas usa el método addTab() , el cual recibe un

nuevo objeto TabLayout.Tab . Puedes obtener una instancia
prefabricada con newTab() y luego setear su título con
setText() .
... 
tabs.addTab(tabs.newTab().setText("TELÉFONOS"));
tabs.addTab(tabs.newTab().setText("TABLETS"));
tabs.addTab(tabs.newTab().setText("PORTÁTILES"));
Lo contrario a tabs jas son las tabs deslizantes o scrollables. Su

uso es excelente cuando la cantidad de pestañas es grande, ya
que podemos movernos con un scroll.
Activa este modo con el método TabLayout.setTabMode() .

Donde debes añadir como parámetro la bandera
TabLayout.MODE_SCROLLABLE . 
tabs.setTabMode(TabLayout.MODE_SCROLLABLE); 
Por otro lado… ¿Cómo añadir iconos en las pestañas?
Sencillo, usa el método setIcon() :
... 
tabs.addTab(tabs.newTab().setIcon(R.drawable.ic_teléfono));
tabs.addTab(tabs.newTab().setIcon(R.drawable.ic_tablet));
tabs.addTab(tabs.newTab().setIcon(R.drawable.ic_portátil));
A groso modo ese serían las herramientas básicas para el

manejo de pestañas, sin embargo ten en cuenta los siguientes
puntos:
Procesa la
selección tabs de con la escucha
OnTabSelectedListener . Solo añádela con
setOnTabSelectedListener() y sobrescribe los
controladores.
tabs.setOnTabSelectedListener( 
new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// ...
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
// ...
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
// ...
}
}
);
Si deseas que un ViewPager escuche el cambio de

pestañas usa TabLayout.TabLayoutOnPageChangeListener .
ViewPager viewPager = ...; 

TabLayout tabs = ...;
viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeLis
Puedes poblar las pestañas en conjunto de las secciones de

un ViewPager con setTabsFromPagerAdapter() .
Es posible ahorrarse la coordinación entre los eventos y la
población de pestañas con el método
setupWithViewPager() . Esto lo veremos en el siguiente
ejemplo.
Crear Proyecto En Android

Studio
Paso #1. Inicia Android Studio y crea un nuevo proyecto en File >
New > New Project… con el nombre de “Tricky Market“. Como
viste en el video, esta aplicación es una tienda online de
tecnología.
Selecciona una actividad en blanco Blank Activity y con rma.
Paso #2. Dirígete al archivo build.gradle y copia las

dependencias del siguiente código:
build.gradle 
dependencies { 
...
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
compile 'com.github.bumptech.glide:glide:3.6.0'
compile 'com.android.support:cardview-v7:22.2.0'
compile 'in.srain.cube:grid-view-with-header-footer:1.0.12'
}
Es necesario añadir la librería GridView With Header And

Footer (u otra que te guste), ya que pondremos un ítem de
cabecera dentro de la grilla.
Paso #3. Abre el archivo /res/values/strings.xml e inserta las

siguientes cadenas:
strings.xml

<resources> 
<string name="app_name">Trick Market</string>
<string name="title_section1">Teléfonos</string>
<string name="title_section2">Tablets</string>
<string name="title_section3">Portátiles</string>
<string name="action_settings">Settings</string>
<string name="action_shop">Carrito De Compras</string>
</resources>
Paso #4. De ne los colores del diseño con Material Design en

/res/values/colors.xml de la siguiente forma:
colors.xml
<?xml version="1.0" encoding="utf-8"?> 

<resources>
<color name="window_background">#EEEEEE</color>
<color name="primaryColor">#8BC34A</color>
<color name="primaryDarkColor">#689F38</color>
<color name="accentColor">#FAD317</color>
</resources>
Paso #5. Modi ca el estilo de la aplicación desde el archivo

/res/values/styles.xml con los colores que acabas de de nir:
styles.xml
<resources> 
<style name="Theme.TrickMarket" parent="Base.AppTheme" />
<style name="Base.AppTheme" parent="Theme.AppCompat.Light.NoAct

<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryDarkColor</item
<item name="colorAccent">@color/accentColor</item>
<item name="android:windowBackground">@color/window_backgro
</style>
</resources>
Paso #6. Crea las dimensiones de abajo en tu archivo

/res/values/dimens.xml.
dimens.xml 
<resources> 

<item
android:id="@+id/ic_badge"
android:drawable="@drawable/ic_cart" />
</layer-list>
Paso #17. Lo siguiente es crear una nueva clase llamada

BadgeDrawable.java que extienda de Drawable . Con ella
dibujaremos el círculo sobre el recurso creado previamente.
Este procedimiento para decorar un action button con una

noti cación, está basado en el artículo de Jesse Hendrickson
denominado “Dynamically add air to ActionBar MenuItems”. De
verdad es muy interesante y te recomiendo que lo leas.
BadgeDrawable.java
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.Typeface; 
import android.graphics.drawable.Drawable;
/**
* Drawable con un contador flotante
*/
public class BadgeDrawable extends Drawable {
private float mTextSize;

private Paint mBadgePaint;
private Paint mTextPaint;
private Rect mTxtRect = new Rect();
private String mCount = "";

private boolean mWillDraw = false;
public BadgeDrawable(Context context) {

mTextSize = context.getResources().getDimension(R.dimen.bad
mBadgePaint = new Paint();

mBadgePaint.setColor(Color.RED);
mBadgePaint.setAntiAlias(true);
mBadgePaint.setStyle(Paint.Style.FILL);
mTextPaint = new Paint();

mTextPaint.setColor(Color.WHITE);
mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
mTextPaint.setTextSize(mTextSize);
mTextPaint.setAntiAlias(true);
mTextPaint.setTextAlign(Paint.Align.CENTER);
}
@Override
public void draw(Canvas canvas) {
if (!mWillDraw) {
return;
}
Rect bounds = getBounds();

float width = bounds.right - bounds.left;
float height = bounds.bottom - bounds.top;
// Position the badge in the top-right quadrant of the icon

float radius = ((Math.min(width, height) / 2) - 1) / 2;
float centerX = width - radius - 1;
float centerY = radius + 1;
// Draw badge circle.

canvas.drawCircle(centerX, centerY, radius, mBadgePaint);
// Draw badge count text inside the circle.

mTextPaint.getTextBounds(mCount, 0, mCount.length(), mTxtRe
float textHeight = mTxtRect.bottom - mTxtRect.top;
float textY = centerY + (textHeight / 2f);
canvas.drawText(mCount, centerX, textY, mTextPaint);
}
/*
Sets the count (i.e notifications) to display.
*/
public void setCount(int count) {
mCount = Integer.toString(count);
// Only draw a badge if there are notifications.

mWillDraw = count > 0;
invalidateSelf();
}
@Override
public void setAlpha(int alpha) {
// do nothing
}

@Override
public void setColorFilter(ColorFilter cf) {
// do nothing
}
@Override
public int getOpacity() {
return PixelFormat.UNKNOWN;
}
}
Paso #18. A continuación crea una clase llamada Utils.java. La

idea es añadirle un método estático llamado setBadgeCount()
para asignar el valor del contador de la noti cación.
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
/**
* Clase de utilidades
*/
public class Utils {
public static void setBadgeCount(Context context, LayerDrawable
BadgeDrawable badge;
// Reusar drawable
Drawable reuse = icon.findDrawableByLayerId(R.id.ic_badge);
if (reuse != null && reuse instanceof BadgeDrawable) {
badge = (BadgeDrawable) reuse;
} else {
badge = new BadgeDrawable(context);
}
badge.setCount(count);
icon.mutate();
icon.setDrawableByLayerId(R.id.ic_badge, badge);
}
}
Paso #19. Ve a /res/layout/ y modi ca el layout de la actividad

principal. Es importante usar un CoordinatorLayout para el
botón otante que usaremos en la parte inferior derecha.
También por si quieres esconder la Toolbar y dejar jas las
pestañas al realizar scrolling.
activity_main.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="htt
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator" 
<android.support.v4.view.ViewPager
android:id="@+id/pager"
app:layout_behavior="@string/appbar_scrolling_view_behavior
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>


<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="@dimen/size_fab"
android:layout_height="@dimen/size_fab"
android:layout_margin="@dimen/fab_margin"
android:onClick="onFabClick"
android:src="@drawable/ic_search"
app:borderWidth="0dp"
app:elevation="@dimen/fab_elevation"
app:layout_anchor="@id/pager"
app:layout_anchorGravity="bottom|right" />
</android.support.design.widget.CoordinatorLayout>
Paso #20. Ahora abre el archivo MainActivity.java y modifícalo

con el código de abajo. Ten en cuenta que debes crear un
FragmentPagerAdapter para el ViewPager .
Luego relaciona el TabLayout con el view pager a través del

método setupWithViewPager() para in ar las tres pestañas
basada en secciones.
import android.graphics.drawable.LayerDrawable; 
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import
import
android.support.v4.view.ViewPager;
android.support.v7.app.ActionBar;

import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {

ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setToolbar(); // Añadir la toolbar
// Setear adaptador al viewpager.

mViewPager = (ViewPager) findViewById(R.id.pager);
setupViewPager(mViewPager);
// Preparar las pestañas

TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.setupWithViewPager(mViewPager);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
MenuItem item = menu.findItem(R.id.action_shop);
// Obtener drawable del item

LayerDrawable icon = (LayerDrawable) item.getIcon();
// Actualizar el contador
Utils.setBadgeCount(this, icon, 3);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_shop) {
showSnackBar("Carrito de compras");
return true;
}
return super.onOptionsItemSelected(item);
}
/**
* Muestra una {@link Snackbar} prefabricada
*
* @param msg Mensaje a proyectar
*/
private void showSnackBar(String msg) {
Snackbar.make(findViewById(R.id.fab), msg, Snackbar.LENGTH_
}
/**
* Establece la toolbar como action bar
*/
private void setToolbar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar(); 
if (ab != null) {
// Poner ícono del drawer toggle
ab.setHomeAsUpIndicator(R.drawable.ic_menu);
ab.setDisplayHomeAsUpEnabled(true);
}
/**
* Crea una instancia del view pager con los datos
* predeterminados
*
* @param viewPager Nueva instancia
*/
private void setupViewPager(ViewPager viewPager) {
SectionsPagerAdapter adapter = new SectionsPagerAdapter(get
adapter.addFragment(GridFragment.newInstance(1), getString(
viewPager.setAdapter(adapter);
}
/**
* Método onClick() del FAB
*
* @param v View presionado
*/
public void onFabClick(View v) {
showSnackBar("Buscar producto");
}
/**
* Un {@link FragmentPagerAdapter} que gestiona las secciones,
* títulos de las pestañas
*/
public class SectionsPagerAdapter extends FragmentPagerAdapter
private final List<Fragment> mFragments = new ArrayList<>()
private final List<String> mFragmentTitles = new ArrayList<
public SectionsPagerAdapter(FragmentManager fm) {

super(fm);
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
public void addFragment(Fragment fragment, String title) {

mFragments.add(fragment);
mFragmentTitles.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitles.get(position);
}
}
Paso #21. Por último corre la aplicación en Android Studio para


ver nuestra tienda online de tecnología Trick Market.
Conclusión
El TabLayout permite cambiar entre views de forma fácil y
amigable.
Hemos visto cómo crear un Grid View e integrar distintos

productos de una tienda online en cada sección de un View
Pager.
Aunque no es un ejemplo completo, muestra como las tabs

pueden optimizar la transición entre cada segmento de
contenido.
Lo ideal sería realizar peticiones Http desde Android hacia un

servidor externo, que almacene la información de datos reales.
¿Cuál es el siguiente paso?
Aprender a usar transiciones entre actividades y generar

animaciones en las interacciones de distintos views.
Ícono de la aplicación

Comentarios Comunidad 
1 Acceder
 Recomendar 3 t Tweet f Compartir
Ordenar por los mejores
Únete a la conversación...
INICIAR SESIÓN CON

O REGISTRARSE CON DISQUS ?
Nombre
Javier Augusto Piñeros Pareja • hace 3 años

buenos días, me pueden por favor ayudar a descargar el
código fuente, el enlace no aparece activo, ya me registré
con google, gracias!
2△ ▽ • Responder • Compartir ›
James Moderador > Javier Augusto Piñeros Pareja

• hace 3 años
Arreglado amigo
Javier Augusto Piñeros Pareja > James

• hace 3 años
Gracias James!
△ ▽ • Responder • Compartir ›
Pedro Barreto Gonzalez (Toninh • hace 3 años • edited

Como añadir estas TABs en un fragment... Y al escoger un
ítem llame a otro fragment? 
3 Responder Compartir ›
MagoMtz • hace 2 años

disculpa, no funciona al hacer swipe o dar click no hace
nada
santiagovas • hace 2 años

Excelente documentación me ayudo bastante ! Bien
Merinia • hace 2 años

Hola James, he seguido todos los pasos y hasta el paso
19 todo va bien, pero en el paso 20 al aplicar los cambios
en el MainActivity y correr la app, muestra error de que la
app se ha detenido "Unfortunately, Tricky Market has
stopped", revisé el MainActivity pero parece que todo esta
correcto. Alguna sugerencia? Gracias!
Jesuso Marfil • hace 3 años

buen dia, como podria implentar el OnItemClicListener en
el gridView?
Jessica • hace 3 años

Muy buenos tutoriales :) Me sirven de mucho, ¡gracias!
Jesuso Marfil • hace 3 años

hay en error en el link de descarga aparece asi:
[fancy_box id=5 linked_cu=5958]Click AQUÍ para
descargar código completo.[/fancy_box]
James Moderador > Jesuso Marfil • hace 3 años
Arreglado amigo!
Maurel Reyes • hace 3 años

Tengo un problema espero me puedan ayudar.
Estoy implementando un NavigationDrawer, Fragmentos y
Tabs.
Tengo 2 opciones. ofertas y catálogos.
Por defecto carga el fragmento de ofertas y todo bien. trato
de cambiar al fragmento de catalogo e igual cargan la lista
de artículos. en ambos fragmentos tengo tabs. el problema
esta que cuando intento cambiar al fragmento de ofertas
no se me muestran la lista de ofertas.
El error esta en que desde el método onCreateView del 

fragmento cargo el catalogo de ofertas Al tratar de
fragmento cargo el catalogo de ofertas. Al tratar de
regresar a este fragmento ya no se llama el método
onCreateView por lo tanto tampoco se llama el método
desde el que cargo la lista de ofertas. Alguna ayuda para
solucionar mi problema? Muchas Gracias y muy buen post
Saludos!!
Rafael • hace 3 años

Como hacer para que cuando haga click en una pestaña
me salgan otras 2 bajo?
Oscar • hace 3 años

buenas gente, estoy haciendo un trabajo de fin de grado
que consiste en un app que aglutine todos los sensores
disponibles en el smartphone (sonido, luz, presion,
acelerometro... etc) y uno de los activities utilice tabs para
mostrar todos con scroll horizontal para que todos
aparezcan en la misma ventana, pero dependiendo el tab,
muestre un layout tab distinto.
Hasta ahi, todo correcto, pero nose donde

colocar/nombrar/referenciar el código java para cada uno
de los tabs, nose si me he explicado bien... pero necesito
ayuda, gracias!!
Luis Troya • hace 3 años • edited

Excelente tutorial, me ayudo a implementar los tabs con el
navigation drawer de una manera muy sencilla
ferje • hace 3 años

hola quisiera saber como instalar la libreria GridView With
Header And Footer ??? ayuda por fabor
Edgar Aguilar • hace 3 años

BUENAS NOCHES QUISIERA SABER O SI ALGUIEN ME
PUEDE AYUDAR, ME GUSTARÍA SABER COMO
ASIGNARLE FUNCIONALIDAD A LAS IMÁGENES
DENTRO DEL TAB,
OSEA QUE CUANDO SELECCIONE UNA OPCIÓN ME

MANDE A UN VÍDEO O A OTRA ACTIVIDAD.
AGRADEZCO SU ATENCIÓN Y SI ME PUEDEN AYUDAR

MUCHO MEJOR GRACIAS.

Luis Troya > Edgar Aguilar • hace 3 años
Luis Troya > Edgar Aguilar • hace 3 años
Agregale un onClick al ImageView
Marlon Arteaga Morales • hace 3 años

Una pregunta desde que versión de android puedo
implementar esto de TabLayout, por favor si alguien
respondiera mi duda.
Cambio y Fuera
Luis Troya > Marlon Arteaga Morales • hace 3 años

Desde la version 2.3 en adelante
User X • hace 3 años • edited

James, espero me puedas ayudar en el paso #5.
Este es el código que das para modificar:
<style name="Theme.TrickMarket"
parent="Base.AppTheme"/>
<style name="Base.AppTheme"
parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/primaryColor</item>
<item
name="colorPrimaryDark">@color/primaryDarkColor</item
<item name="colorAccent">@color/accentColor</item>
<item
name="android:windowBackground">@color/window_backg
</style>
Y este es el código que tengo por defecto:
ver más
Daniel • hace 3 años • edited

hola buenas tarde, tengo un problema con los tablayout :
tengo 3 tabs, en cada uno hago peticiones post usando la
libreria volley y cargo la informacion a un listview. Todo va
bien en las peticiones pero el detalle está en que, por
ejemplo, si estoy en el tab 1 y cambio al tab 3, en este
ultimo se vuelve ha realizar la peticion del tab 1 y cuando
vuelvo al tab 1, los datos en el listivew se han duplicado:
practicamente es como si el tab 1 se hubiese reiniciado sin
que este en él. Facilmente puedo borrar la hacer
listview.clear() para que no se duplique pero lo que no
quiero esque el fragment del tab se reinicie. Esto ocurre
con los tres tabs, cambiando entre uno y uno los otros se 
reinician. SE QUE ES UN PROBLEMA CON LOS TABS Y
MAS NO CON LAS PETICIONES. espero puedas

ayudarme
ESTO COLOCO EN LA ACTIVIDAD DONDE SE ALOJAN

LOS TABS
ver más
Luis Troya > Daniel • hace 3 años

Tienes que limpiar la data en adapter y llamar el
metodo notifyDataSetChanged()
Alberto Cruz • hace 3 años

hola buenas tardes oyes solo para preguntarte si quisiera
aplicar esta misma aplicacion para mi negocio como
puedo lograr que se enlace con una base de datos para
que me saque toda la informacion de la base de datos
incluyendo fotos ,,,,,,,,, ?
James Moderador > Alberto Cruz • hace 3 años
Hola Alberto, no comprendo tu pregunta. Supongo

que la respuesta es que uses una base de datos
SQLite para obtener los datos?
Puedes explicarte mejor?

Rodrigo Cortes (Blue-Sens) • hace 3 años

BUENAS NOCHES QUISIERA SABER O SI ALGUIEN ME
PUEDE AYUDAR, ME GUSTARÍA SABER COMO
ASIGNARLE FUNCIONALIDAD A LAS IMÁGENES
DENTRO DEL TAB,
OSEA QUE CUANDO SELECCIONE UNA OPCIÓN ME

MANDE A UN VÍDEO O A OTRA ACTIVIDAD.
AGRADEZCO SU ATENCIÓN Y SI ME PUEDEN AYUDAR

MUCHO MEJOR GRACIAS.
Marlon Arteaga Morales > Rodrigo Cortes (Blue-

Sens) • hace 3 años • edited
Claro sólo le tienes que dar un

Item item =(item)findViewById(R.id.idItem);
item.setOnClickListener
y Listo luego tienes que hacer el Intent del item.
startActivity(new
Intent(ActivityMain.this,SegundoMain.class);)
y va a ir al SegundoMain, osea el activity que 
quieras sería
quieras sería.
Carlos Eduardo Ramirez Pabón > Marlon

Arteaga Morales • hace 2 años
en que lugar creeo eso?????necesito eso

pronto
Show more replies
nano contrera • hace 3 años • edited

buenas quisiera saber como implementar con un
webservice a el tabactivity que esta deprecated , uso
GSON en mi listview que se consume de un JSON, desde
ya muchas gracias ah por cierto te puedo escribir a tu mail
quisiera saber si me puedes orientar en ciertas cosas he ir
retribuyendote por los conocimientos adquiridos desde ya
muchas gracias por los tutoriales
Christian Sari • hace 4 años

Una consulta, buenos dias James, una pregunta para
guiarme, quiero usar este tutorial para hacer una app con
tabs, pero cada tab envia a un contenido diferente, es
decir leera xmls o json, como puedo hacerlo asi, tengo
comprendido que debo usar fragment's diferentes? y en
cada fragment el lector o parser?.
Espero su respuesta. Gracias.

Raverito Stone • hace 4 años

Buen tutorial, tengo una pregunta como hago para que por
defecto aparasca el tab de X posicion y no el primero.
Henry Sabogal • hace 4 años

Hola, gracias por el tutorial, me ha servido bastante.
Quería preguntar como se hace para mostrar los íconos
en el tab cuando cuando se asocia con el ViewPager. Ya
utilice la función setIcon para el TabLayout pero no se
muestran. De nuevo gracias por compartir
dago23 • hace 4 años

hola, excelente tutorial.muy bueno la verdad.
necesitaria saber si me
podrias colaborar en la utilizacion del carrito de compras,
para que
este reciba eventos de agregar articulos y mostrando la

notificacion por
cada articulo agregado...seria de gran ayuda cualquier
sugerencia...Gracias!!
Xuelo • hace 4 años

Necesito ayuda, no consigo poblar cada pestaña
James Moderador > Xuelo • hace 4 años

que error te sale?
Xuelo • hace 4 años

Grandisimo tutorial!
No consigo descargar el código completo he retwiteado y
dado a like y nada....
Xuelo > Xuelo • hace 4 años

solucionado
Rodrigo Dámazo • hace 4 años

Hola James.. eh seguido todos tus tutoriales desde hace
un tiempo... Siento que tus aportes son muy utiles por el
echo de que usas metodos y/o herramientas actualizadas,
aunado a la explcación detalla que ofreces.
Use este tutorial para colocar tabs en mi proyecto, con la

diferencia que uso 3 fragments, correspondientes a cada
pestaña. El problema esta en que los fragments no se ven
completos (no se colocan debajo del tab layout) uso los
mismos widgets que colocas en el activity_main.xml a
excepcion del FloatingActionButton... a que crees que se
deba?
⛺
James Moderador > Rodrigo Dámazo • hace 4 años
Hola compañero, gracias por tu apreciación :)
De seguro es el layout y las restricciones que

tienes. Muestrame el contenido.
Rodrigo Dámazo > James • hace 4 años

Hola james, gracias pero afortunadamente 
ya resolvi el problema solo agrupe todo en
ya resolvi el problema, solo agrupe todo en
un linearlayout y los fragments ya me los
coloco debajo del tabLayout..gracias seguire
al tanto de tus aportes...
Show more replies
Damian Condrac • hace 4 años

Tengo una pregunta.....si pongo un boton en algun
fragment de los creados y quiero que al hacerle click sea
reemplazado por otro, como puedo hacerlo ?
James Moderador > Damian Condrac • hace 4 años
Hola Damian. Prueba usando

FragmentTransaction.replace() para reemplazar el
contenido del fragmento:
final FragmentTransaction ft =
getFragmentManager().beginTransaction();
ft.replace(R.id.contenedor, new
FragmentoAlterno(), "Etiqueta");
ft.commit();
Damian Condrac > James

• hace 4 años • edited
Gracias por contestar. Cree un rootfragment
en la primer pestaña , al hacer click voy al
segundo fragment, si apreto el boton back
vuelvo al rootfragment, Hasta ahi todo ok .
El problema es que si voy al segundo
fragment y me muevo a otra pestaña .. y
apreto el boton back no sale de la app sino
tengo que apretar 2 veces para que por mas
que este en otro tab vuelva al fragment
anterior en la otra pestaña que no esta
seleccionada.
Show more replies
Nicolas • hace 4 años

Hola James ,, te hago una pregunta , como puedo hacer
para que el TabLayout inicie por default en la pestaña que
yo quiera , por ejempli de tres pestañas , que inicie en la
del medio ?Gracias por los tutos
James Moderador > Nicolas • hace 4 años
Hola Nicolas. A vuelo de pájaro se me ocurre que 

uses el método TabLayout getTabAt() para obtener
uses el método TabLayout.getTabAt() para obtener
la pestaña en la posición que desees y luego con el
resultado obtenido usas Tab.select() para
seleccionarla. No se si sea de ayuda mi respuesta
:v
CarlosCarEd > James • hace 4 años

Hola Jemes¡ Primero que nada Muchas
gracias por los tutoriales me han sido de
Premio Top 80 Mobile App Blogs de Feedspot
Hermosa Programación: +50 Tutoriales Desarrollo Android Copyright © 2019.


TabLayout - ¿Cómo Añadir Pestañas en Android

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

TabLayout - ¿Cómo Añadir Pestañas en Android

Caricato da

Copyright:

Formati disponibili

14/7/2019 TabLayout: ¿Cómo Añadir Pestañas En Android?

 BLOG   LIBRERÍA ANDROID  COMIENZA AQUÍ

 BLOG   LIBRERÍA ANDROID  COMIENZA AQUÍ

Si deseas dividir tu contenido en subcategorías, usar un

Esta vez la librería de diseño no se ha olvidado de este

Ya sé que antes habíamos visto como añadir pestañas en la

Descargar Proyecto Final En Android

Descargar Código ¿Cómo

El código anterior es para crear tabs prede nidas debajo de la

Action Bar En Material

Como ves, el TabLayout actúa como un widget normal. Así que

TabLayout tabs = (TabLayout) findViewById(R.id.tabs); 

Para añadir pestañas usa el método addTab() , el cual recibe un

Lo contrario a tabs jas son las tabs deslizantes o scrollables. Su

Activa este modo con el método TabLayout.setTabMode() .

Por otro lado… ¿Cómo añadir iconos en las pestañas?

Sencillo, usa el método setIcon() :

A groso modo ese serían las herramientas básicas para el

Si deseas que un ViewPager escuche el cambio de

ViewPager viewPager = ...; 

Puedes poblar las pestañas en conjunto de las secciones de

Crear Proyecto En Android

Selecciona una actividad en blanco Blank Activity y con rma.

Paso #2. Dirígete al archivo build.gradle y copia las

Es necesario añadir la librería GridView With Header And

Paso #3. Abre el archivo /res/values/strings.xml e inserta las

Paso #4. De ne los colores del diseño con Material Design en

<?xml version="1.0" encoding="utf-8"?> 

Paso #5. Modi ca el estilo de la aplicación desde el archivo

<style name="Base.AppTheme" parent="Theme.AppCompat.Light.NoAct

Paso #6. Crea las dimensiones de abajo en tu archivo

Paso #7. A continuación descarga los drawables e imágenes

Aunque en el anterior archivo te entrego los iconos, puedes

Crear GridView Con Header

Solo tendremos en cuenta el nombre, la descripción, el precio, el

public Product(String nombre, String descripcion, String precio

public String getNombre() {

public String getDescripcion() {

public String getPrecio() {

public float getRating() {

public int getIdThumbnail() {

Paso #9. Ahora añade una clase llamada Products.java. Su

private static Product[] telefonos = {

private static Product[] tablets = {

private static Product[] portatiles = {

public static Product[] getTelefonos() {

public static Product[] getTablets() {

public static Product[] getPortatiles() {

Paso #10. Para la representación grá ca de los ítems del grid

<?xml version="1.0" encoding="utf-8"?> 

Paso #11. Crea otro layout nuevo llamado grid_header.xml y

<?xml version="1.0" encoding="utf-8"?> 

Crear Adaptador Para El

private final Context mContext;

public GridAdapter(Context c, Product[] items) {

Product item = getItem(position);

Paso #13. Añade un layout llamado fragment_main.xml en

GridViewWithHeaderAndFooter es la variación del grid view que

Aunque podría crearse un fragmento para cada una, he decidido

Crea una nueva clase con el nombre de GridFragment.java e

// Obtención del grid view

// Inicializar el grid view

LayoutInflater inflater = getActivity().getLayoutInflater()