android - studio - Tablayout solo con iconos

tabs con iconos android

Question

Estoy usando soporte de diseño para crear pestañas. También estoy usando ViewPager para pestañas intercambiables.

Ahora, no sé cómo usar solo iconos en lugar de textos en pestañas. Traté de averiguarlo pero no obtuve ningún éxito.

Mi código:

Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager = (ViewPager) findViewById(R.id.pager);
    setupViewPager(viewPager);
    setupTablayout();
}

private void setupTablayout() {
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    tabLayout.setupWithViewPager(viewPager);
}

class MyPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public MyPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFrag(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        mFragmentTitleList.get(position)
    }
}

private void setupViewPager(ViewPager viewPager) {
    MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
    adapter.addFrag(new frag(), "CAT");
    adapter.addFrag(new frag(), "DOG");
    adapter.addFrag(new frag(), "BIRD");
    viewPager.setAdapter(adapter);
}

Answer 1

Como se menciona en los comentarios, la definición de los íconos en TabLayout no funciona cuando se utiliza un Adaptador de paginación. Para aquellos que usan Kotlin, una solución es crear una función de extensión como esta:

fun TabLayout.setupWithViewPagerAndKeepIcons(viewPager : ViewPager?) {
    val icons =  mutableListOf<Drawable?>()
    repeat(tabCount) {
        icons.add(getTabAt(it)?.icon)
    }
    setupWithViewPager(viewPager)

    repeat(tabCount) {
        getTabAt(it)?.setIcon(icons.get(it))
    }
}

Luego, en layout.xml, agregue sus iconos a TabLayout:

    <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout">

        <com.google.android.material.tabs.TabItem
                android:icon="@drawable/your_icon"/>

    </com.google.android.material.tabs.TabLayout>

Finalmente, use la función de extensión para configurar TabLayout con un ViewPager.

tab_layout.setupWithViewPagerAndKeepIcons(view_pager)

Answer 2

Con el TabLayout provisto por la Biblioteca de Componentes de Materiales puede usar:

• El método setIcon para definir el resourceId
• El método setTabLabelVisibility para establecer TAB_LABEL_VISIBILITY_UNLABELED .

Algo como:

| LinearLayout (vertical)
|-- TabLayout (width: match_parent)
|---- TabItem (without text, just icons)
|---- TabItem
|---- ...
|-- ViewPager

Answer 3

El tutorial que se muestra en el siguiente enlace debe cubrir lo que desea. https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout#add-icons-to-tablayout

Copié la sección relevante a continuación.

Agregar iconos a TabLayout

Actualmente, la clase TabLayout no proporciona un modelo de abstracción limpio que permita iconos en su pestaña. Hay muchas soluciones alternativas publicadas, una de las cuales es devolver una SpannableString, que contiene su icono en un ImageSpan, desde el método getPageTitle (posición) de su PagerAdapter como se muestra en el fragmento de código a continuación:

private int[] imageResId = {
        R.drawable.ic_one,
        R.drawable.ic_two,
        R.drawable.ic_three
};

// ...

