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);
}
Related
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 have a question regarding hiding the toolbar with tabs and unfortunately I have not been able to find my answer. After doing some research and implementing my options I found that just by adding app:layout_scrollFlags="scroll|enterAlways"/> inside the toolbar xml should do the trick which it does, but unfortunately it only hides the toolbar when i scroll it up myself and not when scrolling the list (located inside the tabs) up and down. Also, I noticed when I scroll the tool bar up it hides the very top part where the time is located. For reference I created my tab toolbar using this tutorial: http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/
Please let me know if you have any ideas or would like me to provide more information. Thank you in advance!
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=".MainActivity">
<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:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
JAVA:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
//Some other code
}
Hide/Show Toolbar when scrolling another View with CoordinatorLayout does not work with ListView/GridView by default. You need to enable NestedScrolling on them. Like the code below
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
listView.setNestedScrollingEnabled(true);
}
This means it only works with Lollipop and above devices.
Credit to Gabriele
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");
}
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>