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
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);
}
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've been trying to use the new design library and I have a toolbar instead of deprecated action bar. The problem is that the toolbar takes up the whole area in in the activity. I've been trying out different examples and replaced my layout files with them, I've tried different values for width and height. I have no clue why it's acting like this. and none works! What may be causing this?
Any help is highly appreciated.
activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
<include
android:id="#+id/tool_bar"
layout="#layout/app_bar"
></include>
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_draw"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer" />
</android.support.v4.widget.DrawerLayout>
main activity :
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
Toolbar toolbar;
View root;
NavigationView nav_draw;
DrawerLayout drawer_layout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
root = getLayoutInflater().inflate(R.layout.activity_main, null);
setContentView(root);
setupToolbar();
drawer_layout = (DrawerLayout)findViewById(R.id.drawer_layout);
nav_draw = (NavigationView) findViewById(R.id.nav_draw);
nav_draw.setNavigationItemSelectedListener(this);
getSupportFragmentManager().beginTransaction()
.replace(R.id.container, new Fragment())
.commit();
}
private void setupToolbar(){
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
// Show menu icon
final ActionBar ab = getSupportActionBar();
ab.setHomeAsUpIndicator(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
ab.setDisplayHomeAsUpEnabled(true);
}
}
app_bar layout file
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
I have alse used this links layouts:
http://hmkcode.com/material-design-app-android-design-support-library-appcompat/
DrawerLayouts should have two childs:
the content child;
the navigation drawer child,
in this particular order. By <include>ing your Toolbar you are adding a third child and that is not allowed. You should merge the Toolbar and your content frame in a single layout:
<android.support.v4.widget.DrawerLayout>
<LinearLayout
android:id="#+id/main_container"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/app_bar" />
<RelativeLayout android:id="#+id/container" />
</LinearLayout>
<android.support.design.widget.NavigationView />
</android.support.v4.widget.DrawerLayout>
Just add this toolbar to your container, the code below worked perfectly for me:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.v7.widget.Toolbar
android:id="#+id/mainToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true">
</android.support.v7.widget.Toolbar>
</RelativeLayout>
You can use toolbar just as a normal view. So you dont need to use settoolbar method.
Simply write following code in you layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/mainToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:background="#drawable/bottom_line_shape">
//here you can add as many views as you want just like a simple layout can
</android.support.v7.widget.Toolbar>
</RelativeLayout>
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>