@Override
public CharSequence getPageTitle(int position) {
    // Generate title based on item position
    // return tabTitles[position];
    Drawable image = context.getResources().getDrawable(imageResId[position]);
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
    SpannableString sb = new SpannableString(" ");
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

De manera predeterminada, la pestaña creada por TabLayout establece la propiedad textAllCaps como verdadera, lo que evita que se represente ImageSpans. Puede anular este comportamiento cambiando la propiedad tabTextAppearance.

  <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
  </style>

  <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
  </style>

Answer 4

En TabLayout , el ícono de configuración es fácil:

getPageTitle(position) debe devolver null (si no desea que se muestre el título).

Próximo :

tabLayout.getTabAt(0).setIcon(resId);

tabLayout.getTabAt(1).setIcon(resId);

......

Answer 5

En la nueva versión de TabLayout , Google agregó TabItem que fácilmente puede agregar Icon a través de su XML con el siguiente código:

<android.support.design.widget.TabLayout
         app:tabTextColor="@color/gray"
         app:tabMode="fixed"
         app:tabBackground="@color/red"
         app:tabIndicatorHeight="4dp"
         app:tabIndicatorColor="@color/purple"
         app:tabPadding="2dp"
         app:tabSelectedTextColor="@color/white"
         app:tabMinWidth="64dp"
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <!--add height and width to TabItem -->
     <android.support.design.widget.TabItem 
             android:text="@string/tab_text"/>

     <android.support.design.widget.TabItem
             android:icon="@drawable/ic_android"/>

 </android.support.design.widget.TabLayout>

Ver más here .

Answer 6

La forma más fácil que he encontrado para usar iconos es usar Tablayout.Tab.setIcon (dibujable). Esto también facilita resaltar el icono seleccionado. Si quieres hacer esto, sigue estos pasos.

Paso 1. Agregue sus imágenes a las carpetas res.mipmap. (mipmap-mdpi, hdpi, etc.) A juzgar por las otras respuestas aquí, también está bien ponerlas en las carpetas res.drawable.

Paso 2. Llame a setIcon en todas sus pestañas después de configurar su TabLayout y ViewPager. Hice esto en mi AdapterTabs para mantener ordenada la actividad. Entonces en tu actividad haz esto:

    tablayout = (TabLayout) findViewById(R.id.tab_layout);
    viewPager = (ViewPager) findViewById(R.id.viewPager);
    adapterTabs = new AdapterTabs(this, getSupportFragmentManager(), fragments, tablayout, viewPager);

    viewPager.setAdapter(adapterTabs);
    tablayout.setupWithViewPager(viewPager);
    adapterTabs.setTabIcons();

y en su AdapterTabs, que debería extender FragmentPagerAdapter, coloque su método setTabIcons ().

    public void setTabTitlesToIcons() {
    Drawable icon1 = context.getResources().getDrawable(R.mipmap.ic_1);
    Drawable icon2 = context.getResources().getDrawable(R.mipmap.ic_2);
    Drawable icon3 = context.getResources().getDrawable(R.mipmap.ic_3);
    Drawable icon1Hilighted = context.getResources().getDrawable(R.mipmap.ic_1_selected);
    Drawable icon2Hilighted = context.getResources().getDrawable(R.mipmap.ic_2_selected);
    Drawable icon3Hilighted = context.getResources().getDrawable(R.mipmap.ic_3_selected);

    icons.add(icon1);
    icons.add(icon2);
    icons.add(icon3);
    iconsHilighted.add(icon1Hilighted);
    iconsHilighted.add(icon2Hilighted);
    iconsHilighted.add(icon3Hilighted);

    for(int i = 0; i < icons.size(); i++) {
        if(i == 0) {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(iconsSelected.get(i));
        }
        else {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(icons.get(i));
        }
    }
}

Asegúrese de almacenar una referencia a las dos listas ''iconos'' e ''iconos resaltados''. Los necesitarás más tarde. También almacene una referencia a TabLayout y ViewPager que pasó de la actividad.

Paso 3. Asegúrese de que AdapterTabs.getPageTitle () devuelva nulo. En este punto, si lo ejecuta, debería ver que el primer icono está resaltado.

Paso 4. Implemente ViewPager.OnPageChangeListener en AdapterTabs y agregue ese oyente a su viewPager

    public AdapterTabs(Context context, FragmentManager fragmentManager, List<Fragment> fragments, TabLayout tabLayout, ViewPager viewPager) {
    super(fragmentManager);
    this.context = context;
    this.tabLayout = tabLayout;
    this.viewPager = viewPager;
    this.viewPager.addOnPageChangeListener(this);

    tabs.add(fragments.get(0));
    tabs.add(fragments.get(1));
    tabs.add(fragments.get(2));
}

Paso 5. Actualice los íconos en las pestañas en la devolución de llamada onPageSelected en sus AdapterTabs.

    @Override
public void onPageSelected(int position) {
    for (int i = 0; i < tabs.size(); i++) {
        if(i == position) {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(iconsSelected.get(i));
        }
        else {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(icons.get(i));
        }
    }
}

Ahora debería ver que el icono resaltado se actualiza cuando cambia las pestañas.

Answer 7

Ninguno de estos métodos es elegante cuando se usa TabLayout como escenario de "decoración" de ViewPager. here Aquí hay una extensión simple de TabLayout y PagerAdapter que proporciona una caída simple en reemplazo de TabLayout que debería poder usarse en cualquier escenario sin agregar iconos manualmente fuera de la clase TabLayout y siguiendo el uso de PagerAdapter para obtener la información de la pestaña .

/**
 * Created by JDL on 1/18/2017.
 */
public class TabLayoutExt extends TabLayout {

    protected ViewPager mViewPager;

    public abstract static class TabLayoutViewPagerAdapter extends PagerAdapter {
        public TabLayoutViewPagerAdapter() {
        }

        /**
         * This method may be called by the TabLayout to obtain an icon drawable
         * to for the specified tab. This method may return null
         * indicating no tab icon for this page. The default implementation returns
         * null.
         *
         * @param position The position of the title requested
         * @return A drawable icon for the requested page
         */
        public Drawable getPageIcon(Context context, int position) {
            return null;
        }
    }

    public TabLayoutExt(Context context) {
        super(context);
    }

    public TabLayoutExt(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TabLayoutExt(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onAttachedToWindow() {
        //Cover the implicit setup in TabLayout
        if (mViewPager == null) {
            final ViewParent vp = getParent();
            if (vp instanceof ViewPager) {
                mViewPager = (ViewPager)vp;
            }

        }
        super.onAttachedToWindow();
    }

    public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
        if (mViewPager != null && mViewPager.getAdapter() instanceof TabLayoutViewPagerAdapter) {
            Drawable icon = ((TabLayoutViewPagerAdapter) mViewPager.getAdapter()).getPageIcon(getContext(),position);
            tab.setIcon(icon);
        }
        super.addTab(tab,position,setSelected);

    }

    @Override
    public void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh) {
        mViewPager = viewPager;
        super.setupWithViewPager(viewPager, autoRefresh);
    }
}

Entonces, todo lo que se necesita hacer es extender TabLayoutViewPagerAdapter lugar de PageAdapter e implementar getPageIcon(Context,int) lugar de o además del título. La caída en TabLayoutExt en su archivo XML, en lugar del TabLayout normal. Esto podría extenderse para modificar aún más la pestaña, ya sea con una vista personalizada o algo más.

Answer 8

Prueba esto, esto definitivamente funcionará.

private TabLayout tabLayout;
private ViewPager viewPager;
private int[] tabIcons = {
        R.drawable.single,
        R.drawable.multiple};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_contact_picker);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitle("Choose contact");
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    tab();
}


