Come implementare le schede personalizzate in Android come Instagram

Question

Sto cercando di implementare le schede personalizzate dell'interfaccia utente in basso come quella di Instagram (è allegata la schermata). Voglio la scheda centrale per aprire un'altra attività invece di aprire un frammento all'interno della stessa vista.

Ritengo che questo sia implementato utilizzando l'overlay del pulsante image sull'host di schede. Tuttavia, non riesco ancora a posizionare correttamente quel pulsante immagine in modo che l'interfaccia utente appaia corretta. Di seguito è riportato il mio codice per le schede in fondo

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

Gentile aiuto.

Grazie,

Answer 1

Usa TabLayout di farlo.

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

codice:

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:

terza scheda utilizza layout personalizzato.