coordinatorlayout-with Picture scaling toolbar

Step One:

Add the following code in the Build.gilde

dependencies {    compile fileTree(dir‘libs‘, include: [‘*.jar‘])    ‘com.android.support:appcompat-v7:22.2.0‘    ‘com.android.support:design:22.2.0‘    ‘com.android.support:cardview-v7:22.2.0‘}

Step Two:

Layout file:

<?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:fitssystemwindows="true" >                        <!--Part I: Scaling toolbars --    <android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar"  Android:layout_width="Match_parent"android:layout_height="@dimen/detail_backdrop_ Height "android:fitssystemwindows=" true "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"            android:fitssystemwindows="true"            App:contentscrim="? Attr/colorprimary"            App:expandedtitlemarginend="64DP"            App:expandedtitlemarginstart="48DP"            App:layout_scrollflags="scroll|exituntilcollapsed">            <ImageViewandroid:id="@+id/backdrop"android:layout_width="Match _parent "android:layout_height="match_parent "android:fitssystemwindows=" True "android:scaletype="centercrop "android:src="@drawable/cheese_2 "app:layout_collapsemode="parallax " />                                                                                                                            <android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android: Layout_width="Match_parent"android:layout_height="? attr/actionbarsize"app: Layout_collapsemode="Pin"app:popuptheme="@style/themeoverlay.appcompat.light" />                                                                                        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <!--Part II: The main content, Nestedscrollview and ScrollView basic functions consistent, but nestedscrollview can be compatible with new controls--    <android.support.v4.widget.NestedScrollViewandroid:layout_width="Match_parent"  android:layout_height="Match_parent"app:layout_behavior="@string/appbar_ Scrolling_view_behavior ">                                <linearlayoutandroid:layout_width="Match_parent"android:layout_height ="Match_parent"android:orientation= "vertical"android:paddingtop=" 24DP ">                                                            <!--card layout --            <android.support.v7.widget.CardViewandroid:layout_width="Match_parent"  Android:layout_height="Wrap_content"android:layout_margin="@dimen/card_margin" >                                                                <linearlayoutstyle="@style/widget.cardcontent"android:layout_width ="Match_parent"android:layout_height="Wrap_content">                                                                                <textview  an Droid:layout_width  = "match_parent"  android:layout_height  =" wrap_content " android:text  =" Info " an Droid:textappearance  = "@style/textappearance.appcompat.title" />                     <TextViewandroid:layout_width="Match_parent"android:layout_height= "Wrap_content" Android:text="@string/cheese_ipsum" />                                                                                        </linearlayout>            </android.support.v7.widget.CardView>            <android.support.v7.widget.cardview  android:layout_width  =" match_parent " android:layout_height  =" wrap_content " android:layout_marginbottom  =" @dimen/card_margin " android:layout_marginleft  = "@dimen/card_margin"  android:layout_marginright  = "@dimen/card_margin" ;                 <linearlayout  st YLE  = "@style/widget.cardcontent"  and Roid:layout_width  = "match_parent"  an Droid:layout_height  =;                     <textview  an Droid:layout_width  = "match_parent"  android:layout_height  =" wrap_content " android:text  =" Friends " android:textappearance  = "@style/textappearance.appcompat.title" />                     <TextViewandroid:layout_width="Match_parent"android:layout_height= "Wrap_content" Android:text="@string/cheese_ipsum" />                                                                                        </linearlayout>            </android.support.v7.widget.CardView>            <android.support.v7.widget.cardview  android:layout_width  =" match_parent " android:layout_height  =" wrap_content " android:layout_marginbottom  =" @dimen/card_margin " android:layout_marginleft  = "@dimen/card_margin"  android:layout_marginright  = "@dimen/card_margin" ;                 <linearlayout  st YLE  = "@style/widget.cardcontent"  and Roid:layout_width  = "match_parent"  an Droid:layout_height  =;                     <textview  an Droid:layout_width  = "match_parent"  android:layout_height  =" wrap_content " android:text  =" related " android:textappearance  = "@style/textappearance.appcompat.title" />                     <TextViewandroid:layout_width="Match_parent"android:layout_height= "Wrap_content" Android:text="@string/cheese_ipsum" />                                                                                        </linearlayout>            </android.support.v7.widget.CardView>        </linearlayout>    </android.support.v4.widget.NestedScrollView>    <!--Part Three: Floating buttons --    <android.support.design.widget.floatingactionbutton  Span class= "Hljs-attribute" >android:layout_width  = "wrap_content"  android:layout_height  = "wrap_content"  android:layout_margin  =" @dimen/fab_margin " android:clickable  =" true "  ANDROID:SRC  = "@drawable/ic_discuss"  app: Layout_anchor  = "@id/appbar"  app:layout_ anchorgravity  = "bottom|right|end" /> </android.support.design.widget.CoordinatorLayout>

Step Three:

Main Page code:

 Public  class mainactivity extends appcompatactivity {    @Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate); Setcontentview (R.layout.activity_main);//Set the toolbar for the page        FinalToolbar Toolbar = (Toolbar) Findviewbyid (R.id.toolbar);        Setsupportactionbar (toolbar); Getsupportactionbar (). setdisplayhomeasupenabled (true);//Setting toolbar titleCollapsingtoolbarlayout Collapsingtoolbar = (collapsingtoolbarlayout) Findviewbyid (R.id.collapsing_toolbar); Collapsingtoolbar.settitle ("Cheesename"); }@Override     Public Boolean Oncreateoptionsmenu(Menu menu) {Getmenuinflater (). Inflate (R.menu.menu_main, menu);return true; }@Override     Public Boolean onoptionsitemselected(MenuItem Item) {intid = item.getitemid ();if(id = = r.id.action_settings) {return true; }return Super. onoptionsitemselected (item); }}

Summary:

The code structure of the Scaling toolbar:

<android. Support. Design. Widgets. Appbarlayoutandroid:layout_height="192DP"Android:layout_width="Match_parent"> <android. Support. Design. Widgets. CollapsingtoolbarlayoutAndroid:layout_width="Match_parent"android:layout_height="Match_parent"app:layout_scrollflags="scroll|exituntilcollapsed"> <android. Support. V7. Widgets. Toolbarandroid:layout_height="? Attr/actionbarsize"Android:layout_width="Match_parent"App:layout_collapsemode="Pin"/> </android. Support. Design. Widgets. Collapsingtoolbarlayout></android. Support. Design. Widgets. Appbarlayout>

Excerpt from Android Development blog

coordinatorlayout-with Picture scaling toolbar