I have a collapsing toolbar layout and a FAB.
I dynamically change the FAB icon on click.
It works wells. But when the toolbar collapses and expanded again. Clicking on the FAB makes the icon disappear. When I collapse and expanded again, the icon appears, and the icon is changed!
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="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
app:expandedTitleMarginStart="16dp"
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/AppTheme.ToolbarTitleCollapsed"
app:expandedTitleTextAppearance="#style/AppTheme.ToolbarTitle"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="#+id/cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="bottom"
android:background="#drawable/scrim" />
<include layout="#layout/item_toolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:src="#drawable/ic_favorite_black_24dp"
app:fabSize="normal"
android:layout_margin="16dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
Java Code for toggling FAB icon
final FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (isSelected) {
fab.setImageDrawable(ContextCompat.getDrawable(MyActivity.this,R.drawable.ic_favorite_border_black_24dp));
fab.setColorFilter(Color.WHITE);
} else { fab.setImageDrawable(ContextCompat.getDrawable(MyActivity.this,R.drawable.ic_favorite_black_24dp));
fab.setColorFilter(Color.WHITE);
}
isSelected = !isSelected;
}
});
It is a bug in the material design library 28.0 which is already reported
https://issuetracker.google.com/issues/111316656
the fab hide behind <include layout="#layout/content"/> layout. You should use app:layout_behavior="#string/appbar_scrolling_view_behavior" in your content layout. try this and let me know.
Related
I am trying to implement CollapsingToolbarLayout just like follows:
But my CollapsingToolbarLayout never opens or collapse. I have referred to this tutorial. Here is my code:
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:background="#FF0"
tools:context=".activities.TasksListActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/tasks_list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:tint="#color/colorPrimary"
app:srcCompat="#android:drawable/ic_input_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here is the java code:
toolbar = findViewById(R.id.toolbar);
collToolbar = findViewById(R.id.collapsing_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
onBackPressed();
}
});
collToolbar.setTitleEnabled(false);
collToolbar.setTitle("This is title");
The height for your AppBarLayout has been set to 60dp. Change it to 120dp or something larger and set the title to the toolbar before setting the toolbar as the supportActionBar
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
tools:context=".CollapsingToolbar">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:fitsSystemWindows="true"
android:background="#FF0"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleGravity="bottom"
app:expandedTitleTextAppearance="#style/TextAppearance.MaterialComponents.Headline5"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/tasks_list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:tint="#color/colorPrimary"
app:srcCompat="#android:drawable/ic_input_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
In your activity's java file
toolbar = findViewById(R.id.toolbar);
collToolbar = findViewById(R.id.collapsing_toolbar);
toolbar.setTitle("This is title");
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
onBackPressed();
}
});
Hope this helps!
Set your AppBarLayout height to something larger - 60dp is very close to the standard toolbar height of 56dp.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="60dp" <-- Change to something larger (i.e. 240dp)
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:elevation="0dp">
I have a CollapsingToolbarLayout It displays the back button on the expanded state, but not showing on the collapsed state.
I tried setNavigationIcon() on the Toolbar but it sets for the expanded state.
Here is the layout
<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:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/user_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorAccent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/tbt_logo"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/user_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:titleTextColor="#android:color/white"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/pen_point_item_layout" />
<include layout="#layout/pen_point_item_layout" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Java:
toolbar = (Toolbar) findViewById(R.id.user_toolbar);
toolbar.setNavigationIcon(R.drawable.ic_back);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(true);
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.user_collapsing_toolbar);
collapsingToolbar.setTitle("Profile");
collapsingToolbar.setCollapsedTitleTextColor(Color.WHITE);
collapsingToolbar.setExpandedTitleColor(Color.WHITE);
What should I do?
Add layout_collapseMode to the toolbar.
app:layout_collapseMode="pin"
I have an Activity with CoordinatorLayout and inside it with a FrameLayout as a fragment container. I use the toolbar and change the visibility and FitSystemWindows attribute to control the Appbar Overlay like this:
private void modifyToolbar(boolean isVisible) {
if (isVisible) {
appbar.setFitsSystemWindows(true);
imageToolBar.setVisibility(View.VISIBLE);
imageToolBar.setFitsSystemWindows(true);
coll.setFitsSystemWindows(true);
appbar.requestApplyInsets();
} else {
appbar.setFitsSystemWindows(false);
imageToolBar.setVisibility(View.GONE);
imageToolBar.setFitsSystemWindows(false);
coll.setFitsSystemWindows(false);
appbar.requestApplyInsets();
}
}
It works fine except when in my overlay Fragment, I collapse the overlay ImageView and return to the non-overlay Fragment then come back. The overlay item will hide behind the toolbar.
Normal :
Error :
Here is my activity and my appbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.phoenix.soft.agenda.MainActivity">
<include layout="#layout/app_bar"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|start"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp"
app:backgroundTint="#drawable/fab_background"
app:layout_anchor="#+id/fragment_content"
app:layout_anchorGravity="bottom|right" />
<FrameLayout
android:id="#+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_overlapTop="64dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
Appbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="false"
android:theme="#style/AppThemeNew.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/coll_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#color/primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/image_over_lay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/find_bank"
android:transitionName="#string/toolbar_transition"
android:visibility="gone"
app:layout_collapseMode="parallax" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_bar"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<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/AppThemeNew.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And also, there is a "blink" shows up when I collapse the AppBar and return. I guess it's somehow the same reason cause this problem.
Thanks for the help.
I have been having a problem with the App Bar in the new Material Design Support Library. My issue is that the CollapsingToolbarLayout is at a different elevation than that of the top part of the Toolbar. Here is my XML code for the layout:
<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/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
android:elevation="25dp">
<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="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<com.example.example.widgets.CustomImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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"
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:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
...>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
.../>
<TextView
.../>
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
... />
Here is my onCreate Java code for the Activiy:
#Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_write);
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle("App Name");
collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitle("Title");
collapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.LargeText);
}
Finally, here is a screenshot of my problem:
Again the issue is the bottom half of the bar (The collapsing part) not being at the same elevation. Any advice on how to fix this would be great!
Thanks!
EDIT:
Here is my updated activity image:
All content except the title is now gone
I think the theme you're applying to this Activity already has an ActionBar. Use NoActionBar themes if you want to use ToolBar and want to set it as an ActionBar.
When you use a CollapsingToolbar you don't have to set up the title in the ActionBar, it's only setted in CollapsingToolbar
//This one is not needed
//getSupportActionBar().setTitle("App Name");
collapsingToolbar.setTitle("App Name");
I have implemented CollapsibleToolbarLayout as below.
<android.support.design.widget.CoordinatorLayout 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: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: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"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="40dp"
app:expandedTitleMarginStart="20dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgPoster"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:background="#drawable/place_holder_land" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/detailsGradient" />
<ImageView
android:id="#+id/play"
android:layout_width="wrap_content"
android:visibility="invisible"
app:layout_collapseMode="parallax"
android:layout_gravity="center"
android:src="#drawable/ic_play_movie"
android:layout_height="wrap_content" />
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...LinearLayout omitted...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_file_download"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
I add the image view in a framelayout in the toolbar so that i can have a overlay on the image and a gradient to make the toolbar text visible on some images
But this color line is coming just below the image (see screenshot) on adding the framelayout. If I remove the line
android:fitsSystemWindows="true"
from appbarlayout then the the color line disapperas but toolbar also scrolls away from the view...
Also to show the back button on the toolbar I have added the below code in OnCreate still it does not show
toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.anim_toolbar);
SetSupportActionBar(toolbar);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
SupportActionBar.SetHomeButtonEnabled(true);
SupportActionBar.Title = content.Title;
toolbar.SetNavigationIcon(Resource.Drawable.ic_action);
collapsingToolbar = FindViewById<CollapsingToolbarLayout>(Resource.Id.collapsing_toolbar);
collapsingToolbar.SetTitle(content.Title);
Thanks...
OK got it now had to remove
android:fitsSystemWindows="true"
from
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true">
everything good now
Thanks
Consider adding a fixed width to your app bar layout
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">