Cómo implementar pestañas personalizadas en Android como Instagram
Estoy tratando de implementar las pestañas personalizadas UI en la parte inferior como el de Instagram (captura de pantalla se adjunta). Quiero que la pestaña central abra otra actividad en lugar de abrir un fragmento dentro de la misma vista.
Creo que esto se implementa usando overlay de imagebutton en el host de tabulación. Pero, todavía no soy capaz de colocar ese imagebutton correctamente para que la interfaz de usuario se vea bien. A continuación se muestra mi código para las pestañas en la parte inferior
- ¿Son la etiqueta y el icono mutuamente excluyentes en un tabHost TabSpec setIndicator?
- Fragmento superpuesto
- ¿Es posible llamar manualmente onCreateView en un fragmento?
- El contenido de Tabhost no se muestra cuando actualizo android.support.v4
- Reemplazar un fragmento a otro fragmento en el TabHost
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <FrameLayout android:id="@+id/realtabcontent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <android.support.v4.app.FragmentTabHost android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="wrap_content" > <FrameLayout android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0" /> </android.support.v4.app.FragmentTabHost> </LinearLayout>
Por favor ayuda.
Gracias,
- Cómo crear un cuadro de diálogo con pestañas con Android que contiene fragmentos?
- Interfaz de Android
- FindFragmentByTag - buscando fragmento en FragmentTabHost - always null
- Cambiando dinámicamente los fragmentos dentro de un host de fichas de fragmentos?
- FragmentTabHost no crea vista dentro de Fragmento en android
- IllegalStateException en FragmentManager
Utilice TabLayout
para hacer eso.
Xml:
<android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:minHeight="100dp" app:tabGravity="fill" app:tabMode="fixed" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
código:
tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab()); View custom = LayoutInflater.from(this).inflate(R.layout.custom_tab, null); ((TextView) custom.findViewById(R.id.tabTitle)).setText("Tab 3"); (custom.findViewById(R.id.tabIcon)).setBackgroundResource(R.drawable.ic_place_white_18dp); TabLayout.Tab customTab = tabLayout.getTabAt(2); customTab.setCustomView(custom); tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { switch (tabLayout.getSelectedTabPosition()) { case 0: //do what you want when tab 0 is selected break; case 1: //do what you want when tab 1 is selected break; case 2: //do what you want when tab 2 is selected break; default: break; } } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } });
EDITAR:
La tercera pestaña utiliza el diseño personalizado.