I'm on design support library 23.0.1, and I'm using a Collapsing Toolbar Layout with parallax image. I don't understand why when the Toolbar is totally collapsed (pinned) if a click on an action button (specifically I refresh its image), the title disappear. After that if I drop down the header to total expansion and reclick the action button the title returns.
ACTIVITY LAYOUT
<!-- App bar -->
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Collapsing toolbar layout -->
<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:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- Image Parallax -->
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription=""
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
edo:layout_collapseMode="parallax" />
<!-- Toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
edo:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Nested scroll view -->
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
edo:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
ACTION MENU LAYOUT
<item
android:id="#+id/action_bookmark"
android:icon="#mipmap/bookmark_empty_white"
android:title="#string/add_news_to_bookmarks"
app:showAsAction="ifRoom" />
OPTIONS SELECTED
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (news != null) {
switch (item.getItemId()) {
case R.id.action_bookmark:
if (Utils.isNetworkAvailable(activity)) {
if (news.getBookmarked()) {
bookmarked = false;
item.setIcon(R.mipmap.bookmark_empty_white);
deleteBookmark();
} else {
bookmarked = true;
item.setIcon(R.mipmap.bookmark_white);
postBookmark();
}
} else {
handleError(Config.API_ERR_CONNECTION);
}
return true;
}
}
return super.onOptionsItemSelected(item);
}
This is a bug at Android's side. They are aware of it and looks likely to be fixed in a future release: https://code.google.com/p/android/issues/detail?id=183333
Workarounds are posted in the link but none have been able to fix my issue.
EDIT: issue has been fixed with Support Library v23.1.0
This bug seems to be fixed with support library v23.1.0 .
I had this weird issue
And removing the attribute android:fitsSystemWindows="true" from
just the AppBarLayout kind of worked for me. Can you try the same ?
Related
I updated my dependencies to v24 but now my CollapsingToolbarLayout is broken. I used it to show an image(using setBackground) when the user didn't scroll yet, after that it would turn blue. Now it keeps showing the image and there's a white bar under it that covers my content, yet I haven't changed anything in my code. Here's an image(changed to red the background on purpose): http://imgur.com/a/lwl1Y.
See the toolbar has an image on it instead of being a solid color?also you can see the title gets cut off by a red-colored bar under the toolbar. Here are the layouts(which are simply edited layouts from the android studio template):
<android.support.design.widget.AppBarLayout
android:id="#+id/viewarticle_appbarlayout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/article_collapsingtoolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
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_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_view_article" />
</android.support.design.widget.CoordinatorLayout>
content_view_article.xml
</android.support.v4.widget.NestedScrollView>
Edit: I was using v 24.0.3 of the support libraries, I updated everything to 24.2.1 and the invisible bar is gone. The background problem remains though
I'm trying to create a good UI interface for tablet / large screen device.
The perfect solution would be the one running on GMail app (see screenshot below).
As far as I can understand, the layout is composed like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/activity_main_twopane" />
<android.support.design.widget.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:src="#drawable/ic_add" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
But if I adopt my solution, this will give me to 2 problems:
The FloatingActionButton on my code is on the bottom|end of the layout; in GMail app this is positioned only on the list layout (the one which contains e-mails);
The Toolbar on my code is only one (and I have a search action too), but it seems that on GMail app there are 2 of them: one as main with search option and the second one for details actions that are visible when you select an email.
Any advice that will lead me to to achieve the layout on screenshot?
Quick answer for your question 2 and 3:
In order to place the FAB in the desired place you have to add this tag on FloatingActionButton xml code: app:layout_anchor="#id/desired_view_id" and app:layout_anchorGravity="bottom|right|end";
In bottom toolbar you can define separate toolbar and style it.
See code below
// this is top toolbar
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
setSupportActionBar(toolbarTop);
// this is bottom one
Toolbar toolbarBottom = (Toolbar) findViewById(R.id.toolbar_bottom);
toolbarBottom.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
switch(item.getItemId()){
case R.id.action_settings:
// TODO
break;
// TODO: Other cases
}
return true;
}
});
// Inflate a menu to be displayed in the toolbar
toolbarBottom.inflateMenu(R.menu.menu_main);
I have a CollapsingToolbarLayout setup and im placing a wallpaper there. I want to be able to stop it from collapsing all the way.
I have tried minheight and many other things but can't figure it out.
How can i get it to stop collapsing to the second screenshot?
View when activity is loaded
Desired Stopping Point
Current Stopping Point
CollapsingToolbarLayout works really closely with Toolbar and as such the collapsed height depends on the toolbar.
I was able to solve your problem using this layout (Note it goes into the normal CoordinatorLayout/AppBarLayout Setup, With Fab and a NestedScrollView or RecyclerView):
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="?attr/colorPrimaryDark"
app:contentScrim="#android:color/transparent"
app:titleEnabled="false"
>
<!-- There isnt a contentSCrim attribute so the toolbar is transparent after being
collapsed
Disabled the title also as you wont be needing it -->
<ImageView
android:id="#+id/image_v"
android:layout_width="match_parent"
android:layout_height="360dp"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:src="#drawable/md2"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"
/>
<!-- Normal Imageview. Nothing interesting -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="168dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<!-- The toolbar is styled normally. However we disable the title also in code.
Toolbar height is the main component that determines the collapsed height -->
<TextView
android:text="#string/app_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?attr/colorPrimaryDark"
android:paddingLeft="72dp"
android:paddingRight="0dp"
android:paddingBottom="24dp"
android:paddingTop="24dp"
android:textColor="#android:color/white"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
/>
<!-- The title textView -->
</android.support.design.widget.CollapsingToolbarLayout>
The related activity looks like this:
...
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// Disable toolbar title
getSupportActionBar().setDisplayShowTitleEnabled(false);
...
Here's a video of the interaction
I have faced with the same problem.
First I just set the height of Toolbar as described in previous answers and it works.
But this led to another problem. Toolbar view eat touch events, so my collapsing view (which is MapView) does not take any touch events in its part overlapped by the Toolbar.
Finally my solution is to remove Toolbar from CollapsingToolbarLayout. In my case it is OK because I have used it only to restrict collapsing.
And to set the minimum collapsing height in onCreateView like this:
CollapsingToolbarLayout layoutCollapsing = (CollapsingToolbarLayout) rootView.findViewById(R.id.layoutCollapsing);
layoutCollapsing.setMinimumHeight(120);
Just add the desired stop-height to your toolbar and set app:contentScrim="#00000000" for your CollapsingToolbarLayout.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#00000000"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/ImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="100dp"
/> <!-- set desired stop-height as height -->
</android.support.design.widget.CollapsingToolbarLayout>
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
I'm trying to implement features from the new Design Support Library to create a parallax scrolling toolbar which looks similar to the new material design WhatsApp profile pages. However, I can't get the overflow menu and back button to show in the top corners.
I have tried using the following methods to display the back button, but none of them works.
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
And overwriting the onCreateOptionsMenu method for the overflow menu also didn't work.
Does anyone know how to add these toolbar icons to a CollapsingToolbar from the Design Support Library? Below is my layout xml for the activity. Thanks!
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
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="256dp"
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:contentScrim="#color/primary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/headerbg"
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/Theme.AppCompat.Light.DarkActionBar"
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="match_parent"
android:layout_gravity="fill_vertical"
android:layout_marginBottom="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
I had the same issue, none from existing answers have helped me, surprising fix of my problem was in question description.
Solution for AppCompat Activity
So working collapsing toolbar with back button needs those few lines in controller onCreate method:
//change id to Your id
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//this line shows back button
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Manifest of this activity ( notice parentActivityName attribute ):
<activity
android:name=".SomeActivity"
android:parentActivityName=".MainActivity"
android:theme="#style/AppTheme.NoActionBar"/>
Template part:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#color/colorPrimary"
android:fitsSystemWindows="true"
app:expandedTitleGravity="center_horizontal"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Alternative solution ( also AppCompat Activity )
Controller onCreate method:
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(android.support.v7.appcompat.R.drawable.abc_ic_ab_back_material);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
onBackPressed();
}
});
This approach uses the same manifest and template presented in first solution.
In my case this works! app:layout_collapseMode="pin" inside toolbar layout
Try not to put this in the coordinatorLayout:
android:fitsSystemWindows="true"
It works for me. No idea why. Good luck
The following enables the Navigation Button:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_arrow_back_white_24dp, null));
toolbar.setNavigationOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
//onBackPressed()
}
});
To get the Overflow Menu behavior you have to declare a menu.xml file with showAsAction:never applied to your menu items like:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_one"
android:title="action 1"
android:orderInCategory="1"
app:showAsAction="never"/>
<item android:id="#+id/action_two"
android:title="action 2"
android:orderInCategory="2"
app:showAsAction="never"/>
</menu>
And inflate it like:
toolbar.inflateMenu(R.menu.main);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_one:
break;
case R.id.action_two:
break;
}
return true;
}
});
change
app:layout_collapseMode="parallax"
to
app:layout_collapseMode="pin"
in imageView.
hope this will work for you
If u have not added parentActivityName tag in manifest file, then do so by adding following lines of code as
<activity android:name=".Activity.MovieData"
android:parentActivityName=".Activity.Home">
</activity>
where "Activity" is my Package name
"MovieData" is my activity name
"Home" is my destination activity name
EDIT: If you are supporting android api level 15 and below then parentActivityName wont work.
To support lower versions, u need to add meta-data tag as
<meta-data
android:name="PARENT_ACTIVITY"
android:value="com.example.Activity.Home"/>
change this..
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:elevation="15dp"
android:layout_width="match_parent"
app:logo="#drawable/action_bar_logo"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
the popupTheme makes the difference and it is what you were looking for..
this is my full xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".AddUser">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:elevation="15dp"
android:layout_width="match_parent"
app:logo="#drawable/action_bar_logo"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_add_user" />
</android.support.design.widget.CoordinatorLayout>
Good luck!
Goto res/values/ and open styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Change parent="Theme.AppCompat.Light.NoActionBar" to parent="Theme.AppCompat.Light"
Then start debugging and remove all unnecessary code like // setSupportActionBar(toolbar); things.
Definitely work.