Collapsing Toolbar With Tabs Android Example

Please follow and like us:

collapsing toolbar with tabs

 

Collapsing Toolbar with tabs is feature of new android design support library. Collapsing toolbar with tabs generally works like we can expand/collapse toolbar with tabs. I was looking for the collapsing toolbar with tabs effect like Grofers App but i have not found any proper resources. I found some library that gives similar effect but it was heavy size library for this effect. I used android

I used official collapsing toolbar feature of new material design support library.

here collapsed view height is 256dp and tabs height is 56dp

i made following path

i cut image into two parts one for collapsed view and one for tabs.

i cutted images according to dp to pixel sizes with high resolution drawable xxxhdpi and put into drawable folder so it will adjustable to all screen sizes

i have 2000×1246 image

top image 256dp= 2000×1024 pixel

bottom tab image 56dp= 2000×224 pixel

For our previous sections  of “Android Design Support Library Tutorial” series, check below links. For overview of the series, refer to the “Design Support Library Intro“.

Section 1: Navigation View
Section 2: Floating labels for editing text
Section 3: Floating Action Button

 

Let’s start to make Collapsing Toolbar with Tabs

build.gradle file will add following libs in dependencies for collapsing toolbar with tabs

apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.1"

    defaultConfig {
        applicationId "nkdroid.tutorial.collapsingtoolbar"
        minSdkVersion 8
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.android.support:design:22.2.1'
compile 'com.android.support:cardview-v7:22.2.1'
compile 'com.github.bumptech.glide:glide:3.6.0'
}

activity_main.xml contains collapsing toolbar with tabs in coordinator 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"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView

                android:id="@+id/backdrop"

                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                app:layout_collapseMode="none" />

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Application Title"
                    android:textColor="#fff"
                    android:textSize="18sp" />
            </android.support.v7.widget.Toolbar>


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

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"

        app:layout_anchor="@+id/appbar"
        app:layout_anchorGravity="bottom"
        app:layout_collapseMode="none">

        <ImageView
            android:id="@+id/tabBg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/primaryColor"
            android:scaleType="fitXY" />

        <android.support.design.widget.TabLayout
            android:id="@+id/detail_tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="#00000000"
            app:layout_anchor="@+id/appbar"
            app:layout_anchorGravity="bottom"
            app:layout_collapseMode="none"
            app:tabGravity="fill"
            app:tabIndicatorColor="#fff"
            app:tabIndicatorHeight="2dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="#fff"
            app:tabTextColor="#fff" />

    </FrameLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

fragment_sample.xml contains scrollview for viewpager

<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="nkdroid.tutorial.tablayout.SampleFragment">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/card_margin">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="16dp"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Dummy Title"
                        android:textSize="22sp"
                        android:textStyle="bold" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/dummy_text" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/card_margin">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="16dp"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Dummy Title"
                        android:textSize="22sp"
                        android:textStyle="bold" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/dummy_text" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>


</FrameLayout>

MainActivity.java contains main logic for collapsing toolbar with tabs

package nkdroid.tutorial.collapsingtoolbar;

import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.widget.ImageView;

import com.bumptech.glide.Glide;


public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private ImageView imageView,tabBg;
    private CollapsingToolbarLayout collapsingToolbar;
    private TabPagerAdapter tabPagerAdapter;
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        imageView= (ImageView) findViewById(R.id.backdrop);
        tabBg= (ImageView) findViewById(R.id.tabBg);
        collapsingToolbar=(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);

        setToolbar();
        setImage();
        
        mViewPager= (ViewPager) findViewById(R.id.viewpager);
        mTabLayout= (TabLayout) findViewById(R.id.detail_tabs);
        tabPagerAdapter=new TabPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(tabPagerAdapter);
        mTabLayout.setTabsFromPagerAdapter(tabPagerAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
        
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if(position==0){
                    Glide.with(MainActivity.this).load(R.drawable.onet).into(imageView);
                    Glide.with(MainActivity.this).load(R.drawable.oneb).into(tabBg);
                } else {
                    Glide.with(MainActivity.this).load(R.drawable.twot).into(imageView);
                    Glide.with(MainActivity.this).load(R.drawable.twob).into(tabBg);
                }

                imageView.invalidate();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    private void setToolbar() {
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        if (toolbar != null) {

            setSupportActionBar(toolbar);
        }
    }

    private void setImage() {
        Glide.with(this).load(R.drawable.onet).into(imageView);
        Glide.with(MainActivity.this).load(R.drawable.oneb).into(tabBg);
    }

    class TabPagerAdapter extends FragmentStatePagerAdapter {

        public TabPagerAdapter(FragmentManager fm){
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {

            SampleFragment sampleFragment=SampleFragment.newInstance((++position)+"");
            return sampleFragment;
        }

        @Override
        public int getCount() {
            return 2;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "Dummy Tab "+(++position) ;
        }
    }
}

Download source code of collapsing toolbar with tabs

Yup! collapsing toolbar with tabs it’s tricky and there is no official library. Hope you like my tricky solution of setting collapsing toolbar with tabs.

nirav kalola