With the new Design support library for Android, it has become easier for us to create some great animations with minimal effort.
We have seen WhatsApp profile view design with user image hide on scrolling. For that we need Design Support Library. In one of my earlier tutorial i had shown how to hide and show ToolBar you can see the tutorial here.
For this tutorial you need to learn how to implement material design in android that you can check here.
In this tutorial, we are going to learn how to implement ToolBar Animation using Design Support Library.
1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.
2. Open build.gradle and include this libraries show below:
1 2 3 4 5 6 7 8 |
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.1' compile 'com.android.support:design:23.0.1' compile 'com.android.support:recyclerview-v7:23.0.1' compile 'com.android.support:cardview-v7:23.0.1' compile 'com.android.support:palette-v7:23.0.1' } |
3. Open res ⇒ values and create a new xml file naming colors.xml and add the following colors to it.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#2196F3</color> <color name="colorPrimaryDark">#1976D2</color> <color name="colorAccent">#BBDEFB</color> <color name="textColorPrimary">#FFFFFF</color> <color name="windowBackground">#FFFFFF</color> <color name="navigationBarColor">#000000</color> <color name="black_trans">#14000000</color> </resources> |
4. For material design we need to modify to our styles.xml file by adding below codes :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<resources> <style name="AppBaseTheme" parent="AppTheme" /> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="android:windowDisablePreview">true</item> <item name="windowActionBar">false</item> <item name="android:textColorPrimary">@android:color/white</item> <item name="android:textColorSecondary">@android:color/white</item> <item name="actionMenuTextColor">@android:color/white</item> <item name="android:windowNoTitle">true</item> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
Now, for 21 Api Level we need to create a new folder under res directory naming values-v21 and create styles.xml file and add this code to it :
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 |
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="android:windowDisablePreview">true</item> <item name="windowActionBar">false</item> <item name="android:textColorPrimary">@android:color/white</item> <item name="android:textColorSecondary">@android:color/white</item> <item name="actionMenuTextColor">@android:color/white</item> <item name="android:windowNoTitle">true</item> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:navigationBarColor">@color/colorPrimary</item> <item name="android:windowContentTransitions">true</item> <item name="android:windowAllowEnterTransitionOverlap">true</item> <item name="android:windowAllowReturnTransitionOverlap">true</item> <item name="android:windowSharedElementEnterTransition">@android:transition/move</item> <item name="android:windowSharedElementExitTransition">@android:transition/move</item> </style> </resources> |
5. Now create a layout xml file naming activity_main.xml and add the below code to it. This code will help us to do toolbar animation by hiding image. The parent should be CoordinatorLayout and inside that we need AppBarLayout inside this add CollapsingToolbarLayout that will help us to achieve the animation.
You must set the layout_scrollFlags for the CollapsingToolbarLayout :
In CollapsingToolbarLayout add this flags :
1 |
app:layout_scrollFlags="scroll|exitUntilCollapsed" |
Now put your ImageView inside CollapseToolbar similarly you can put here any view that you want to hide on scroll and add the collapse mode:
1 |
app:layout_collapseMode="parallax" |
The Toolbar must use pin as its collapseMode because we want the Toolbar to persist and remain on top as the user scrolls down. Note I haven’t set any color for the Toolbar. That will be taken care of by the CollapsingToolbarLayout which will dynamically pick a color from our image and set it to the Toolbar on scroll.
Now add RecyclerView or any your view with below layout behaviour:
1 |
app:layout_behavior="@string/appbar_scrolling_view_behavior" |
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 |
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="192dp" 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:expandedTitleMarginBottom="32dp" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <!-- Your View that you want to hide on animation --> <ImageView android:id="@+id/header" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <!-- Your toolbar should always below your View otherwise it won't be visible --> <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" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="6dp" android:clickable="true" android:src="@drawable/ic_add" app:backgroundTint="@color/colorPrimary" app:elevation="6dp" app:layout_anchor="@+id/appbar" app:layout_anchorGravity="bottom|right|end" /> </android.support.design.widget.CoordinatorLayout> |
6. Since we are using RecyclerView so we need custom layout. So create custom layout naming item_row.xml and add the code.
If you want to learn how to implement recycler view than you can see my RecyclerView tutorial.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/cardView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginTop="10dp" app:cardCornerRadius="5dp" app:cardElevation="7dp"> <TextView android:id="@+id/cardTitle" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="15dp" android:text="Card Title" android:textColor="#000000" android:textSize="17sp" /> </android.support.v7.widget.CardView> |
7. Now create a ViewHolder class for RecyclerView naming DemoViewHolder.java and add the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
package com.androidtoolbaranimation_demo; import android.support.v7.widget.RecyclerView; import android.view.View; import android.widget.TextView; /** * Created by SONU on 25/09/15. */ public class DemoViewHolder extends RecyclerView.ViewHolder { public TextView title; public DemoViewHolder(View view) { super(view); this.title = (TextView) view.findViewById(R.id.cardTitle); } } |
8. Now create RecyclerViewAdapter class naming RecyclerView_Adapter.java and add the following code.
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 64 |
package com.androidtoolbaranimation_demo; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.ViewGroup; import java.util.ArrayList; /** * Created by SONU on 25/09/15. */ public class RecyclerView_Adapter extends RecyclerView.Adapter<DemoViewHolder> { private ArrayList<String> arrayList; private Context context; public RecyclerView_Adapter(Context context, ArrayList<String> arrayList) { this.context = context; this.arrayList = arrayList; } @Override public int getItemCount() { return (null != arrayList ? arrayList.size() : 0); } @Override public void onBindViewHolder(DemoViewHolder holder, int position) { final DemoViewHolder mainHolder = (DemoViewHolder) holder; //Setting text over textview mainHolder.title.setText(arrayList.get(position)); } @Override public DemoViewHolder onCreateViewHolder( ViewGroup viewGroup, int viewType) { LayoutInflater mInflater = LayoutInflater.from(viewGroup.getContext()); ViewGroup mainGroup = (ViewGroup) mInflater.inflate( R.layout.item_row, viewGroup, false); DemoViewHolder mainHolder = new DemoViewHolder(mainGroup) { @Override public String toString() { return super.toString(); } }; return mainHolder; } } |
9. Finally come to your MainActivity.java and add the following code. In this we have to set title to CollapsingToolbarLayout only otherwise it won’t show title.
I had uses the palette that will generate the color based on our image in AsyncTask and set it over Toolbar.
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 64 65 66 67 68 69 |
package com.androidtoolbaranimation_demo; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.support.design.widget.CollapsingToolbarLayout; import android.support.v7.app.AppCompatActivity; import android.support.v7.graphics.Palette; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private static RecyclerView recyclerView; private static Toolbar toolbar; private static CollapsingToolbarLayout collapsingToolbarLayout; int mutedColor = R.attr.colorPrimary; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (Toolbar)findViewById(R.id.toolBar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); collapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar); collapsingToolbarLayout.setTitle("Toolbar Animation Demo");//Set Title over collapsing toolbar layout Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.background); // It will generate colors based on the image in an AsyncTask. Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() { @SuppressWarnings("ResourceType") @Override public void onGenerated(Palette palette) { mutedColor = palette.getMutedColor(R.color.colorPrimary); collapsingToolbarLayout.setContentScrimColor(mutedColor); collapsingToolbarLayout.setStatusBarScrimColor(R.color.black_trans); } }); setRecyclerView(); } //Setting recycler view private void setRecyclerView() { recyclerView = (RecyclerView) findViewById(R.id.recyclerView); recyclerView.setHasFixedSize(true); recyclerView .setLayoutManager(new LinearLayoutManager(MainActivity.this));//Linear Items ArrayList<String> arrayList = new ArrayList<>(); for (int i = 0; i < 20; i++) { arrayList.add("Card Item " + i);//Adding items to recycler view } RecyclerView_Adapter adapter = new RecyclerView_Adapter(MainActivity.this, arrayList); recyclerView.setAdapter(adapter);// set adapter on recyclerview } } |
10. Finally, all done – run the app and you will get the output as shown in video.
Thanks.
Subscribe to us and get the latest news.