Android: How To Add A Button With Text Inside Collapsing Toolbar

How to achieve the following layout. I could achieve without the add button. But how to add the ADD buttom and add button should disappear along with parallax of the image when scr

Solution 1:

You can add button and image like this

<android.support.design.widget.AppBarLayoutandroid:id="@+id/appBarLayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:fitsSystemWindows="true"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="150dip"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginBottom="20dp"app:expandedTitleMarginEnd="64dp"app:expandedTitleMarginStart="48dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageViewandroid:id="@+id/header"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_collapseMode="parallax" /><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="bottom|end"app:layout_collapseMode="parallax"android:orientation="horizontal"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"/></LinearLayout></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout>

in your main scrollable content put this code

   <android.support.v4.widget.NestedScrollView
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

Solution 2:

You can add TextView, Button or any thing that you want to show on collapsible Layout.

<android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="150dip"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginBottom="20dp"app:expandedTitleMarginEnd="64dp"app:expandedTitleMarginStart="48dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageViewandroid:id="@+id/header"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_collapseMode="parallax" ><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"
                        ><TextViewandroid:id="@+id/toolbar_title_text"android:layout_width="fill_parent"android:layout_height="wrap_content"
                            /><Buttonandroid:id="@+id/btntest"android:layout_width="wrap_content"android:layout_height="wrap_content"... />

                         .......
                 </LinearLayout></android.support.v7.widget.Toolbar></android.support.design.widget.CollapsingToolbarLayout>

Solution 3:

In order to add back button (or any other button or image), you can add it to the Toolbar. If you would like to make this button shown always, whether toolbar is collapsed or not, you can add this line to the toolbar:

                app:layout_collapseMode="pin"

If you want the button to disappear when toolbar collapses, replace this line with:

                app:layout_collapseMode="parallax"

Then you can find this button/image by id from the activity/fragment and add listener to it. The full code for the Toolbar:

<com.google.android.material.appbar.AppBarLayoutandroid:id="@+id/appBarLayout"android:layout_height="wrap_content"android:layout_width="match_parent"android:fitsSystemWindows="true"android:theme="@style/ThemeOverlay.AppCompat.Dark"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"app:contentScrim="@color/colorPrimary"android:fitsSystemWindows="true"app:title="@string/app_name"><ImageViewandroid:layout_width="match_parent"android:layout_height="250dp"android:src="@drawable/tech"android:scaleType="centerCrop"/><androidx.appcompat.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="parallax"app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"><ImageViewandroid:id="@+id/toolbar_back_button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/ic_back_arrow_left"/></androidx.appcompat.widget.Toolbar></com.google.android.material.appbar.CollapsingToolbarLayout></com.google.android.material.appbar.AppBarLayout>