How work the collapsing toolbar layout? And how to personalize it when toolbar collapse?

Question

This is my problem: I need to collapse all my coordination layout which contains some textfield, button and LinearLayout; but when i implement my code (code below) the collapsing does not result as my expectation. I wish to display all the layout on not collapsed layout and when the user scroll down, the collaps toolbar layout should display a layout with: "partenza: ... , arrivo: ..." in place of the title.

Any ideas?

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

<android.support.design.widget.AppBarLayout
    android:id="@+id/allAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimaryDark"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimaryDark"
        android:subtitle="@string/subtitle_app"
        android:title="@string/app_name"
        app:popupTheme="@style/AppTheme.PopupOverlay" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:descendantFocusability="beforeDescendants"
        android:focusableInTouchMode="true"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="315dp"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:theme="@style/InputTheme"
                android:weightSum="2">

                <RelativeLayout
                    android:id="@+id/inputPartenzaGroupBox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1">

                    <Button
                        android:id="@+id/clearPartenzaBox"
                        android:layout_width="50dp"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="5dip"
                        android:background="@android:color/transparent" />

                    <android.support.design.widget.TextInputLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textColorHint="@color/colorAccent">

                        <AutoCompleteTextView
                            android:id="@+id/tBoxPartenza"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:backgroundTint="@color/colorAccent"
                            android:hint="@string/example_text_1"
                            android:maxLines="1"
                            android:singleLine="true"
                            android:textColor="@color/white" />

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

                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/inputArrivoGroupBox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/inputPartenzaGroupBox"
                    android:layout_weight="1">


                    <Button
                        android:id="@+id/clearArrivoBox"
                        android:layout_width="50dp"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="5dip"
                        android:background="@android:color/transparent" />

                    <android.support.design.widget.TextInputLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textColorHint="@color/colorAccent">

                        <AutoCompleteTextView
                            android:id="@+id/tBoxArrivo"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:backgroundTint="@color/colorAccent"
                            android:hint="@string/example_text_2"
                            android:maxLines="1"
                            android:singleLine="true"
                            android:textColor="@color/white" />

                    </android.support.design.widget.TextInputLayout>
                </RelativeLayout>
            </LinearLayout>

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

                <ImageButton
                    android:id="@+id/btnInvertPosition"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:background="@android:color/transparent"
                    android:src="@drawable/ic_arrow" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btnSearchBus"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@android:color/transparent"
                android:gravity="center"
                android:text="@string/btn_text_search"
                android:textColor="@color/colorAccent"
                android:theme="@style/ThemeOverlay.AppCompat.Light" />

        </LinearLayout>

    </LinearLayout>

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

<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/mainList"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

</ListView>

@VivekSolanki right now there isn't, I only want to know if it possible to do something like that or not — Simone, Jan 05 '17 at 17:40
http://www.sgoliver.net/blog/animaciones-basicas-coordinatorlayout/ — Matias Elorriaga, Jan 05 '17 at 19:16
You could use two layouts below your Toolbar and switch their visibilities... To display the collapsing layout, just remove the title of the Actionbar and set the first layout to visible with your TextViews etc. When you want to expand, switch the visibility to gone, and make the second layout visible. In order to have an animation just set the height of the Toolbar and animate it. It might help you with this [previous answer with a expanding/collapsing animation](http://stackoverflow.com/a/41296398/2668136) for another effect tho. — Blo, Jan 05 '17 at 19:19

score 0 · Accepted Answer · answered Jan 05 '17 at 17:49

Yes, It's possible! For Simple collapsible layout you can do something like this:

final TextView descriptionText = (TextView) view.findViewById(R.id.detail_description_content);
        final TextView showAll = (TextView) view.findViewById(R.id.detail_read_all);
        showAll.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                showAll.setVisibility(View.INVISIBLE);

                descriptionText.setMaxLines(Integer.MAX_VALUE);
            }
        });

XML :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/detail_description_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >

        <TextView
            android:id="@+id/detail_description_content"
            android:maxLines="5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <TextView
            android:id="@+id/detail_read_all"
            android:clickable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</ScrollView>

check this lib too :

Hope this helps!

Wow it looks amazing, but one more question, the concept of collapsing is the same for the toolbar or is necessary redefine all the code in another way. Because at first my idea was create a collapsing toolbar layout? @VivekSolanki — Simone, Jan 05 '17 at 18:05
Sorry! I don't know exactly about that. But as far as i know you will require animation for dynamically/onscrollevent, collapse of toolbar. — Vivek Solanki, Jan 05 '17 at 18:19

How work the collapsing toolbar layout? And how to personalize it when toolbar collapse?

1 Answers1