Android Toolbar and Tab color separation

Question

I have defined the tabs in side one of the AppCompatActivity.

<?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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.TestActivity">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:tabIndicatorColor="@android:color/white"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>


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

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

The tool bar I set it inside activity like below

        getSupportActionBar().setTitle("Test");
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

After tab attached, I see the color separation between toolbar and tab.

How can I avoid this ?

Ben P. · Accepted Answer · 2017-08-11T16:00:48.297

2

Wherever you are setting up your action bar, add this line:

getSupportActionBar().setElevation(0);

The "color separation" you're seeing is the shadow cast by the action bar on your activity's contents. The TabLayout is part of that contents, so if you don't want a shadow you should remove the action bar's elevation.

Update

If you need to support older API versions, you will probably want to create your own Toolbar in xml and then call setSupportActionBar(toolbar) so that you can modify its appearance however you'd like. This xml should work for you:

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

And then call this before you start calling getSupportActionBar()

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

edited Aug 11 '17 at 16:00

answered Aug 11 '17 at 15:48

Ben P.

52,661
6
95
123

yes setElevation is removing, it wont affect the versions below 21 ? – Karesh A Aug 11 '17 at 15:51
@RoshanA I updated my answer to include a strategy for solving the problem on older api versions – Ben P. Aug 11 '17 at 16:01
Then I need to create the toolbar in every activity that needs tabs ? – Karesh A Aug 11 '17 at 16:04
Yep. You could just `` it or use a `` if you wanted to improve re-usability, though. – Ben P. Aug 11 '17 at 17:01

Vladimir Salguero · Answer 2 · 2017-08-11T16:16:50.543

Try adding your TabLayout inside an AppBarLayout, I leave the following code that you can adapt to your design

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main.coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="RtlHardcoded"
/>

<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>

    <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/example.collapsing"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="@string/flexible_title"
            app:expandedTitleMarginBottom="12dp"
            app:layout_scrollFlags="scroll"
            app:expandedTitleTextAppearance="@style/CollapsingTextAppearance.Inverse"
            app:contentScrim="?colorPrimary"
    />


        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@null"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="enterAlways"
                style="@style/ToolBarWithNavigationBack"
        />
            <TextView
                    android:id="@+id/toolbar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="Toolbar Title"
                    android:textColor="@android:color/white"
                    android:textSize="18sp"
                    android:textStyle="bold"/>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
    
    <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
            app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
            app:tabIndicatorHeight="4dp"
    />
</android.support.design.widget.AppBarLayout>

<!-- The top margin value equals half height of the blue box -->
<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>

This activity is not my main activity. I wont create the tool bar again. — Karesh A, Aug 11 '17 at 15:56
Ok but I see you have a CoordinateLayout and you can add a new Toolbar to add the effect of collapsing it when the user goes down and up in the content, it's a good effect — Vladimir Salguero, Aug 11 '17 at 16:18

John P · Answer 3 · 2017-08-11T15:25:06.510

0

Try to use the theme Theme.AppCompat . As I know this does not have delimiter between actionbar and tabs.

Or try inserting the attribute windowContentOverlay to your theme:

<style name="AppTheme" parent="android:Theme.AppCompat">
    <item name="android:windowContentOverlay">@null</item>
</style>

edited Aug 11 '17 at 15:25

answered Aug 11 '17 at 15:13

John P

1,159
2
18
44

android:theme="@style/Theme.AppCompat" I added like this. still I see the separation. – Karesh A Aug 11 '17 at 15:14
my app theme like this, – Karesh A Aug 11 '17 at 15:17
parent="Theme.AppCompat.Light.DarkActionBar" Try without light. As I know the Light theme gives the devider – John P Aug 11 '17 at 15:17
no still I am getting separation. what theme you are saying ? – Karesh A Aug 11 '17 at 15:23
have you tried the code from the answer? Try it and say what error you get if you get one – John P Aug 11 '17 at 15:25
still I get the separation. – Karesh A Aug 11 '17 at 15:29
tabs should be inside toolbar ? – Karesh A Aug 11 '17 at 15:33
it's about importing the v7, check this one https://stackoverflow.com/questions/17870881/cant-find-theme-appcompat-light-for-new-android-actionbar-support – John P Aug 11 '17 at 15:35

Android Toolbar and Tab color separation

3 Answers3

Update