Collapsing toolbar like Whatsapp is related to Whatsapp Profile Page. Collapsing Toolbar Layout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of an AppBarLayout. You can easily create collapsing toolbar layout using Android Design support library.
To optimize collapsing toolbar height, width & precollapse height we have to use some java tweaks. Like in the WhatsApp they are using square image & WhatsApp maintains a height of the image indistinct resolution devices.
I’ve mentioned some steps to design Collapsing toolbar layout like WhatsApp. Below mentioned screenshots showing collapsing toolbar i.e. Initially collapsed & Fully Expended Toolbar in Whatsapp.
Step: 1 (Collapsing toolbar like Whatsapp)
First of all, for collapsing toolbar layout, you have to add Design Support Library in your project. Android Support and Android Design Library will provide all the components, Which needed to create or Implement the same WhatsApp profile or Collapsing toolbar. Add dependencies to build.gradle –
|
1 2 3 4 5 6 7 8 |
dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') compile 'com.android.support:appcompat-v7:23.4.0' compile 'com.android.support:design:23.4.0' compile 'com.android.support:cardview-v7:23.4.0' compile 'com.android.support:palette-v7:23.4.0' compile 'com.android.support:recyclerview-v7:23.4.0' } |
Above defined dependencies are quite latest so can use your version of dependencies.
Step:2
Now in activity file where you are creating collapsing toolbar create Coordinator Layout & put other child layouts as mentioned in 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 |
<?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/cordinator_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapse_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/toolbar_image" android:layout_width="match_parent" android:layout_height="wrap_content" android:contentDescription="@string/content_discription" android:fitsSystemWindows="true" android:scaleType="fitXY" android:src="@drawable/icon_user_profile_pic" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:elevation="10dp" app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" android:src="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout> |
*Content main layout is a content of this activity may be having some Recycle views or Card views as per application requirements. In any aspect, we have to create Activity for above-mentioned XML.
Step: 3
Now got to activity file (Java) where you have defined your layout.
|
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 70 71 72 73 74 75 |
import android.app.FragmentTransaction; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Color; import android.os.Bundle; import android.support.design.widget.AppBarLayout; import android.support.design.widget.CollapsingToolbarLayout; import android.support.design.widget.CoordinatorLayout; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.NavigationView; import android.support.design.widget.Snackbar; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.graphics.Palette; import android.support.v7.widget.Toolbar; import android.view.Display; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import in.ecomexpress.fragments.FragmentHome; public class MainActivity extends AppCompatActivity { CoordinatorLayout coordinatorLayout; AppBarLayout appBarLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); final Display dWidth = getWindowManager().getDefaultDisplay(); coordinatorLayout = (CoordinatorLayout) findViewById(R.id.cordinator_layout); appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout); appBarLayout.post(new Runnable() { @Override public void run() { int heightPx = dWidth.getWidth() * 1 / 3; setAppBarOffset(heightPx); } }); final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapse_toolbar); ImageView toolbarImage = (ImageView) findViewById(R.id.toolbar_image); toolbarImage.getLayoutParams().height = dWidth.getWidth(); Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_user_profile_pic); Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() { @Override public void onGenerated(Palette palette) { int mutedColor = palette.getMutedColor(getResources().getColor(R.color.colorPrimary)); collapsingToolbarLayout.setContentScrimColor(mutedColor); } }); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } }); } private void setAppBarOffset(int offsetPx) { CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams(); AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior(); behavior.onNestedPreScroll(coordinatorLayout, appBarLayout, null, 0, offsetPx, new int[]{0, 0}); } } |
In the above code, I’m changing toolbar color as per the matching of Image as using Palette.
|
1 2 3 4 5 6 7 8 9 |
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_user_profile_pic); Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() { @Override public void onGenerated(Palette palette) { int mutedColor = palette.getMutedColor(getResources().getColor(R.color.colorPrimary)); collapsingToolbarLayout.setContentScrimColor(mutedColor); } }); |
Also Maintaining height dynamically of an image in distinct resolution devices. (Collapsing toolbar like Whatsapp)
|
1 2 |
final Display dWidth = getWindowManager().getDefaultDisplay(); toolbarImage.getLayoutParams().height = dWidth.getWidth(); |
And the precollapse height of Collapsing toolbar using set offset bar method (One-third part will be collapsed).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout); appBarLayout.post(new Runnable() { @Override public void run() { int heightPx = dWidth.getWidth() * 1 / 3; setAppBarOffset(heightPx); } }); private void setAppBarOffset(int offsetPx) { CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams(); AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior(); behavior.onNestedPreScroll(coordinatorLayout, appBarLayout, null, 0, offsetPx, new int[]{0, 0}); } |
Now you have created Collapsing Toolbar layout like Whatsapp. This is the most common UI for Material Design Android theme. If face any issue please comment.
(Collapsing toolbar like Whatsapp)
How to Bypass SSL on Android when device say No Peer Certificate found. Please visit: No Peer Certificate Found on Android
Android gzcompression visit: Android gzcompress
