How to use Android AppBarLayout, Toolbar and TabLayout with fragments

Question

I have activity with NavigationDrawer and AppBarLayout with Toolbar. Unfortunately when I am using TabLayout in child fragment I see shadow between toolbar and TabLayout. Is it possible display shadow below TabLayout only? I do not want to move TabLayout to my activity because I'm using it only in one fragment.

I can see few solutions for this problem:

• disable elevation on Toolbar & TabLaout ( don't like it)
• remove toolbar from activity and move it into fragment

Do you have any ideas how to use it properly in my scenario?

Answer 1

I had the same issue and it is easy to fix. Just remove the AppBarLayout from the activity and put it in the fragment. By doing that you keep the Toolbar in the activity and the TabLayout with the shadow in the fragment.

Activity:

<?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:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <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/AppTheme.PopupOverlay" />


    <FrameLayout
        android:id="@+id/main_activity_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>


</LinearLayout>

Fragment:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">


    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>


</LinearLayout>

Hope that helps!