public void tab(){
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);
    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    setupTabIcons();
}

private void setupTabIcons() {
    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);

}

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new Login());
    adapter.addFragment(new Register());
    viewPager.setAdapter(adapter);
}

class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment) {
        mFragmentList.add(fragment);

    }


}

Answer 9

Puede que esta no sea la mejor respuesta para todos los casos, pero lo que encontré aún no resolvió mi problema.

Después de echar un vistazo a la implementación de androides de tabLayout.setupWithViewPager(ViewPager pager) me ocurrió una solución utilizando solo oyentes.

La estructura del diseño:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        pager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        tabLayout.setScrollPosition(position, positionOffset, false);
    }

    @Override
    public void onPageSelected(int position) {
        TabLayout.Tab tab = tabLayout.getTabAt(position);
        if (tab != null) {
            tab.select();
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }
});

Código para los dos oyentes:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { pager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { tabLayout.setScrollPosition(position, positionOffset, false); } @Override public void onPageSelected(int position) { TabLayout.Tab tab = tabLayout.getTabAt(position); if (tab != null) { tab.select(); } } @Override public void onPageScrollStateChanged(int state) { } });

Eche un vistazo a la llamada tabLayout.setScrollPosition dentro de OnPageChangeListener.onPageScrolled para el movimiento más o menos bueno del indicador mientras se desplaza.

Esto puede no funcionar si el ancho de TabLayout no está establecido en match_parent (o debe ser desplazable)

Saludos

Answer 10

Un enfoque es configurar los iconos después del método TabLayout.setupWithViewPager() .

mTabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
  mTabLayout.getTabAt(i).setIcon(R.drawable.your_icon);
}

Answer 11

la forma más sencilla es crear una nueva tabla configurando el icono en tablayout. El siguiente código creará dos pestañas con el ícono solamente. use este código en el método onCreate ()

 tablayout = (TabLayout) findViewById(R.id.order_tablayout);
 tablayout.addTab( tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_shopping_cart_white_24dp)) );
 tablayout.addTab( tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_like2_fille_white_24dp)) );

Answer 12

prueba esto

    public class GlobalActivity extends AppCompatActivity {
    Toolbar toolbar;
    ViewPager viewPager;
    TabLayout tabLayout;
    ViewPagerAdapter adapter;
    private int[] tabIcons = {
            R.drawable.home_ic,
            R.drawable.biz_ic,
            R.drawable.network_ic,
            R.drawable.offers_ic,
            R.drawable.message_ic_b
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_global_hub);
        tab();
    }
    public void tab(){
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();

    }
    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
        tabLayout.getTabAt(3).setIcon(tabIcons[3]);
        tabLayout.getTabAt(4).setIcon(tabIcons[4]);

    }
    public void setupViewPager(ViewPager viewPager){
        adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new GlHubFragment(),"HOME");
        adapter.addFrag(new BizForumFragment(), "BIZ FORUM");
        adapter.addFrag(new NetworkFragment(), "NETWORK");
        adapter.addFrag(new MessagesFragment(), "MESSAGEs");
        adapter.addFrag(new OfferFragmentActivity(), "OFFER");
        viewPager.setAdapter(adapter);
    }

    public class ViewPagerAdapter extends FragmentPagerAdapter{
        private final List<Fragment> mfragmentlist =new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();
        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mfragmentlist.get(position);
        }

        @Override
        public int getCount() {
            return mfragmentlist.size();
        }
        public void addFrag(Fragment fragment,String title){
            mfragmentlist.add(fragment);
            mFragmentTitleList.add(title);
        }
        @Override
        public CharSequence getPageTitle(int position){
            return mFragmentTitleList.get(position);
        }
    }
}