Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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: enter image description here

And this is what I get from my code:

enter image description here

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

like image 951
Rachit Avatar asked Sep 21 '15 00:09

Rachit


1 Answers

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.

like image 76
Rachit Avatar answered Sep 21 '22 21:09

Rachit