I'm trying to get the menu on the toolbar for my app.
Currently, I have a CollapsingToolbarLayout. When the user moves up the recyclerview, the image of an island reduces in size and then eventually it collapses into the toolbar.
This is what it looks like when it is expanded:
This is what it looks like when it has collapsed:
Now, you can see that when it is expanded, the heart icon is duplicated (once in the FAB and once in the toolbar. I only want the heart icon to appear in the toolbar when the FAB is no longer visible otherwise, I feel that it will be confusing to a user when you have two buttons on the screen that does exactly the same thing.
How can I only show the heart icon on the toolbar when the collapsingToolBarLayout is fully collapsed? I tried to look for some type of onCollapse listener but no luck.
This is the code for the xml:
<android.support.design.widget.AppBarLayout
android:layout_height="192dp"
android:id="#+id/appbar"
android:layout_width="match_parent">
<!-- 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"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="16dp"
app:expandedTitleMarginEnd="32dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/ocean395"
app:layout_collapseMode="pin" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
hey you can add the listener like this
AppBarLayout appBarLayout = (AppBarLayout)view.findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
// Collapsed (make button visible and fab invisible)
} else if (verticalOffset == 0) {
// Expanded (make fab visible and toolbar button invisible)
} else {
// Somewhere in between
}
}
}););
referred from How can i determine that CollapsingToolbar is collapsed?
Related
I am trying to add shadow to a toolbar using elevation and the Design Library. The layout code is something like:
<android.support.design.widget.CoordinatorLayout ... >
<android.support.design.widget.AppBarLayout ... >
<android.support.design.widget.CollapsingToolbarLayout ... >
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:contentInsetStart="16dp"
android:background="#color/colorPrimary"
android:elevation="16dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
The complete application source code it is available on github.
The problem is that the toolbar height or the shadow are not behaving as I expect. If you watch the screen capture below, you can notice the problem.
What I need to do is to display the shadow below of the blue area.
Any hint is very appreciated.
As mentioned there, it's by implementation of CollapsingToolbarLayout - elevation is removed if CollapsingToolbarLayout shows non-pinned elements:
if (Math.abs(verticalOffset) == scrollRange) {
// If we have some pinned children, and we're offset to only show those views,
// we want to be elevate
ViewCompat.setElevation(layout, layout.getTargetElevation());
} else {
// Otherwise, we're inline with the content
ViewCompat.setElevation(layout, 0f);
}
So, all I can suggest is to make your own CollapsingToolbarLayout by copying original CollapsingToolbarLayout from Google, and make changes in this condition.
Move the elevation to the AppBarLayout. CollapsingToolbarLayout changes in size, so setting it on the AppBarLayout creates the shadow at the right position.
<android.support.design.widget.CoordinatorLayout ... >
<android.support.design.widget.AppBarLayout
android:elevation="16dp">
<android.support.design.widget.CollapsingToolbarLayout ... >
<android.support.v7.widget.Toolbar ... />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I'm trying to set the AppBarLayout's primary color programmatically. The XML layout is AndroidStudio's Scrolling sample:
<android.support.design.widget.AppBarLayout android:id="#+id/app_bar"
android:fitsSystemWindows="true" android:layout_height="#dimen/app_bar_height"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true" android:layout_width="match_parent"
android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize" android:layout_width="match_parent"
app:layout_collapseMode="pin" app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And in the activity, I want all items inside the AppBarLayout to have a yellow background, so I'm setting:
int barColor = Color.parseColor("#FFC107");
AppBarLayout barLayout = (AppBarLayout) this.findViewById(R.id.app_bar);
if (barLayout != null) {
barLayout.setBackgroundColor(barColor);
}
toolbar.setBackgroundColor(barColor);
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) this.findViewById(R.id.toolbar_layout);
if (collapsingToolbarLayout != null) {
collapsingToolbarLayout.setBackgroundColor(barColor);
collapsingToolbarLayout.setContentScrimColor(barColor);
}
Everything works fine, except when I'm halfway through scrolling the toolbar (in the exact point where the FAB disappears). In that state, the toolbar's color is still the default primary color (blue, not yellow), like in this image:
So, two questions:
Am I missing a method call?
Any tips on debugging these scenarios? In Android Device Monitor's view hierarchy dump I can't tell which one is the view that's tinted with this color.
I was having the same problem, you have to set the statusBar scrim color as well:
int red = ContextCompat.getColor(activity, R.color.red);
collapsingToolbar.setBackgroundColor(red);
collapsingToolbar.setContentScrimColor(red);
collapsingToolbar.setStatusBarScrimColor(red);
you can even get the color directly using:
collapsingToolbar.setBackgroundResource(R.color.red);
collapsingToolbar.setContentScrimResource(R.color.red);
collapsingToolbar.setStatusBarScrimResource(R.color.red);
I am using android support design 'com.android.support:design:22.2.1' my problem is that when the scroll has no content in it, the collapsing toolbar still enables the collapse action. I need to remove the collapsing of the view if the scroll has no content in it.
My XML :
<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"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#android:color/white"
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:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<fragment
android:id="#+id/pawfile_header"
android:name="com.lightbulb.pawesome.fragments.PawfileHeaderFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<fragment
android:id="#+id/pawfile_timeline"
android:name="com.lightbulb.pawesome.user_timeline.PawesomeUserTimelineFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
UDPATE QUESTION:
I'm done with disabling and enabling the collapsing of the view. I used this line of code in order to disable the collapsing:
AppBarLayout.LayoutParams appbarParams = (AppBarLayout.LayoutParams) collapsingToolbar.getLayoutParams();
appbarParams.setScrollFlags(0);
collapsingToolbar.setLayoutParams(p);
The problem is that the appbar is force to have the elevation of the scrollflags is set to 0. I tried using appbar.setElevation(0) but it has no effect. how can I remove the elevation from my appbar?
get your appbarlayout reference and set the setScrollFlags.
AppBarLayout.LayoutParams p = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
p.setScrollFlags(0);
toolbar.setLayoutParams(p);
Try appbarParams.setScrollFlags(-1); and appBarLayout.setExpanded(true, true) to remove the elevation.
And if you have recyclerView in the fragment, try recyclerView.setNestedScrollingEnabled(false);
Need to disable expand on CollapsingToolbarLayout for certain fragments
To stop collapse of collapsingtoolbar dont give
app:layout_scrollFlags="scroll|exitUntilCollapsed" in the XML file..You can remove that code
By "scroll has no content in it", I take it that you mean "there is no fragment". For that, I think you'll have to first change the <fragment> to a <FrameLayout> , then add the fragment programatically using getFragmentManager().beginTransaction() , and then check if the fragment is present (i.e. not null) like so:
if (getFragmentManager().findFragmentById(R.id.fragment_name) != null) {
// here try RKNP's code to disable the appBar from collapsing
}
I want to put an icon right to title in collapsing tool bar, shown as below
but After collapsing i don't want it to show in tool bar.
i want to hide after collapsing.
i have done some thing. using
collapsingToolbarLayout.setTitle(item.getName());
collapsingToolbarLayout.setForeground(getResources().getDrawable(R.drawable.ic_photo_library_white_24dp));
which look like this.
i am still trying to adjust that image.
but i want to hide that image after collapsing. bez it looks like this.
here is my java code.
private void setToolbar(Product item) {
((AppCompatActivity) getActivity()).setSupportActionBar((productToolBar));
ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();
actionBar.setTitle("");
productToolBar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
getActivity().onBackPressed();
}
});
collapsingToolbarLayout.setTitle(item.getName());
collapsingToolbarLayout.setForeground(getResources().getDrawable(R.drawable.ic_photo_library_white_24dp));
collapsingToolbarLayout.set
}
and my xml file.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/product_detail_main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:apptools="http://schemas.android.com/tools"
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/product_detail_appBar_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/detail_product_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foregroundGravity="bottom|right"
android:foregroundTintMode="add"
android:clipToPadding="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/space_xxlarge"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/image"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="#+id/product_toolBar_title"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_arrow_back_white_24dp"
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.support.design.widget.CoordinatorLayout
Thanks in advance. ^_^
i got the solution its an issue.
CollapsingToolbarLayout child views not shown in devices< Android L 5.1 including 5.0
here is the link
https://code.google.com/p/android/issues/detail?id=177738&can=1&q=CollapsingToolbarLayout&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
Related Questions
CollapsingToolbarLayout | Scrolling and layout issues
Backgroud
I want to use 2 different fragments that will allow me to change the layout based on orientation and screen size
Header Image (Currently just an ImageView)
Scrollable content
Issues
The CollapsingToolbarLayout does not allow me to expand the Toolbar to see the full Header Image
It shows a majority of the image, but not all. Top is cut, but the bottom is visible.
The Toolbar is set to Pin but it is hidden when scrolling
Just the Header Image should disappear, but instead my whole Appbar gets hidden
When scrolling to view the Expanded Toolbar there is an empty view until the Expanded Toolbar reaches its max height.
After both the Expanded Toolbar and the Toolbar itself become hidden
The Up Arrow does not show up in the Toolbar
Code
Layout.xml
<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"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="16dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/download"
android:scaleType="centerCrop" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/anim_toolbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<fragment
android:id="#+id/detail"
android:name="<package>.<fragment_name>"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
OnCreate
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Avengers: Age of Ultron");
}
1
2
3
4
5
6
Question 1
Add android:fitsSystemWindows="true" to your AppBarLayout, CollapsingToolbarLayout, and to your ImageView.
I'm guessing a part of your image is below the status bar (due to these lines being missing) which is why you can't see the top of the image.
Question 2
collapseMode="pin" only affects how the Toolbar reacts to collapsing (hence why it is called collapseMode and not scrollFlags).
In almost all cases when using CollapsingToolbarLayout, you should be using scroll|exitUntilCollapsed for your scrollFlags - this keeps the collapsed Toolbar visible even when you scroll downward.
Question 3
This is due to using scroll|enterAlways. Change your flags as per #2
Question 4
As mentioned in the answer to your related question, you need to call getSupportActionBar().setDisplayHomeAsUpEnabled(true); to show the Up button:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Avengers: Age of Ultron");
}
Remove app:contentScrim="?attr/colorPrimary" from your layout XML in CollapsingToolBarLayout tag. It will show the back button in toolbar