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!

Answer 2

Stumbled across the same question. In my Activity, I use AppBarLayout with a Toolbar and in one of my Fragments, I also use an AppBarLayout with a TabLayout. However, on all other Fragments I display on this Activity, I don't. Therefore, I only want the elevation to be 0 on the Fragment with the TabLayout.

I endet up setting the elevation manually every time I switch fragments:

private void showAccount(){
    AccountFragment accountFragment = AccountFragment.newInstance(mUser);
    FragmentManager fragmentManager = getSupportFragmentManager();
    fragmentManager.beginTransaction()
            .replace(R.id.content_main, accountFragment)
            .commit();
    elevateActionBar(false);
}

private void showSettings(){
    SettingsFragment settingsFragment = new SettingsFragment();
    FragmentManager fragmentManager = getSupportFragmentManager();
    fragmentManager.beginTransaction()
            .replace(R.id.content_main, settingsFragment)
            .commit();
    elevateActionBar(true);
}

private void elevateActionBar(boolean elevate){
    //Elevate ActionBar (make ActionBar have a shadow)
    AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout_main);
    if(elevate) {
        appBarLayout.setElevation(4);
    }else{
        appBarLayout.setElevation(0);
    }
}