How to implement custom tabs in Android like Instagram

Question

I'm trying to implement custom UI tabs at the bottom, like Instagram (screenshot attached). I want the middle tab to open another action instead of opening a fragment inside the same view.

I feel this is implemented using the imagebutton cover on the tab node. But I still can’t place this image correctly so that the user interface looks right. Below is my tab code below

<?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> 

Please help.

Thanks,

Answer 1

Use TabLayout for this.

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" /> 

code:

 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) { } }); 

EDIT:

The third tab uses a custom layout.