Hide content from CoordinatorLayout when collapsed - android

I'm having troubles when i try to hide the content of the coordinator layout when collapsed.
For example:
Here i have my coordinator layout with my toolbar
And when is collapses, it looks something like this
The problem is: i don't want that circle to be visible under my toolbar. What i need to do, is turn this toolbar transparent, to see everything under it while i'm scrolling. I've been searching on internet, but i haven't found anything who fits my needs.
Here's my code for CoordinatorLayout:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/TextStyle3"
app:contentScrim="#color/ys_grey_asset_dark_transparency"
app:expandedTitleGravity="bottom|center_horizontal"
app:expandedTitleTextAppearance="#style/TextStyle1"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="100dp"
android:scaleType="centerCrop"
android:src="#color/ys_gridview_background"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
<RelativeLayout
android:id="#+id/rl_main_activity_background"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/logo_vertical_margin"
android:background="#drawable/background_circle"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/img_main_activity_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="#mipmap/ic_about" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="50dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>


I just changed and fixed some mistakes, now, it should work.Also, i don't think if this line is necessary for that ImageView:
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleGravity="bottom|center_horizontal"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="100dp"
android:scaleType="centerCrop"
android:src="#color/colorPrimaryDark"
app:layout_collapseMode="parallax" />
<RelativeLayout
android:id="#+id/rl_main_activity_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/ic_3d_rotation_black_36dp"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/img_main_activity_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
Finally:


set below scrollFlag to your RelativeLayout which contains ImageView:
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

Related

Anchor imageview to the collapsing toolbar in android

I am trying to make a layout like this where I am adding collapsing toolbar functionality I searched lots of solution to achive this kind of animation where the below layout slides up and with that it takes the image[portrait] also with the animation.
What I have achieved till now
I am able to slide the below layout.
I am able to collapse the toolbar.
I am able to show my Tab views into the toolbar
What I want to achieve
When I slide the below layout my image gets stuck in half way and it doesn't go completely up and hide.
Solution which I am not looking for
This thread tell how to hide and show the imageview when we slide the child layout but my requirement is not hiding the Imageview I just want to slide the view on the top.
Below is my XML layout
<?xml version="1.0" encoding="utf-8"?>
[![enter image description here][2]][2]<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/posterbackdrop"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="none" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/transparent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
<nseit.com.tmdb.Common.FontTypeFace
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="50dp"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"
android:transitionName="moviename"
app:typeface="roboto_bold" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
style="#style/MyTabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:theme="#style/TabLayout_Theme"
app:layout_anchor="#+id/movieportrait"
app:layout_anchorGravity="bottom"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/TextColor" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.CardView
android:id="#+id/movieportrait"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:adjustViewBounds="true"
app:cardElevation="15dp"
app:layout_anchor="#id/appbarlayout"
app:layout_anchorGravity="bottom|left|end">
<ImageView
android:id="#+id/imageView7"
android:layout_width="150dp"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:background="#drawable/deadpoolpotrait"
android:fitsSystemWindows="true"
android:scaleType="fitCenter"
android:scaleY="1.2" />
</android.support.v7.widget.CardView>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Attaching the screenshot

I want to keep TitleBar visible and stick at top instead of underneath a collapsing toolbar

I have a AppBarLayout with CollapsingToolbar layout and ImageView in it. TitleBar appears when I ScrollUp. But I want to stick it at top and always visible. I have already tried by changing
app:layout_collapseMode attribute.
Also tried
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"
But didn't worked either. I have a code as follows:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:expandedTitleMarginStart="25dp"
app:expandedTitleMarginEnd="60dp">
<ImageView
android:id="#+id/images"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/window_background"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="30dp"
android:layout_height="20dp"
android:id="#+id/viewDetail"
android:text="View Detail"
android:textColor="#ffffff"
android:gravity="bottom|right|end"
android:onClick="onClick"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Finally I found solution to this. I also add ImageView in ScrollBarLayout. Below code worked fine for me !
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/window_background"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/images"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<TextView
android:layout_width="30dp"
android:layout_height="20dp"
android:id="#+id/viewDetail"
android:text="View Detail"
android:textColor="#ffffff"
android:gravity="bottom|right|end"
android:onClick="onClick"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Using CollapsingToolbarLayout, how can I set it as the support action bar?

