Develop Reference

How to include image, text and button in toolbar?

In my android app, I wish to build a toolbar like so:
How can I increase the height of the toolbar and include an image, text and button?

make you toolbar like this
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_error" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Did you know"
android:textColor="#android:color/white" />
<TextView
android:id="#+id/FactTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="demo text" />
<--> add here more controls<-->
</LinearLayout>
</Toolbar>

You can use the following:
Collapsible Toolbar
Coordinator Layout
Some real examples:
https://antonioleiva.com/collapsing-toolbar-layout/
http://tutorialsbuzz.com/2015/11/android-collapsingtoolbarlayout-example_7.html
<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/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>
</android.support.design.widget.CoordinatorLayout>

I want to keep TitleBar visible and stick at top instead of underneath a collapsing toolbar

I have a AppBarLayout with CollapsingToolbar layout and ImageView in it. TitleBar appears when I ScrollUp. But I want to stick it at top and always visible. I have already tried by changing
app:layout_collapseMode attribute.
Also tried
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"
But didn't worked either. I have a code as follows:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/height"
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"
android:fitsSystemWindows="true"
app:expandedTitleMarginStart="25dp"
app:expandedTitleMarginEnd="60dp">
<ImageView
android:id="#+id/images"
android:layout_width="match_parent"
android:layout_height="match_parent"
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"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
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="wrap_content"
android:background="#color/window_background"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="30dp"
android:layout_height="20dp"
android:id="#+id/viewDetail"
android:text="View Detail"
android:textColor="#ffffff"
android:gravity="bottom|right|end"
android:onClick="onClick"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Finally I found solution to this. I also add ImageView in ScrollBarLayout. Below code worked fine for me !
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/window_background"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/images"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<TextView
android:layout_width="30dp"
android:layout_height="20dp"
android:id="#+id/viewDetail"
android:text="View Detail"
android:textColor="#ffffff"
android:gravity="bottom|right|end"
android:onClick="onClick"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Listview is overlapping app bar layout

Im using the following code to create a collapsing toolbar containing listview below it.
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/love_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_title"
android:textColor="#android:color/white"
android:textSize="#dimen/backdrop_title" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_subtitle"
android:textColor="#android:color/white"
android:textSize="#dimen/backdrop_subtitle" />
</LinearLayout>
</RelativeLayout>
<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>
<include layout="#layout/activity_experience"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#+id/appbar" />
</android.support.design.widget.CoordinatorLayout>
The problem is that, the listview is overlapping with appbar layout and hence the listview appears within appbarlayout. The layout activity_experience contains the listview

CoordinatorLayout won't work like RelativeLayout. This is why android:layout_below="#+id/appbar" isn't working properly for you.
Instead add this to your layout="#layout/activity_experience":
app:layout_behavior="#string/appbar_scrolling_view_behavior"

Text input layout in collapsingToolbarLayout using support library

Why is it that when i try to put the text input layout in the collapsing toolbar layout, nothing seems to appear.
Here is my code
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView android:layout_width="match_parent" android:layout_height="200dp"
android:src="#null"/>
<android.support.v7.widget.Toolbar android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_gravity="top"
android:id="#+id/toolbar"/>
<android.support.design.widget.TextInputLayout android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_width="match_parent">
<TextView android:layout_width="match_parent" android:layout_height="40dp"
/>
</android.support.design.widget.TextInputLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I'm using support library v23
EDITED
I also tried moving the textInputLayout below the collapsing toolbar layout but no positive results.

TextInputLayout is for EditText not for TextView so replace your TextView with EditText or Copy this code and try again.
<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">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#ff00" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<EditText
android:layout_width="match_parent"
android:layout_height="40dp"
android:inputType="number"
android:text="Number"/>
</android.support.design.widget.TextInputLayout>
<!-- 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.design.widget.CoordinatorLayout>

You could try
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.AppBarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView android:layout_width="match_parent" android:layout_height="200dp"
android:src="#null"/>
<android.support.v7.widget.Toolbar android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_gravity="top"
android:id="#+id/toolbar"/>
<android.support.design.widget.TextInputLayout android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_width="match_parent">
<TextView android:layout_width="match_parent" android:layout_height="40dp"
android:inputType="number"/>
</android.support.design.widget.TextInputLayout>
</android.support.design.widget.AppBarLayout>

Scrolling not possible on header area with CollapsingToolbarLayout

I've made working CollapsingToolbarLayout with this xml:
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/photo_header_height"
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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:focusableInTouchMode="false"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/cover_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
android:scaleType="centerCrop" />
<View
android:id="#+id/header_top_shadow"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="top"
android:background="#drawable/shape_picture_top_shadow"
android:visibility="gone" />
<View
android:id="#+id/header_bottom_shadow"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_gravity="bottom"
android:background="#drawable/shape_picture_bottom_shadow"
android:visibility="gone" />
</FrameLayout>
<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.design.widget.FloatingActionButton
android:id="#+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"
android:src="#drawable/ic_save_white_24dp"
app:layout_anchor="#+id/app_bar"
app:layout_anchorGravity="bottom|right|end" />
<android.support.v7.widget.RecyclerView
android:id="#+id/uploading_photos_recycler"
android:layout_width="300dp"
android:layout_height="123dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="70dp"
android:padding="#dimen/list_padding" />
The only issue is, when I try to scroll on the header area it doesn't work. See the gif for example.
http://recordit.co/8hem1UkTHz
Looks like some library bug, but maybe I'm missing something?
EDIT:
As far I know it's a bug in design library

This issue has been fixed in 23.0.1.