Included in my activity_main.xml's DrawerLayout is a CoordinatorLayout called content_layout.xml. Within this CoordinatorLayout is my AppBarLayout containing a Toolbar, then a LinearLayout for a fragment's content.
When a fragment containing a RecyclerView is scrolled up, the toolbar exits successfully. The problem lies when scrolling down to bring the toolbar back. The toolbar does not appear until the full height of the toolbar has been scrolled and as such leaves an unsightly white box in its place as shown.
content_layout.xml
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_frame"
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="wrap_content"
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"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<!-- The main content view for fragments-->
<LinearLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
The toolbar is initialized via MainActivity's onCreate():
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
I would appreciate any suggestions as to resolving this. Thank you.
I was having this same issue and the only thing I found that solved it was by having something else other than the toolbar inside the AppBarLayout. I placed an invisible view in my layout underneath the toolbar. Not the most ideal solution, but it worked.
<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.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<View
android:id="#+id/appbar_bottom"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/transparent"
android:visibility="invisible"/>
</android.support.design.widget.AppBarLayout>
Related
I finally got a toolbar that fades away as I scroll down in my recyclerview and reappears when I scroll up but now the toolbar is not showing the title or navigation buttons. After testing out many things, I've discovered that when my toolbar has enterAlwaysCollapsed as an option in the layout_scrollFlag field, the title disappears but if I take it out the toolbar displays everything correctly but does not fade away on scroll. How can I keep the enterAlwaysCollapsed scrollFlag option AND keep my title/nav buttons?
This is my layout:
<?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"
android:id="#+id/main_content"
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="wrap_content"
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:background="?attr/colorPrimary"
app:contentScrim="#color/colorGrey2"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" // this is the problematic flag
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
This is how I've been trying to set the title to no avail:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gallerie_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("TESTINGTITLE");
setSupportActionBar(toolbar);
}
Hiding toolbar code:
View toolbar = findViewById(R.id.toolbar);
toolbar.animate()
.translationY(-toolbar.getHeight())
.setInterpolator(new LinearInterpolator());
Toolbar xml
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_layout"
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>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
I want to slide out to top a toolbar (hide it) and resize View to top.
I want to do it not with scroll but with any event (click).
Problem with above code is toolbar hides but remains empty place of AppBarLayout.
How to do it?
I found a reason.
It was because of: app:layout_behavior="#string/appbar_scrolling_view_behavior"
Deleting it fixed blank space problem but then you have to fix top margin for that bottom View.
I am using a ViewPager inside CollapsingToolbarLayout.
The problem is that when I swipe the ViewPager which is not fully expanded, toolbar title moves in the place where it should be with fully expanded state (by default to the bottom left corner).
Then after collapsing title completely disappears.
Here is how my layout looks like:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button_remember_word">
<android.support.design.widget.AppBarLayout
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:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v4.view.ViewPager
android:id="#+id/pager_gallery"
android:layout_width="match_parent"
android:layout_height="240dp"/>
<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.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/text_word_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/tmp_lorem"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
And here is how I am setting the toolbar title:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mToolbar.setTitle("A title");
// also tried this way
CollapsingToolbarLayout collapsingToolbarLayout =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitle("Another title");
Adding a couple of screenshots:
1. Normal expanded state
Normal collapsed state
If in this state I swipe the ViewPager
Title disappears
Any pice of advice is appreciated
use app:layout_collapseMode="parallax" for your viewPager
<android.support.v4.view.ViewPager
android:id="#+id/pager_gallery"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
android:layout_height="240dp"/>
I am having an issue of setting ToolBar(BLACK RECTANGLE) permanently in the Parallax Header ViewPager.
Default Layout is like this IMAGE 1 & I need as same as like this with Permanent ToolBar.
I need to know that whether it is possible or not.
Please post the layout file you are currently using.
There should be a way to do this. You would have two toolbars in the CollapsingToolbarLayout. One toolbar you specify as the collapsing toolbar using app:toolbarId on the collapsing toolbar. On this toolbar you would set the home/back icon and the options menu. A different toolbar should be the first child of the collapsing layout and have app:layout_collapseMode="pin". On this toolbar you would set the title and optionally subtitle.
Here's a layout I was playing around with, I had to take out fitsSystemWindows to make it look better. Try it out:
<?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"
tools:context="com.example.pinnedtoolbar.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="#+id/toolbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:src="#drawable/abby"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/titleToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin" />
<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_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
Here's some of the code that went along with it:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// erase the expanded title
getSupportActionBar().setTitle(null);
// set the title on the other pinned toolbar
Toolbar titleToolbar = (Toolbar) findViewById(R.id.titleToolbar);
titleToolbar.setTitle("This is the real title");
}
I have set up a DrawerLayout and a CoordinatorLayout in order to use a modern layout with a NavigationView and collapsing toolbar.
It works just fine until the device is rotated. Then the main_content is moved to a new permanent location. If I remove the appbar_scrolling_view_behavior from the main_content FrameLayout rotation works, but the content is no longer aware of the Toolbar.
Any advice?
activity_main.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:background="#00ff00">
<!-- ACTIONBAR START -->
<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:background="#ff0000">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<!-- ACTIONBAR END -->
<!-- MAIN CONTENT START -->
<FrameLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#0000ff"/>
<!-- MAIN CONTENT END -->
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView ...>
<!-- NavigationView code omitted ... -->
</android.support.v4.widget.DrawerLayout>
fragment_main.xml (loaded into main_content)
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.MainFragment">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello World!"/>
</FrameLayout>
A few points that should collectively resolve your problem:
The height of the AppBarLayout determins the expanded size of the collapsing toolbar, whilst the Toolbar determins the collapsed size. As such, you should set the AppBarLayout height to something more than the Toolbar (i.e. 280dp) to see the collapsing behaviour.
Immediately inside the AppBarLayout should be a CollapsingToolbarLayout, which contains the Toolbar and, optionally, other views too (normally an ImageView with a parallax collapse mode)
For the toolbar to collapse and expand correctly, it relies on a ViewGroup that supports nested scrolling (RecyclerView or NestedScrollView. As such, in your example you should try either changing main_content from a FrameLayout to a NestedScrollView, or conversely change the FrameLayout that forms the root layout of Fragment into a NestedScrollView.
Here is an example:
<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_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/coordinator_layout">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="240dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/collapsing_toolbar_layout"
app:contentScrim="#color/primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/header_image"
android:src="#drawable/header_image"
android:scaleType="centerCrop"
android:contentDescription="#string/header_image"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>