How to Make Collapsing Toolbar Layout in Android Studio

Collapsing Toolbar Layout

The Collapsing Toolbar Layout is provided for help in building toolbars with additional features and awesome scrolling effects. This is a wrapper for the toolbar which implements a collapsing app bar.

CoordinatorLayout play a very important role in proper scrolling and material animations. So we need to add CoordinatorLayout in the top of XML layout, then add Toolbar inside AppBarLayout and the AppBarLayout needs to be inside the CoordinatorLayout.

AppBarLayout: AppBarLayout is a vertical LinearLayout which is the child of a CoordinatorLayout and it helps in the implementation of many features of material designs app bar concept. This allows your child’s views to get the desired scrolling behavior by using the param app:layout_scrollFlags.

CoordinatorLayout: This is a super-powered FrameLayout. If you are familiar with FremeLayout then this will be very easy for you to use CoordinatorLayout otherwise this is very simple. It provides additional level control over its child’s views and helps in implementation of scrolling effect. CoordinatorLayout coordinates the animations and transitions of the view within it.

To design Collapsing Toolbar Layout you have to add design support library in your project Gradle build file. This library helps in achieving many of the material design components to build an amazing layout. Add the given below library in dependency of “build.gradle (Module: app )”.

compile ‘com.android.support:design:25.3.1’

Demo

Create New Project

Before Implementing the following code first create a new project in Android Studio, go to File  => then go to New => then select New Project option. In Add an activity option select default activity(Blank Activity) and proceed.

Structure Of Code

Code

Code for build.gradle (Module: app )


apply plugin: 'com.android.application'

android {
compileSdkVersion 25
defaultConfig {
applicationId "com.example.asus.ctoolbar"
minSdkVersion 21
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}

dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:25.3.1'
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

implementation 'com.android.support:design:25.3.1'

}

Code for AndroidManifest.xml file.


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.asus.ctoolbar">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity"
android:theme="@style/Theme.Design.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

Code for MainActivity.java file.


package com.example.asus.ctoolbar;

import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapse_toolbar);
collapsingToolbar.setTitle("CToolBar");
}
}

Code for activity_main.xml 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.design.widget.CollapsingToolbarLayout
app:contentScrim="@color/colorPrimary"
android:id="@+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">

<ImageView

android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bg_tsp"
android:scaleType="centerCrop"/>

<LinearLayout
android:layout_gravity="center"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">

</LinearLayout>

<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="45dp"
android:gravity="center"
android:paddingRight="5dp"
app:layout_collapseMode="pin"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

<ImageView

android:layout_width="35dp"
android:layout_height="35dp"
android:src="@drawable/ic_arrow_back_white_36dp"/>

</android.support.v7.widget.Toolbar>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

</RelativeLayout>

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>
<ImageView
android:background="@drawable/bg_circle"
android:translationZ="5dp"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="10dp"
android:layout_marginEnd="10dp"
android:clickable="true"
android:src="@drawable/ic_message_white_36dp"
app:layout_anchor="@id/collapse_toolbar"
app:layout_anchorGravity="bottom|right"
app:layout_collapseMode="parallax" />

<android.support.v4.widget.NestedScrollView
android:paddingBottom="60dp"
android:id="@+id/nested_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:clipToPadding="false"
android:scrollbars="none"
android:scrollingCache="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout
android:background="#fff"
android:padding="15dp"
android:layout_marginTop="50dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000"
android:text="Collapsing Toolbar Example Collapsing Toolbar Example Collapsing Toolbar Example Collapsing Toolbar Example Collapsing Toolbar Example Collapsing Toolbar Example Collapsing Toolbar Example Collapsing Toolbar Example Collapsing Toolbar Example Collapsing Toolbar Example Collapsing Toolbar ExampleCollapsing Toolbar Example Collapsing Toolbar Example Collapsing Toolbar Example"/>

</LinearLayout>
</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

Screenshot

 

collapsing toolbar layout

 

How to Make Collapsing Toolbar Layout in Android Studio
Tagged on:

One thought on “How to Make Collapsing Toolbar Layout in Android Studio

  • July 24, 2018 at 9:21 pm
    Permalink

    Nice work. your codes are pretty much useful

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *