Comment combiner la barre d'outils et un TabLayout en orientation paysage?

Question

Comment combiner la barre d'outils et le tablayout en mode paysage comme indiqué dans l'application youtube? Je n'arrive pas à trouver une réponse définitive à cette question.

Ma configuration actuelle:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="?attr/colorPrimary" 
     app:layout_scrollFlags="scroll|enterAlways" 
     app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 
     app:tabMode="fixed" 
     app:tabGravity="fill"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     android:background="@color/transparent"/> 

    </LinearLayout> 

Answer 1

Comme mentionné ci-dessus, la barre d'outils est un ViewGroup donc un TabLayout peut être un enfant de cela.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="?attr/colorPrimary" 
     app:layout_scrollFlags="scroll|enterAlways" 
     app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" 
     android:title="Viewer"> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabLayout" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 
     android:layout_gravity="center_horizontal" 
     app:tabMode="fixed" 
     app:tabGravity="center"/> 
    </android.support.v7.widget.Toolbar> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     android:background="@color/transparent"/> 

</LinearLayout> 

Answer 2

Vous pouvez ajouter une mise en page avec des composants à votre ActionBar (celui classique, pas le android.support.v7.widget.Toolbar)

d'abord créer un menu de ressources de menu \ top_menu.xml à être votre menu actionbar:

<?xml version="1.0" encoding="utf-8"?> 
<menu xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto"> 
<item 
android:id="@+id/topBarTabLayout" 
android:title="" 
app:actionLayout="@layout/top_bar_tab_layout" 
app:showAsAction="always" /> 

      <!-- Other menu items here --> 

</menu> 

Ensuite, créez une mise en page appelée mise en page/top_bar_tab_layout.xml contenant un seul composant TabLayout (vous pouvez ajouter d'autres composants aussi!):

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.TabLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/tab_layout_menu" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:paddingBottom="0dp" 
    android:paddingTop="0dp" /> 

Pour accéder à ce composant TabLayout, créez une référence dans votre activité onCreateOptionsMenu:

@Override 
public boolean onCreateOptionsMenu(Menu menu) { 
// Inflate the menu; this adds items to the action bar if it is present. 
getMenuInflater().inflate(R.menu.top_menu, menu); 

topBarTabLayoutMenuItem = menu.findItem(R.id.topBarTabLayout); 
topBarTabLayout = (TabLayout) topBarTabLayoutMenuItem.getActionView(); 

//ADD #1 TAB WITH A ICON RESOURCE 
topBarTabLayout.addTab(topBarTabLayout.newTab().setIcon(R.drawable.file)); 

//ADD #2 TAB WITH A ICON RESOURCE 
topBarTabLayout.addTab(topBarTabLayout.newTab().setIcon(R.drawable.folder)); 

//This may be necessary to force tablayout to fill all space. 
topBarTabLayout.setTabGravity(topBarTabLayout.GRAVITY_FILL); 


//Add listener to do stuff! 
topBarTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       //do whatever you want here, like selecting a viewpager item or open an intent 
      } 

      @Override 
      public void onTabUnselected(TabLayout.Tab tab) { 
     //do whatever you want here 
      } 

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 
     //do whatever you want here 
      } 
     }); 

     return true; 
    } 
} 

Cela devrait être suffisant pour ajouter un tabLayout à votre actionbar. Cela fonctionnera avec d'autres composants comme spinner ou textViews. Aussi

, si vous prévoyez de mettre cette tablayout visible que lorsque l'orientation est paysage, vous devez faire quelque chose comme ça:

@Override 
public void onConfigurationChanged(Configuration newConfig) { 
    super.onConfigurationChanged(newConfig); 

    if (newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE) { 
       topBarTabLayoutMenuItem.setVisible(true); 
     } else { 
     topBarTabLayoutMenuItem.setVisible(false); 
    } 
}