InstagramのようなAndroidでカスタムタブを実装する方法

Question

InstagramのようなカスタムタブUIを実装しようとしています（スクリーンショットが添付されています）。私は、同じビューの中でフラグメントを開くのではなく、中間のタブに別のアクティビティを開くようにします。

これは、タブホストでイメージボタンオーバーレイを使用して実装されていると思います。しかし、私はまだUIを適切に見えるようにそのイメージボタンを適切に置くことができません。以下は、下のタブのコードです。

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

親切に助けてください。そうする

おかげで、

Answer 1

使用TabLayout。

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

コード：

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：

3番目のタブには、カスタムレイアウトを使用しています。