Cómo usar TabLayout con ViewPager2 en Android

Contamos con la mejor solución que hallamos online. Nosotros deseamos que te resulte de mucha ayuda y si deseas comentarnos algún detalle que nos pueda ayudar a mejorar hazlo con total libertad.

Solución:

Tienes que usar esto TabLayoutMediator que imita tabLayout.setupWithViewPager() y configura el ViewPager2 con Tablayout. De lo contrario, tendrá que escribir su propio adaptador que combinará ambas partes.

Su código se verá así en kotlin

TabLayoutMediator(tabLayout, viewPager)  tab, position ->
  tab.text = tabTitles[position]
  viewPager.setCurrentItem(tab.position, true)
.attach()

ACTUALIZAR

marque esto Crear vistas de deslizamiento con pestañas usando ViewPager2

Aquí está la respuesta actualizada Cómo usar TabLayout con ViewPager2 en Android

Ahora no necesitamos crear una clase desde TabLayoutMediator

Utilizar a continuación dependencies

implementation 'com.google.android.material:material:1.1.0-alpha08'
implementation 'androidx.viewpager2:viewpager2:1.0.0-beta02'

CÓDIGO DE MUESTRA

Diseño XMl

Actividad

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
import com.google.android.material.tabs.TabLayoutMediator

import com.google.android.material.tabs.TabLayout


class MainActivity : AppCompatActivity() 

    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

//        setSupportActionBar(toolbar)
        viewpager.adapter = AppViewPagerAdapter(supportFragmentManager, lifecycle)

        TabLayoutMediator(tabs, viewpager, object : TabLayoutMediator.OnConfigureTabCallback 
            override fun onConfigureTab(tab: TabLayout.Tab, position: Int) 
                // Styling each tab here
                tab.text = "Tab $position"
            
        ).attach()


    

ACTUALIZAR

Si estás usando implementation 'com.google.android.material:material:1.1.0-alpha10' luego usa el siguiente código

        TabLayoutMediator(tabs, viewpage,
        TabLayoutMediator.TabConfigurationStrategy  tab, position ->
            when (position) 
                0 ->  tab.text = "TAB ONE"
                1 ->  tab.text = "TAB TWO"
            
        ).attach()

PRODUCCIÓN

Inicializar el TabLayoutMediator objeto con un objeto de TabLayout, ViewPager2 , autoRefresh – tipo booleano y un objeto de OnConfigurationChangeCallback.

TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(tabLayout, viewPager2, true, new TabLayoutMediator.OnConfigureTabCallback() 
  @Override
  public void onConfigureTab(TabLayout.Tab tab, int position) 
    // position of the current tab and that tab  
  
);

Finalmente solo llama attach() al TabLayoutMediator objeto para conectar la tabla y salir al visor : –

 tabLayoutMediator.attach();

autoRefresh – key si se establece en true – (De forma predeterminada, se establece en true )

RECREATES todas las pestañas del tabLayout si notifyDataSetChanged se llama al visor adapter.

Utilice el contenido de TabLayoutMediator.java

Eres capaz de añadir valor a nuestro contenido informacional participando con tu veteranía en las reseñas.

---

---

Utiliza Nuestro Buscador