Android مشاريع تطبيقات اندرويد مفتوحة المصدر

In this article, we are about to discuss how to add a Collapsing toolbar layout to our Android Project. Collapsing Toolbar Layout provides a nice appealing interface with an imageview in toolbar which fades and collapses from toolbar when the content is scrolled towards bottom. Collapsing Toolbar Layout is directly available from Design Support Library released by Google in Mid 2015 which introduced many default layout features such as NavigationView, TextInputLayouts, Snackbar, Tabs, etc.
The following image demonstrates what we would like to achieve in this article.
So let us see how we can add the exciting Collapsing Toolbar Layout to our Android Project. The source code for this tutorial can be cloned/downloaded from the github repo below:

lien

Collapsing Toolbar Layout Integration using Android Studio:

1. Before doing anything, let us add the design support library in our App Module’s build.gradle file’s dependencies.
   
   1	compile 'com.android.support:design:24.2.1'

   
   To get the latest version of support library, head-on to this website.
2. Next we are going to add the following styles to our res>values>styles.xml file:
   
   1 2 3 4 5 6

   <style name="AppTheme.NoActionBar">         <item name="windowActionBar">false</item>         <item name="windowNoTitle">true</item>     </style>          <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

   
   Next we will also add the following styles to our res>values-v21>styles.xml file so that we can achieve transparent status bar for devices above API V21:
   
   1 2 3 4 5 6 7 8

   <resources>     <style name="AppTheme.NoActionBar">         <item name="windowActionBar">false</item>         <item name="windowNoTitle">true</item>         <item name="android:windowDrawsSystemBarBackgrounds">true</item>         <item name="android:statusBarColor">@android:color/transparent</item>     </style> </resources>

   
   If the above folder doesnot exist in your project, create it manually. This will make the status bar transparent with the image from the collapsing toolbar layout. These are the styles we are going to use in our project.
3. Now open manifest file to use the newly created style for our Activity. We add the following attribute to our activity to ensure that we use the toolbar we declared in our xml and not the actionbar provided by the android:
   
   1	android:theme="@style/AppTheme.NoActionBar"

4. Next we are going to add a Coordinator Layout from the Design Support Library to our Layout as RootView.
   
   1 2 3 4 5 6 7 8 9 10 11 12

   <?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"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/activity_main"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true"     tools:context="com.coderefer.collapsingtoolbarlayoutexample.CollapsingToolbarActivity"> </android.support.design.widget.CoordinatorLayout>

   
   
           We need to add the attribute android:fitsSystemWindows=“true” so that we need to make sure interactive elements (like buttons) aren’t hidden underneath them. For more details, refer this article.
5. Now we will be adding AppBarLayout inside our CoordinatorLayout.
   
   1 2 3 4 5 6 7

   <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay"> </android.support.design.widget.AppBarLayout>

6. Now we will be adding our CollapsingToolbarLayout to our AppBarLayout which we’ve included just now.
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   <android.support.design.widget.CollapsingToolbarLayout             android:layout_width="match_parent"             android:layout_height="match_parent"             android:id="@+id/collapsing_toolbar"             android:fitsSystemWindows="true"             app:contentScrim="?attr/colorPrimary"             app:layout_scrollFlags="scroll|enterAlways">             <ImageView                 android:layout_width="match_parent"                 android:layout_height="350dp"                 android:scaleType="centerCrop"                 android:fitsSystemWindows="true"                 android:id="@+id/iv_detail"                 android:src="@drawable/android_apple_fight"                 app:layout_collapseMode="parallax"/>             <android.support.v7.widget.Toolbar                 android:id="@+id/toolbar"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 app:layout_collapseMode="pin"/>         </android.support.design.widget.CollapsingToolbarLayout>

   
   Here contentScrim is used to set the color of toolbar when Collapsible toolbar is collapsed.
7. Next we need to add a NestedScrollView to our Coordinator Layout to support scrollview inside scrollview.
   
   1 2 3 4 5 6

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

   
   The content which we need to display below the CollapsibleToolbarLayout can be included as separate layout which i’ve named as content_collapsible_toolbar.xml.
8. If you want you might just include a Floating Action Bar (FAB) along with our Collapsing Toolbar Layout, you can do with just a small addition of code:
   
   1 2 3 4 5 6 7 8

   <android.support.design.widget.FloatingActionButton         android:id="@+id/fab"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_margin="16dp"         app:layout_anchor="@id/app_bar_layout"         app:layout_anchorGravity="bottom|right|end"         app:srcCompat="@android:drawable/ic_menu_share"/>

   
   
   The app:layout_anchor attribute helps the FAB to anchor to whichever layout we specify. The app:layout_anchorGravity tag here is helping the FAB to stick to bottom right to appbar layout as shown in the demo.
   The completed xml for our Collapsing Toolbar Layout is as follows:
   
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

   <?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"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/activity_main"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true"     tools:context="com.coderefer.collapsingtoolbarlayoutexample.CollapsingToolbarActivity">     <android.support.design.widget.AppBarLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:id="@+id/app_bar_layout"         android:fitsSystemWindows="true"         app:elevation="0dp"         android:theme="@style/AppTheme.AppBarOverlay">         <android.support.design.widget.CollapsingToolbarLayout             android:layout_width="match_parent"             android:layout_height="match_parent"             android:id="@+id/collapsing_toolbar"             android:fitsSystemWindows="true"             app:contentScrim="?attr/colorPrimary"             app:layout_scrollFlags="scroll|enterAlways">             <ImageView                 android:layout_width="match_parent"                 android:layout_height="350dp"                 android:scaleType="centerCrop"                 android:fitsSystemWindows="true"                 android:id="@+id/iv_detail"                 android:src="@drawable/android_apple_fight"                 app:layout_collapseMode="parallax"/>             <android.support.v7.widget.Toolbar                 android:id="@+id/toolbar"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 app:layout_collapseMode="pin"/>         </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>     <android.support.v4.widget.NestedScrollView         android:layout_width="match_parent"         android:layout_height="match_parent"         app:layout_behavior="@string/appbar_scrolling_view_behavior">         <include layout="@layout/content_collapsible_toolbar"/>     </android.support.v4.widget.NestedScrollView>     <android.support.design.widget.FloatingActionButton         android:id="@+id/fab"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_margin="16dp"         app:layout_anchor="@id/app_bar_layout"         app:layout_anchorGravity="bottom|right|end"         app:srcCompat="@android:drawable/ic_menu_share"/> </android.support.design.widget.CoordinatorLayout>

   
   
   In the upcoming tutorials, we will be discussing more on what’s more from Android Design Support Library.