How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?

by

Here’s the way I managed to do this, I don’t think that’s the best solution though if anyone finds a better way please feel free to post the answer.

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <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.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="206dip"
            android:background="@color/primary_dark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="20dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            app:tabGravity="center"
            app:tabMode="scrollable"
            android:gravity="bottom"/>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

More Related Contents:

  1. CollapsingToolbarLayout setTitle() does not update unless collapsed
  2. This Activity already has an action bar supplied by the window decor
  3. How to make Toolbar transparent?
  4. No shadow by default on Toolbar?
  5. Toolbar navigation icon never set
  6. How to customize item background and item text color inside NavigationView?
  7. How to change the new TabLayout indicator color and height
  8. TextInputLayout not showing EditText hint before user focus on it
  9. How to change Toolbar Navigation and Overflow Menu icons (appcompat v7)?
  10. Add elevation/shadow on toolbar for pre-lollipop devices
  11. How I can remove the unnecessary top padding of the Navigation view?
  12. FloatingActionButton doesn’t hide
  13. Disable icon colorStateList in NavigationView
  14. Toolbar.inflateMenu seems to do nothing
  15. New Android Design Library bug with AppBarLayout and Toolbar
  16. How to implement endless list with RecyclerView?
  17. How to provide shadow to Button
  18. How do I import material design library to Android Studio?
  19. How to create a simple divider in the new NavigationView?
  20. Creating a SearchView that looks like the material design guidelines
  21. Navigation Drawer semi-transparent over status bar not working
  22. Cannot catch toolbar home button click event
  23. Changing the background color of a Tab in TabLayout (Android design support library) doesn’t occupy the entire tab space
  24. Android How to implement Bottom Sheet from Material Design docs
  25. Selected tab’s color in Bottom Navigation View
  26. how to highlight the selected Item of Recycler View?
  27. Compatiblity of Material Design to versions below Android 5.0?
  28. FAB animation with viewpager/tabslider
  29. Evenly spaced menu items on Toolbar
  30. Rounded corners on material button

Leave a Comment