Primary difference between ToolBar and CollapsingToolBar

Question

What is the difference between ToolBar and CollapsingToolBar in android? I tried finding it online but couldn't get any useful resource

Answer 1

A toolBar looks like this:

You can move it anywhere on the screen you want. its treated just like a view.

Lets look how you can put it in its own layout file with other views:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="match_parent"
          android:layout_height="match_parent">

<Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="56dp">
</Toolbar>

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/gray"/>

and a collapsingtoolbar is a wrapper for doing a sort of animation on the toolbar and adding views like images to the tool bar. Here is an example:

When you swipe down on the collapsing toolbar it shows other views.

Here is a code example and notice how i put the toolbar inside of the collapsable toolbar, it wraps it:

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">

        <com.antonioleiva.materializeyourapp.SquareImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

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

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

note: you probably want to put that in a coordinator layout but i didnt' want to add more confusion.