[Android Software Development] theprakhar:
Final Output would look like this(gif) : http://imgur.com/mVcQv1l

(Or have a look in the attachments)

A Simple Tutorial on using CollapsingToolbarLayout with ViewPager.I'll try to keep it in brief.

So,first of all add the following to your dependencies in build.gradle(Module: app)

Open your activity_main.xml and write this:-

Note:-

●You can change the color of scrim by changing "app:contentScrim" in the above xml or dynamically in the MainActivity.java by,

collapsingToolbar.setContentScrimColor(getResources().getColor(R.color.COLORYOUWANT));

●To change the position of CollapsingToolbarLayout,you can change the following attributes:

app:expandedTitleMarginStart="SIZEYOUWANTdp"
app:expandedTitleMarginEnd="SIZEYOUWANTdp"

Now create new xml files,that'll be the pages of your ViewPager

For Example,create page1.xml and page2.xml

Keep the contents of the pages in NestedScrollView otherwise CollapsingToolbarLayout will not be collapsing when using ViewPager (You can use RecyclerView also.)

page1.xml

*Assuming you know the basics about ViewPager*

Now create Adapter and Model for your ViewPager.

Create a new class,named customadapter.

customadapter.java

import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
* Created by theprakhar on 04-06-2017.
*/

public class customadaptar extends PagerAdapter

{

private Context mContext;

public customadaptar(Context context) {
mContext = context;
}

@Override
public Object instantiateItem(ViewGroup collection, int position) {
custommodel modelObject = custommodel.values()[position];
LayoutInflater inflater = LayoutInflater.from(mContext);
ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
collection.addView(layout);
return layout;
}

@Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}

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

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public CharSequence getPageTitle(int position) {
custommodel customPagerEnum = custommodel.values()[position];
return mContext.getString(customPagerEnum.getTitleResId());}

public Parcelable saveState() {
// Do Nothing
return null;
}
}

Now create an enum,name it custommodel.That'll be the model for the viewpager where we'll link the layouts of the different pages.

custommodel.java

public enum custommodel {
PAGEONE(R.string.pageone, R.layout.page1),
PAGETWO(R.string.pagetwo, R.layout.page2);

private int mTitleResId;
private int mLayoutResId;

custommodel(int titleResId, int layoutResId) {
mTitleResId = titleResId;
mLayoutResId = layoutResId;
}

public int getTitleResId() {
return mTitleResId;
}

public int getLayoutResId() {
return mLayoutResId;
}

}

Now place the header image in the drawable folder,and now we'll dynamically set image in ImageView in MainActivity (Though you can directly do in that xml)

*If you do not want an image in your Collapsing Toolbar,simply remove the ImageView inside CollapsingToolbarLayout.*

**TIP:-Try to keep the size of the image below 100KB for smooth scroll**

Now head on to MainActivity.java and set up ViewPager and CollapsingToolbar.

MainActivity.java

import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
CollapsingToolbarLayout collapsingToolbar;
ImageView image;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
viewPager.setAdapter(new customadaptar(this));
image = (ImageView)findViewById(R.id.header);
image.setImageResource(R.drawable.header);
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.htab_collapse_toolbar);
collapsingToolbar.setTitle("Collapsing Toolbar Example");
}
}

Go run and test your code.You did it,bruh. :)

Github(Download Source Code) :-https://github.com/theprakhar/collapsingtoolbarlayoutexample

Hit that thanks button if it helped.Feel free to ask if you have any questions regarding this.