I am using the new TabLayout introduced in the design support library. I have the code like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/lines_coordinator"
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/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
The problem is, that the tabs overlap the top of the content the fragments display. How can I fix this? I am using the TabLayout like in the examples on Github, so I believe there is no issue with my code. I already have a Toolbar because I use the tabs in a fragment in a navigation drawer, so I removed it from the AppBarLayout.
You need to add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your ViewPager: this is what changes the height of the View to be below the AppBarLayout rather than the full match_parent height.
Related
I'm having a very strange issue using MaterialDesign toolbar and I haven't been able to figure out what's causing it.
I have a toolbar with a custom menu icons which I use in different layouts using <include> I wanted to use the toolbar in another layout without all the icons and menus so I included this in the xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
But the toolbar that shows when on this activity view is the same one I use across other activities. I even tried using a different id name but it still uses the other toolbar and not the one I have included.
The other issue is that, I want to use material design scrolling by using the coordinator layout. While the scrolling works on every other layout, it doesn't work on this particular one when I have the toolbar set. If I remove the toolbar then the scroll works for the view below it. The scroll property app:layout_scrollFlags="scroll|exitUntilCollapsed"on both the toolbar and the view below it. Here's the full code for this layout:
<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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Yourtime.NonSwipeableViewpager
android:id="#+id/profileviewpager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/appbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<FrameLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:id="#+id/profile_container"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="#dimen/profile_tabs_height"
app:tabMode="fixed"
style="#style/MyCustomTabLayout"
app:tabGravity="center"
android:id="#+id/profiletabs" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I will really appreciate if someone can help with either of the questions.
I have search the Stack Overflow beforewise, but haven't found an appropriate answer to my problem.
I have an Android application with the coordinator layout that has a nested ViewPager inside. If I scroll a RecyclerView that is inside of the first fragment in a View pager, the Toolbar is hidden and shown as intended. However, my other fragments in the ViewPager do not have nested scroll, so I would like to show Toolbar if it is hidden on ViewPager page change. I wonder if I can extend the CoordinatorLayout behavior to have it nicely done.
Thanks in advance! I will be happy to provide more details if needed.
The approximate code is (tried to strip all the unnecessary stuff): main_activity.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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tab_layout"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
and a scrolling fragment: fragment.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.CardView
android:id="#+id/add_word_card"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<RelativeLayout
android:id="#+id/add_word_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/highlight">
<!-- some unrelated stuff -->
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_below="#id/add_word_card"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:context=".MainActivity"/>
I have found a couple of related questions like: this or this. But they focus mostly on layout problems, while I want to understand if it is real to have a nice solution to triggering Toolbar movement on demand.
So it seems that the answer is the following: wrap the Toolbar in AppBarLayout and in the code use something like: appBarLayout.setExpanded(false, true);
This does the trick for me.
using material design tablayout +viewpager material design tablayout everything works perfectly but if i m trying to put parent view as ScrollView so that my whole screen can scroll once user try to see tabs fragment content as fragment contains listview so it is getting very low height on small devices.After adding scrollview my fragments of viewpager are not being displayed ?how to overcome in this situation ?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
android:fillViewport="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/tabanim_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/tabanim_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</ScrollView>
i have tried with and without CoOrdinator layout none of them working
I've an Activity with an NavigationDrawer and a Toolbar. I'm facing a problem when i want disappear a toobar when one of child fragment view is scrolled. Everything works fine except that there is some view coming up from the bottom which has the exact same size as the toolbar that is disappearing.
I made an GIF Animation that shows the problem. Due to my reputation i can not post the image directly but this gif and this gif shows the problem
I tried to figure out where this is coming from. It seems that its from my container FrameLayout where my fragment views are placed during runtime. I changed its background to green so i can identify it.
<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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkGreen"
tools:context="org.cddevlib.breathe.MainActivity" />
</LinearLayout>
<fragment
android:id="#+id/navigation_drawer"
android:name="org.cddevlib.breathe.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_navigation_drawer" /> </android.support.v4.widget.DrawerLayout>
This is the Toolbars Layout that is included
<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"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
And finally a snippet from the fragments view that is loaded:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black" >
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
layout="#layout/toolbar" />
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/white"
android:fillViewport="true" >
(...)
Note that i'm including the Toolbar again in that layout because i want different Toolbars for each fragment in my application by hiding / adding the toolbar.
toolbar = (Toolbar) ((View) vw).findViewById(R.id.toolbar);
if (toolbar != null) {
// // for crate home button
activity = (AppCompatActivity) getActivity();
activity.getSupportActionBar().hide();
toolbar.setBackgroundDrawable(new ColorDrawable((ColorUtils.getColorDark(DataModule.getInstance()
.getMainActivity()))));
activity.setSupportActionBar(toolbar);
activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
SOLUTION
So thanks to sanat shukla answer is firgured out that my problem was that i used an AppBarLayout too much in my fragments view. In my fragments view, AppBarLayout was the main layout for all of my components, but it should not! Its intended to hold the toolbar content! Thanks
It's not an issue. It is the cool animation and support provided by android. When you use co-ordinator layout with Toolbar then it shows cool animation when scrolling the list.
The Design library takes this to the next level: using an AppBarLayout
allows your Toolbar and other views (such as tabs provided by
TabLayout) to react to scroll events in a sibling view marked with a
ScrollingViewBehavior
Read from here :
http://android-developers.blogspot.in/2015/05/android-design-support-library.html
If you don't want to hide your toolbar then don't use co-ordinator layout and appbar with toolbar.
Try this for fragment :
<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">
<! -- Your Scrollable View -->
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/white"
android:fillViewport="true" >
<android.support.v4.widget.NestedScrollView/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I have the following main page layout in my app:
<?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.support.v4.view.ViewPager
android:id="#+id/mainPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/app_bar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/actionToolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="#string/app_name"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
The scrollable content is the ViewPager. I use the ViewPager in conjunction with the TabLayout:
ViewPager viewPager = (ViewPager) v.findViewById(R.id.mainPager);
TabLayout tabLayout = (TabLayout) v.findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
All fragments in the ViewPager's adapter has a RecyclerView inside.
When i first scroll up the RecyclerView's content (so that app bar is hidden), then switch to another page of data in the ViewPager and scroll RecyclerView's content down, the app bar is ... invisible.
The main steps leading to this problem:
running on devices with api level 11 or higher (on devices with api level less than 11 all is ok);
Scrolling content up;
Switching to another ViewPager's page;
Scrolling content down to make app bar visible;
app bar is invisible.
Where is my problem? Thanks.
EDIT1: Fragment's toolbar initialization
Toolbar toolbar = (Toolbar) view.findViewById(R.id.actionToolbar);
toolbar.setTitle(toolbarTitleResId);
toolbar.inflateMenu(menuResId);
toolbar.setOnMenuItemClickListener(listener);
EDIT2: Fragment's layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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/actionToolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
<View
android:id="#+id/anchor"
android:layout_height="8dp"
android:layout_width="match_parent"
android:background="#drawable/shadow_gradient_drawable"
android:layout_below="#+id/actionToolbar">
</View>
<android.support.v7.widget.RecyclerView
android:id="#+id/verticalRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/anchor"/>
</RelativeLayout>
I was able to reproduce this on my API 16 device (still no issues on API 22). This is definitely a bug in the AppBarLayout, however, there is a quick work around. This is only an issue when the AppBarLayout becomes completely hidden. Add a view with 1dp height to the AppBarLayout and everything should work without really being noticeable on the view.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!-- Toolbar and tab bar code -->
...
<!-- Add this -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorPrimary" />
</android.support.design.widget.AppBarLayout>
We can also apply this solution for Switching to another ViewPager's page
appBarLayout.setExpanded(true, true);
Here 2nd parameter If it is true it AppBarLayout will expand with animation.