android: how to add a button with text inside collapsing toolbar

Question

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

Answer 1

You can add button and image like this

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android: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">

        <ImageView
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax" />

        <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" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="bottom|end"
            app:layout_collapseMode="parallax"
            android:orientation="horizontal">
            <Button
                android: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>

Answer 2

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

 <android.support.design.widget.CollapsingToolbarLayout
        android: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">

  <ImageView
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax" >

<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" />
                <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        >
                        <TextView
                                android:id="@+id/toolbar_title_text"
                                android:layout_width="fill_parent"
                                android:layout_height="wrap_content"
                            />
                            <Button
                           android:id="@+id/btntest"
                           android:layout_width="wrap_content"
                           android:layout_height="wrap_content"
                        ... />

                         .......
                 </LinearLayout>

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

Answer 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.AppBarLayout
    android: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.CollapsingToolbarLayout
        android: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">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:src="@drawable/tech"
            android:scaleType="centerCrop"/>

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="parallax"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark">

            <ImageView
                android: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>