Remove Space Gap between toolbar and tablayout

Question

I have a AppBarLayout with TabLayout in a fragment that is into an Activity that has a Toolbar. But between toolbar and TabLayout appears a space, i don't know where it comes from.

fragment_packs.xml

<FrameLayout 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"
    tools:context="studio.com.archeagemanager.EventosFragment">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="studio.com.archeagemanager.PacksFragment">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            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="match_parent"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabTextColor="#ffffff" />
        </android.support.design.widget.AppBarLayout>

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

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

</FrameLayout>

PacksFragment.java

public class PacksFragment extends Fragment {


    public PacksFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_packs, container, false);

        AppBarLayout appBarLayout = (AppBarLayout) view.findViewById(R.id.appbar);
        appBarLayout.setExpanded(false);

        TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);

        final ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
        LinearLayoutManager mLayoutManager = new LinearLayoutManager(getActivity());
        mLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);

        viewPager.setAdapter(new PagerAdapter(getFragmentManager()));
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

        return view;
    }

    public class PagerAdapter extends FragmentStatePagerAdapter {

        private String[] tabTitles = new String[]{"Tab1", "Tab2", "Tab3", "Tab4"};

        public CharSequence getPageTitle(int position) {
            return tabTitles[position];
        }

        public PagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new TabFragmentA();
                case 1:
                    return new TabFragmentA();
                case 2:
                    return new TabFragmentA();
                case 3:
                    return new TabFragmentA();
                default:
                    return null;
            }
        }

        @Override
        public int getCount() {
            return tabTitles.length;
        }

    }

}

Answer 1

In your CoordinatorLayout

instead of

android:fitsSystemWindows="true"

apply

android:fitsSystemWindows="false"

Here is a good Documentation why and when you should use a android:fitsSystemWindows

System windows are the parts of the screen where the system is drawing either non-interactive (in the case of the status bar) or interactive (in the case of the navigation bar) content.

Most of the time, your app won’t need to draw under the status bar or the navigation bar, but if you do: you need to make sure interactive elements (like buttons) aren’t hidden underneath them. That’s what the default behavior of the android:fitsSystemWindows=“true” attribute gives you: it sets the padding of the View to ensure the contents don’t overlay the system windows.

A few things to keep in mind:

1)fitsSystemWindows is applied depth first — ordering matters: it’s the first View that consumes the insets that makes a difference

2) Insets are always relative to the full window — insets may be applied even before layout happens, so don’t assume the default behavior knows anything about the position of a View when applying its padding

3) Any other padding you’ve set is overwritten — you’ll note that paddingLeft/paddingTop/ etc is ineffective if you are using android:fitsSystemWindows=”true” on the same View