Как установить Android TabLayout в нижней части экрана?

Question

Это мой первый раз на Stack Over, так что, пожалуйста, со мной. Мой вопрос заключается в том, как я могу настроить новый вкладка TabLayout для дизайна Android в нижней части экрана, наподобие нижней панели инструментов Instagram.

Если вы никогда не видели UI Instagram здесь скриншот этого:

. Если есть лучший способ приблизиться к этому, пожалуйста, не стесняйтесь публиковать его здесь (с возможным примером кода), я буду очень благодарен.

Вот мой код: 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" /> 

Я перепробовал много методов и обходных путей, предложенных сообщество переполнения стека, но никто не похож на работу с этой новой реализацией вкладок андроид. Я знаю, что этот дизайн пользовательского интерфейса не соответствует правилам проектирования Android, поэтому, пожалуйста, не комментируйте его. Этот дизайн пользовательского интерфейса имеет жизненно важное значение для UX моего приложения, и я был бы признателен за получение ответа на него. Спасибо!

Answer 1

Я считаю, что у меня есть самое простое исправление. Используйте LinearLayout и установите высоту для viewpager равным 0dp с layout_weight = "1". Убедитесь, что LinearLayout имеет ориентацию по вертикали и что просмотрщик приходит перед TabLayout. Вот что мины выглядит следующим образом:

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

И в качестве бонуса, вы должны создать панель инструментов только один раз, как toolbar.xml. Таким образом, все, что вам нужно сделать, это использовать тег include. Делает ваш макет более чистым. Наслаждайтесь!

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

Update 11.2.2016: Для тех из вас, кто не знает, как надуть панель инструментов, вот как. Убедитесь, что ваша активность расширяет AppCompatActivity, поэтому вы можете вызвать setSupportActionBar() и getSupportActionBar().

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

Answer 2

Заменить Ваш код TabLayout с этим

<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

У меня была такая же проблема на Android Studio 2.2. Это то, что я сделал,

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

Лучше разделять как AppBarLayout и tabLayout как мой код ниже. Таким образом вы можете изменять панель вкладок и просматривать свойства пейджера независимо.

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