Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Collapsing Toolbar was not hiding other element while collapsed

I have a layout on Android support design collapsing toolbar which contains the TextView but when I collapse my toolbar. some TextView showing with toolbar title. I want to hide every other things rather than toolbar and title. Here is my layout.

<android.support.design.widget.AppBarLayout
    android:id="@+id/MyAppbar"
    android:layout_width="match_parent"
    android:layout_height="256sp"
    android:fitsSystemWindows="true">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:background="#ff009688"
        app:contentScrim="@color/colorPrimary"
        app:expandedTitleMarginTop="100sp"
        app:expandedTitleGravity="center|bottom"
        android:fitsSystemWindows="true">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/bgimg"
            app:layout_collapseMode="parallax"/>
        <android.support.v7.widget.Toolbar
            android:id="@+id/MyToolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin" />

        <RelativeLayout
            android:layout_width="match_parent"
            app:layout_anchor="@+id/MyAppbar"
            android:layout_height="match_parent">
            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profile_image"
                android:layout_width="96dp"
                android:layout_height="96dp"
                android:src="@drawable/studentprofile"
                app:civ_border_width="2dp"
                app:civ_border_color="#0adcf4"
                android:layout_marginTop="58dp"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true" />

            <TextView
                android:id="@+id/branch"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="Branch:  "
                android:textColor="@color/textColorPrimary"
                android:textSize="14sp"
                android:layout_marginBottom="20sp"
                android:layout_alignParentBottom="true"
                android:layout_centerInParent="true" />
        </RelativeLayout>
    </android.support.design.widget.CollapsingToolbarLayout>

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

And my java code is...

collapsingToolbar =
            (CollapsingToolbarLayout) findViewById(R.id.collapse_toolbar);
    collapsingToolbar.setTitle(name);
    collapsingToolbar.setExpandedTitleTextAppearance(R.style.expandedappbar);
    collapsingToolbar.setCollapsedTitleTextAppearance(R.style.collapsedappbar);
    final ImageView profile=(ImageView)findViewById(R.id.profile_image);
    Picasso.with(this)
            .load(photo_url)
            .placeholder(R.drawable.studentprofile)
            .networkPolicy(NetworkPolicy.NO_CACHE)
            .into(new Target() {
                @Override
                public void onBitmapLoaded (final Bitmap bitmap, Picasso.LoadedFrom from){
                /* Save the bitmap or do something with it here */
                    Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {

                        @Override
                        public void onGenerated(Palette palette) {
                            collapsingToolbar.setContentScrimColor(palette.getMutedColor(ContextCompat.getColor(context,R.color.colorPrimary)));
                            collapsingToolbar.setStatusBarScrimColor(palette.getMutedColor(ContextCompat.getColor(context,R.color.colorPrimaryDark)));
                        }
                    });
                    //Set it in the ImageView
                    profile.setImageBitmap(bitmap);
                }

                @Override
                public void onBitmapFailed(Drawable errorDrawable) {
                }

                @Override
                public void onPrepareLoad(Drawable placeHolderDrawable) {
                }
            });
like image 827
Abhishek Singh Avatar asked Dec 24 '22 22:12

Abhishek Singh


1 Answers

Since I resolve my problem myself I'm posting this answer so it will helpfull for others . CollapsingToolBar extends FrameLayout so any xml tag written after another tag will be layered as top of parent. My RelativeLayout is written after the Toolbar thats why Relative Layout elements are showing on Toolbar after CollapsingToolbar collapsed. just putting RelativeLayout before the Toolbar will hides the element after toolbar collapsed.

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapse_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    android:background="#ff009688"
    app:contentScrim="@color/colorPrimary"
    app:expandedTitleMarginTop="100sp"
    app:expandedTitleGravity="center|bottom"
    android:fitsSystemWindows="true">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        app:srcCompat="@drawable/bgimg"
        app:layout_collapseMode="parallax"/>

   <RelativeLayout
        android:layout_width="match_parent"
        app:layout_anchor="@+id/MyAppbar"
        android:layout_height="match_parent">
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profile_image"
            android:layout_width="96dp"
            android:layout_height="96dp"
            android:src="@drawable/studentprofile"
            app:civ_border_width="2dp"
            app:civ_border_color="#0adcf4"
            android:layout_marginTop="58dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />

        <TextView
            android:id="@+id/branch"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Branch:  "
            android:textColor="@color/textColorPrimary"
            android:textSize="14sp"
            android:layout_marginBottom="20sp"
            android:layout_alignParentBottom="true"
            android:layout_centerInParent="true" />
    </RelativeLayout>
    <android.support.v7.widget.Toolbar
        android:id="@+id/MyToolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin" />

</android.support.design.widget.CollapsingToolbarLayout> 
like image 51
Abhishek Singh Avatar answered Dec 26 '22 10:12

Abhishek Singh