CODEWITHSUNDEEP
androidmaterial-designandroid-tablayoutandroid-appbarlayout
AdamWardVGP
AdamWardVGP

Reputation: 809

How to add a TabView beneath AppBar without shadow

In my application I have an issue where I want to have high level navigational control from a navigation drawer, and page level control within a TabLayout within a fragment. This however causes issues with the shadow rendering from the AppBar onto the fragment.

This is the look I want

This is the look I have

Here's the basics of what my layouts and code does. At the root I have this simple layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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"
    tools:context=".MainAppActivity">

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

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

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

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

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

When my navigation drawer is selected I inflate the fragment into "content_main"

    this.getSupportFragmentManager()
            .beginTransaction()
            .addToBackStack(tag)
            .replace(R.id.content_main_layout, fragment, tag)
            .commit();

The fragment being put into content_main contains a layout with my TabView and a view pager:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_github_issues"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/github_issues_tab_layout"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_gravity="top"
        android:background="?attr/colorPrimary"
        android:theme="@style/AppTheme.AppBarOverlay"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/github_issues_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
</LinearLayout>

What's the a good best practice to fix the issue? Is including TabLayout to live within the top level AppBar and just disabling the view based on the page an acceptable implementation?

Upvotes: 1

Views: 517

Answers (1)

Nikola Despotoski
Nikola Despotoski

Reputation: 50578

First you need to change the view hierarchy to something like this:

FrameLayout
  -CoordinatorLayout -> content
  -Toolbar

Fix Toolbar elevation to be exact with the AppBarLayout, too get rid of the shadow but keep the z-order of the Toolbar:

int appBarLayoutElevation = ViewCompat.getElevation(mAppBarLayout);
getActivity().getSupportActionBar().setElevation(appBarLayout);

Similar example I have worked in my blog post.

Upvotes: 1

Related Questions