Material TabLayout elevación no funciona


Por alguna razón el atributo elevation no parece estar funcionando en la nueva TabLayout en la biblioteca de soporte de material design. Alguna idea? XML:

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

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="6dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />
</LinearLayout>

Conectado así en un fragmento padre:

ViewPager viewPager = (ViewPager) view.findViewById(R.id.view_pager);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
AppPagerAdapter appPagerAdapter = new AppPagerAdapter(getChildFragmentManager());
viewPager.setAdapter(appPagerAdapter);
tabLayout.setupWithViewPager(viewPager);

Imagen: imagen relevante

La actividad tiene una barra de herramientas, pero esto está fuera del fragmento y no debería afectar la capacidad de la tablayout para tener una sombra:

Xml de actividad relevante:

<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"
android:orientation="vertical"
tools:context="com.bluckapps.appinfomanager.ui.MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    tools:ignore="UnusedAttribute" />

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

</LinearLayout>
Author: Emanuel Ve, 2015-07-01

6 answers

Para hacer que la sombra se muestre, debe establecer un fondo en su TabLayout. Puede ser del mismo color que el fondo de la ventana (siempre y cuando sea un color sólido sin alfa).

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="6dp"
    android:background="@color/white" />
 49
Author: sorianiv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-02 22:01:05

Se supone que debes usar ToolBar con TabLayout. A continuación, puede poner ambos dentro de un AppBarLayout y obtener una sombra. Esto solo funciona en Lollipop+.

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            style="@style/ToolBarStyle"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="@dimen/abc_action_bar_default_height_material"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

Véase http://inthecheesefactory.com/blog/android-design-support-library-codelab/en

 3
Author: Binoy Babu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-06 15:57:46

Necesitarás usar CoordinatorLayout como un diseño de contenedor para tu actividad y luego colocar tu TabLayout justo debajo de AppBarLayout. De acuerdo con las especificaciones de diseño de materiales, debe usar

android:elevation="4dp"

Elevación y hacer que su TabLayout sea parte de AppBarLayout. También tenga en cuenta que la elevación solo será visible en v21 (5.0) o superior.

 1
Author: Ivan V,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-12 19:06:18

No es necesario utilizar un Fragment. Un diseño de actividad es suficiente. Como:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/home_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/home_appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:elevation="2dp"
        app:paddingEnd="0dp"
        app:paddingStart="0dp">

        <include layout="@layout/toolbar_appcompat"></include>

        <android.support.design.widget.TabLayout
            android:id="@+id/home_tab_layout"
            style="@style/TabLayoutStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabContentStart="2dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="2dp"
            app:tabMinWidth="24dp"
            app:tabMode="fixed"
            app:tabPadding="1dp"
            app:tabSelectedTextColor="@android:color/tab_indicator_text"
            app:tabTextColor="@android:color/darker_gray" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/home_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:paddingEnd="0dp"
        app:paddingStart="0dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@drawable/arrow_toggle"
        app:borderWidth="1dp"
        app:elevation="3dp"
        app:fabSize="normal"
        app:layout_anchor="@+id/home_coordinator_layout"
        app:layout_anchorGravity="bottom|right|end"
        app:pressedTranslationZ="2dp"
        app:rippleColor="@color/swipe_refresh_color_scheme_green" />

</android.support.design.widget.CoordinatorLayout>

Mientras tanto, elevation es útil en Lollipop. Si quieres ser compatible hacia atrás, es mejor que uses app:elevation. Si app:elevation no funciona, es mejor agregar una sombra debajo de TabLayout manualmente, al igual que android:background="@drawable/myrect":

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>
 0
Author: SilentKnight,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-13 09:15:58

Mantenga la tablayout dentro de AppBarLayout. Funcionará.

 -2
Author: Abhilash Das,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-10 15:59:18

Todas las respuestas anteriores no funcionaron para mí, así que descubrí esto:

app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="@color/colorAccent"

Entonces bien!

 -3
Author: bibisi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-19 08:14:27