Come impostare TabLayout di Android nella parte inferiore dello schermo?

Question

questa è la mia prima volta su Stack Over quindi per favore nuda con me. La mia domanda è come posso impostare TabLayout, il nuovo design di materiale Android, nella parte inferiore dello schermo, un po 'come la barra degli strumenti in basso di Instagram.

Se non avete mai visto interfaccia utente Instagram Ecco uno screenshot di esso:

. Se c'è un modo migliore per avvicinarsi a questo, per favore sentitevi liberi di postarlo qui (con un esempio di codice se possibile), lo apprezzerò molto.

Ecco il mio codice: activity_main.xml

<android.support.design.widget.AppBarLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    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.Light" /> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabs" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:tabMode="fixed" 
     app:tabGravity="fill"/> 
</android.support.design.widget.AppBarLayout> 

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

Ho provato molti metodi e le soluzioni suggerite dalla comunità Stack Overflow, ma nessuno sembra funzionare con questa nuova implementazione di schede in Android. So che questo design dell'interfaccia utente non segue le linee guida di progettazione Android, quindi per favore non commentarlo. Questo design dell'interfaccia utente è vitale per l'UX della mia applicazione e gradirei ricevere una risposta. Grazie!

Answer 1

Credo di avere la migliore soluzione semplice. Usa un LinearLayout e imposta l'altezza del viewpager in 0dp con layout_weight = "1". Assicurati che LinearLayout abbia un orientamento verticale e che il viewpager venga prima del TabLayout. Ecco quali miniere assomiglia a:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity" 
    android:orientation="vertical"> 

    <include layout="@layout/toolbar" android:id="@+id/main_toolbar"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:background="@color/white"/> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/sliding_tabs" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/blue" 
     /> 

</LinearLayout> 

E come bonus, è necessario creare la barra degli strumenti solo una volta come toolbar.xml. In questo modo tutto ciò che devi fare è usare il tag include. Rende il tuo layout più pulito. Godere!

toolbar.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.Toolbar 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="wrap_content" 
    android:background="?attr/colorPrimary" 
    android:minHeight="?attr/actionBarSize" 
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 

Aggiornamento 2016/11/02: Per quelli di voi che non sanno come gonfiare la barra degli strumenti, ecco come. Assicurati che l'attività estenda AppCompatActivity in modo da poter chiamare setSupportActionBar() e getSupportActionBar().

Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar); 
setSupportActionBar(mToolbar); 
getSupportActionBar().setDisplayHomeAsUpEnabled(true); 

Answer 2

Sostituire Il codice TabLayout con questo

<android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:elevation="2dp" /> 

Answer 3

Ho avuto un stesso problema su Android Studio 2.2. Questo è quello che ho fatto,

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:orientation="vertical" 
    android:layout_height="match_parent"> 


    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="?attr/colorPrimary" 
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
     app:subtitleTextColor="@color/color_white" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     app:title="@string/call_log" 
     app:titleTextColor="@color/color_white" 
     /> 

    <RelativeLayout 
     android:id="@+id/content_frame" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" > 

     <android.support.v4.view.ViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_above="@+id/tabLayout" /> 

     <android.support.design.widget.TabLayout 
      android:layout_alignParentBottom="true" 
      android:id="@+id/tabLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:minHeight="?attr/actionBarSize"/> 
    </RelativeLayout> 

</LinearLayout> 

Answer 4

Meglio segregare sia AppBarLayout che tabLayout come il mio codice di seguito. In questo modo è possibile modificare la barra delle schede e visualizzare le proprietà del cercapersone in modo indipendente.

<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      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.Light" /> 
     </android.support.design.widget.AppBarLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

      <android.support.v4.view.ViewPager 
       android:id="@+id/viewpager" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       app:layout_behavior="@string/appbar_scrolling_view_behavior" 
       android:layout_above="@+id/tabs"/> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:tabMode="fixed" 
       app:tabGravity="fill" 
       android:layout_alignParentBottom="true"/> 
     </RelativeLayout> 
    </android.support.design.widget.CoordinatorLayout>