Following this tutorial, I have this CollapsingToolbarLayout:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/blurred_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="ContentDescription" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/defaultimage"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
tools:ignore="ContentDescription"
android:id="#+id/profilePicture" />
</android.support.design.widget.CollapsingToolbarLayout>
However, I need to use setSupportActionBar() so I can use the setTitle(), setHomeAsUpEnabled(), etc. methods. However, apparently CollapsingToolbarLayout cannot be cast to Toolbar, and the setSupportActionBar() method only accepts a Toolbar method.
Is there a substitute method for setting it?

Try to do something like this :
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="70dp"
app:expandedTitleMarginEnd="10dp"
app:expandedTitleMarginStart="48dp"
app:layout_collapseParallaxMultiplier="0.5"
app:layout_scrollFlags="scroll|enterAlways|snap">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="160dp"
android:gravity="bottom"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/blurred_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="ContentDescription" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/defaultimage"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
tools:ignore="ContentDescription"
android:id="#+id/profilePicture" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark" />
</android.support.design.widget.CollapsingToolbarLayout>
Add your image views inside LinearLayout/RelativeLayout and add Toolbar inside CollapsingToolbarLayout to achieve Toolbar functionalities.

How to pin icon from image to toolbar after scrolling same like WhatsApp group edit icon

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:accessibilityLiveRegion="assertive"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="true">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher"
app:layout_collapseMode="parallax" />
<ImageView
android:id="#+id/imgicon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="15dp"
android:fitsSystemWindows="true"
android:src="#drawable/fb"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.7" />
<ImageView
android:id="#+id/imgicon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="15dp"
android:layout_marginRight="45dp"
android:fitsSystemWindows="true"
android:src="#drawable/insta"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
android:title="Collapsing Toolbar"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"></android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
When I scroll the 2 icons are hide behind the image instead of setting inside the toolbar. Any idea how can i do this, I look into many examples but now working for me. I have implemented onOffsetChanged method of Appbarlayout and try to play with animation but didn't worked for me.

There is an accepted answer in Android: dynamically change ActionBar icon? refer this. You can get image from your image view and reduce its size to your requirement and can change icon using homeItem.setIcon(your image);

Switch is not clickable inside CollapsingToolbarLayout on android 5.+

I have a CollapsingToolbarLayout and I put an android.widget.Switch inside. So on Android 4.3 this switch is clickable and I can do whatever I want with it, but on Android 5.+ it is not clickable. Adding clickable = "true" for both Switch and CollapsingToolbarLayout made no effect. `
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:id="#+id/appBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="352dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
>
</android.support.v7.widget.Toolbar>
<ImageView
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:layout_width="match_parent"
android:id="#+id/pillImage"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:maxHeight="192dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:paddingRight="12dp">
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Отслеживать"
android:textColor="#color/textColor"
android:id="#+id/switchInsideCollapsingLayout"
/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>`
Why Switch isn't clickable on 5.+ androids and how can I make it clickable for 5.+ versions of android.
Thanks in advance.

Add elevation in your Image View or Switch
it Worked For me
<android.support.design.widget.AppBarLayout
app:expanded="false"
android:theme="#style/Theme.AppCompat.Light.DarkActionBar"
android:layout_width="match_parent"
android:layout_height="140dp">
<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">
<LinearLayout
android:elevation="25dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:gravity="center_vertical|fill_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:tint="#ffffff"
android:src="#drawable/volume"
android:layout_width="30dp"
android:layout_height="30dp" />
<android.support.v7.widget.AppCompatSeekBar
android:clickable="true"
android:progressBackgroundTint="#color/progressBackground"
android:progressTint="#color/progress"
android:thumbTint="#color/thump"
android:progress="55"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Watch the Attachments
Screen 1
Screen 2

Categories

Resources