personalizar - tabs android studio example

¿Cómo configurar Android TabLayout en la parte inferior de la pantalla?

Question

Mi pregunta es cómo puedo configurar el nuevo diseño de material de Android TabLayout para que esté en la parte inferior de la pantalla, como la barra de herramientas inferior de Instagram.

Si nunca has visto la interfaz de usuario de Instagram, aquí tienes una captura de pantalla:

. Si hay una mejor manera de abordar esto, por favor siéntase libre de publicarlo aquí (con un ejemplo de código si es posible), se lo agradeceré enormemente.

Aquí está mi código: 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"  />

He intentado muchos métodos y soluciones sugeridas por la comunidad de Stack Overflow, pero ninguno parece funcionar con esta nueva implementación de pestañas en Android. Sé que este diseño de interfaz de usuario no sigue las pautas de diseño de Android, así que no lo comentes. Este diseño de interfaz de usuario es vital para el UX de mi aplicación y agradecería recibir una respuesta. ¡Gracias!

Answer 1

Creo que tengo la mejor solución simple. Use un LinearLayout y establezca la altura del viewpager en 0dp con un layout_weight = "1". Asegúrese de que el LinearLayout tenga una orientación vertical y que el viewpager aparezca antes del TabLayout. Aquí es cómo se ve las minas:

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

Y como beneficio adicional, debe crear su barra de herramientas solo una vez como toolbar.xml. Así que de esa manera todo lo que tienes que hacer es usar la etiqueta de inclusión. Hace que su diseño sea más limpio. ¡Disfrutar!

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

Actualización 11.2.2016: para aquellos de ustedes que no saben cómo inflar la barra de herramientas, aquí está cómo. Asegúrese de que su Actividad amplíe AppCompatActivity para que pueda llamar a setSupportActionBar () y getSupportActionBar ().

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

Answer 2

La parte superior de la página LinearLayout configura y establece android:gravity="bottom" . Eso es. Aquí está el código:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px"
    android:gravity="bottom"> //Thats it.
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:id="@+id/tabLayout1">
        <android.support.design.widget.TabItem
        android:icon="@drawable/home"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabItem1" />
        <android.support.design.widget.TabItem
        android:icon="@drawable/mypage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabItem2" />
        <android.support.design.widget.TabItem
        android:icon="@drawable/friends"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabItem3" />
        <android.support.design.widget.TabItem
        android:icon="@drawable/messages"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabItem4" />
        <android.support.design.widget.TabItem
        android:icon="@drawable/settings"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabItem5" />
    </android.support.design.widget.TabLayout>
</LinearLayout>

Answer 3

Mejor segregar tanto AppBarLayout como tabLayout como mi código a continuación. De esta manera puede modificar la barra de pestañas y ver las propiedades del buscapersonas de forma independiente.

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

Answer 4

Reemplace su código TabLayout con este

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

Tuve un mismo problema en Android Studio 2.2. Esto es lo que hice,

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

android:layout_alignParentBottom="true"

Añadir esta configuración en

android.support.design.widget.TabLayout