Material Design elevation issue when add a fragment with TabLayout

Question

I'm currently working on an application for v22 and use the following libraries:

compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.android.support:support-v4:22.2.1'
compile 'com.android.support:design:22.2.1'

I have only one Activity called HomeActivity that has a Navigation Drawer Inside. This is the activity_home.xml layout:

<android.support.v4.widget.DrawerLayout
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:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<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:fitsSystemWindows="false">

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

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

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

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

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    app:menu="@menu/menu_navigation"/>

So, every time I choose an item from navigation Drawer I replace the FrameView @+id/content_frame with a new Fragment like this:

int id = menuItem.getItemId();
            switch (id)
            {
                case R.id.gazzette:
                    fragmentManager.beginTransaction()
                            .replace(R.id.content_frame, new ListViewFragment())
                            .commit();
                    drawerLayout.closeDrawers();
                    break;
                case R.id.concorsi:
                    // Insert the fragment by replacing any existing fragment
                    fragmentManager.beginTransaction()
                            .replace(R.id.content_frame, new ConcorsiFragment())
                            .commit();
                    drawerLayout.closeDrawers();
                    break;

Everything works fine and I have a toolbar with the right elevation.

But when I try to replace the @+id/content_frame Fragment with a new Fragment with a TabLayout and View Pager I see the elevation of the toolbar of the Home Activity.

The layout of this inner Fragment is:

<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:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <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:elevation="6dp"
        android:background="@color/colorPrimary"/>

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

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

Naturally, if I start a new Activity (without Fragment) with a TableLayout everything goes ok but I don't want create a new Activity and launch it with a selection of Navigation Drawer but I want use only Fragment items.

If a set app:elevation="0dp" from HomeActivity I have no shadow in all Application Fragment.

Is this the proper way to add a Fragment with TabLayout inside? Is there a way to remove the shadow of toolbar only in this case?

score 0 · Answer 1 · answered Jun 28 '17 at 13:15

I have solution, but not elegant. Simply remove elevation from toolbar in onViewCreated() and set it back in onDestroyView().

private Toolbar toolbar;
private float toolbarElevation;

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        toolbar = getActivity().findViewById(R.id.toolbar);
        toolbarElevation = toolbar.getElevation();
        toolbar.setElevation(0);
    }
}

@Override
public void onDestroyView() {
    super.onDestroyView();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        toolbar.setElevation(toolbarElevation);
    }
}

Material Design elevation issue when add a fragment with TabLayout

1 Answers1