Cách triển khai các tab tùy chỉnh trong Android như Instagram

Question

Tôi đang cố gắng triển khai giao diện người dùng tab tùy chỉnh ở dưới cùng giống như của Instagram (ảnh chụp màn hình được đính kèm). Tôi muốn tab ở giữa mở một hoạt động khác thay vì mở một đoạn trong cùng một khung nhìn.

Tôi cảm thấy điều này được triển khai bằng cách sử dụng lớp phủ hình ảnh trên máy chủ tab. Nhưng, tôi vẫn không thể đặt hình ảnh đó đúng cách để giao diện người dùng phù hợp. Dưới đây là mã của tôi cho các tab ở dưới cùng

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

Vui lòng trợ giúp.

Xin cảm ơn,

Answer 1

Sử dụng TabLayout để làm điều đó.

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

mã:

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:

Thứ ba tab đang sử dụng bố trí tùy chỉnh.