Collapsible Toolbar: Set how much the toolbar should be collapsed in onCreate

Question

I'm creating a ListView and its corresponding DetailView application. My ListView has items which if clicked take the user to the DetailViewActivity.

On the DetailViewActivity, I've implemented a Collapsible Toolbar. Now, every time the DetailViewActivity is opened, a different image (with different dimensions) is set onto the ImageView within the Collapsible Toolbar.

I want that the Toolbar should be open up to a certain height by default (say 256dp), but if the image height is greater than that, the user should be able to pull down to view the rest of the image. (exactly like Whatsapp)

I've managed to programmatically set the height of the Toolbar each time I open the activity, but the problem is, the Toolbar is always fully expanded. So if the image is larger, the Toolbar by default is very big. I want it to be collapsed to 256dp irrespective of the height of the image.

The code for my layout is:

<RelativeLayout
    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.CoordinatorLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbarLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="@dimen/expanded_toolbar_title_margin_start"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/background_navdrawer"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7"/>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="130dp"
                    android:background="@drawable/gradient_header_background"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.1"/>

                <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"
                    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>


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

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


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

            <FrameLayout
                android:id="@+id/detail_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:ignore="MergeRootFrame"/>

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="12dp"
            android:orientation="vertical"
            app:layout_anchor="@+id/appbar"
            app:layout_anchorGravity="bottom">

            <View
                android:id="@+id/toolbar_shadow_transparent"
                android:layout_width="match_parent"
                android:layout_height="@dimen/toolbar_elevation"
                android:background="@color/transparent"/>

            <View
                android:id="@+id/toolbar_shadow"
                android:layout_width="match_parent"
                android:layout_height="@dimen/toolbar_elevation"
                android:background="@drawable/dropshadow"/>
        </LinearLayout>


        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/action_edit"
            style="@style/MenuButtonsStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:src="@drawable/ic_edit"
            app:layout_anchor="@+id/appbar"
            app:layout_anchorGravity="bottom|right|end"/>

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

    <ImageView
        android:id="@+id/detail_back_arrow_land"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"/>

    <TextView
        android:id="@+id/course_name_textview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="gone"/>

</RelativeLayout>

And in my Activity, I've found the height and set it to the Toolbar like this:

appBar = (AppBarLayout) findViewById(R.id.appbar);
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) appBar.getLayoutParams();
lp.height = my_bitmap.getHeight();
DetailActivity.appBar.setLayoutParams(lp);
DetailActivity.mImageView.setImageBitmap(my_bitmap);

I'm attaching screenshots to make my point clearer.

This is exactly how tall I want my Toolbar to be every time the activity gets launched:

And this is what I get from my code:

Now, I could hardcode the height to 256dp in code, but then the user will not be able to scroll down to see the rest of the image. Please suggest.

Thank you for your response. Any response could get me started

score 13 · Accepted Answer · edited May 23 '17 at 12:03

13

Figured out the solution finally. Once I received the new image, I passed my Bitmap as a parameter to my expandToolbar() method. The heightDp parameter specifies the initial scrolledHeight of the View. I got the idea from https://stackoverflow.com/a/30747281/3286614, thanks to Tuấn Trần Anh

public static void expandToolbar(Bitmap bmp, int heightDp) {
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBar.getLayoutParams();
    AppBarLayout.Behavior behavior = new AppBarLayout.Behavior();
    behavior.setTopAndBottomOffset(0);
    behavior.onNestedPreScroll(rootLayout, appBar, null, 0, bmp.getHeight() - heightDp, new int[2]);
    params.setBehavior(behavior);
    DetailActivity.appBar.setLayoutParams(params);
}

Hope this helps somebody.

edited May 23 '17 at 12:03

Community

1
1

answered Sep 23 '15 at 12:12

Rachit

3,173
3
28
45

Thanks a lot, is there any Library that does the same? I'd use it. – Skizo-ozᴉʞS ツ Sep 23 '15 at 12:35
Couldn't find one, I'd been looking for one desperately. – Rachit Sep 23 '15 at 12:39
Oh damn :(! well with your code I'll try to figure out how to do it – Skizo-ozᴉʞS ツ Sep 23 '15 at 12:40
1

You say `512dp`, but the `512` in your code refers to `pixel`s, and the difference can be huge. – natario Sep 25 '15 at 12:55
You're right.. but I've created a method which converts the pixels into dp.. so the difference is not there.. If you need that method, let me know, I'll post it here – Rachit Sep 25 '15 at 13:16

Collapsible Toolbar: Set how much the toolbar should be collapsed in onCreate

1 Answers1

Linked