I would like to let the Toolbar collapse when the user scrolls in one of the TabLayout's tabs (supplied by ViewPager).
This is the functionality I desire:
However, my layout does not only not scroll, but also cuts off content at the bottom (to be exact, it cuts off 48dp - the height of a toolbar):
I use the ViewPager to display each Fragment as a tab. The Fragments consist of a simple ScrollView holding a TextView. Here is the 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/ueber_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/ueber_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#android:color/white"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/ueber_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Each fragment has the following layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/ueber_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#000000"
android:linksClickable="false"
android:textColorLink="#000000"
android:fontFamily="serif"
android:padding="16dp"/>
</ScrollView>
The ViewPager is set up by a ViewPagerAdapter:
ViewPager viewPager = (ViewPager) findViewById(R.id.ueber_viewpager);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new ContentFragment(), "Über");
adapter.addFrag(new ContentFragment(), "Impressum");
adapter.addFrag(new ContentFragment(), "Lizenzen");
viewPager.setAdapter(adapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.ueber_tabLayout);
tabLayout.setupWithViewPager(viewPager);
Use a NestedScrollView instead of a ScrollView.
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
When the user scrolls in to the fragment, hide the toolbar:
getSupportActionBar().hide();
When they scroll back to the top, show the toolbar:
getSupportActionBar().show();
Related
image1
image2
I have searched possible ways of implementing something like what can be seen in the images above but couldn't find any help. let's say I have 4 fragments {dashboard, heart, notifications, info} the bottom navigation will show on all fragments same for the Toolbar also ... for TabLayout it must show only on HeartFragment with 2 tabs (Page1, Page2).
I tried this way but did not work and app crashed :(
fragment_heart.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:id="#+id/OSFA"
android:background="#color/background_wb"
tools:context="ChatsFragment">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:background="#color/color_primary"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<com.google.android.material.tabs.TabLayout
android:id="#+id/main_tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/main_tab_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout"
tools:ignore="MissingConstraints">
</androidx.viewpager.widget.ViewPager>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/chat_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="#layout/item_chatlist"
android:layout_marginTop="106dp"
/>
HeartFragment.java:
viewPager = view.findViewById(R.id.main_tab_pager);
tabLayout = view.findViewById(R.id.main_tab);
assert getFragmentManager() != null;
TabsAccessorAdapter adapter= new
TabsAccessorAdapter(getFragmentManager());
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
I would like to make profile view (see below).
Currently I have the view with profile photo and two tabs (Diary and Friends).
This is my activity layout which contains two tabs.
<RelativeLayout
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:background="#color/base_background"
android:id="#+id/app_bar">
<include layout="#layout/dog_profile" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/dog_header"
android:background="#color/base_background"
app:tabGravity="fill"
app:tabMode="fixed" />
</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:background="#color/primary"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
This my diary fragment but I cant see anything within the diary fragment. Its probably on the top-left.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_below="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:background="#color/accent"
android:layout_alignParentBottom="true"/>
<TextView
android:id="#+id/tv_no_memories"
style="#style/NoItemsStyle"
android:text="#string/no_memories" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/FabStyle"/>
</RelativeLayout>
I have no idea what I should change that I could see the content inside the fragment.
In my activity I am setting the view pager like this
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new DogDiaryFragment(), tab1);
adapter.addFragment(new DogFriendsFragment(), tab2);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
Thanks for any advice
I solved by changing the relative layout to the linear layout with vertical orientation in the activity xml.
I have a transparent SlidingTabLayout embedded within my Toolbar and a ViewPager below.
Everything works fine, functionally. However, the SlidingTabLayout isn't showing up in the bottom left corner of the Toolbar. Instead, it is floating in the middle and to the right:
Here is my Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/thunderstorm2"
android:padding="0dp">
<com.mjh.android.weathertestlayout.SlidingTabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#88ffffff"
android:paddingLeft="0dp"
app:tabTextAppearance="#style/TextAppearance.AppCompat.Small">
</com.mjh.android.weathertestlayout.SlidingTabLayout>
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffcccc">
</android.support.v4.view.ViewPager>
</LinearLayout>
And here is the accompanying code:
adapter = new ViewPagerAdapter(getSupportFragmentManager(), 3);
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
tabs = (SlidingTabLayout) findViewById(R.id.tab_layout);
tabs.setDistributeEvenly(true);
tabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
#Override
public int getIndicatorColor(int position) {
return getResources().getColor(R.color.gray);
}});
tabs.setBackgroundColor(getResources().getColor(R.color.clear));
tabs.setViewPager(pager);
Any idea how to get the SlidingTabLayout back to the lower left within my Toolbar?
I've tried it on numerous devices and emulators, but it remains the same.
I suggest you to nest your SlidingTabLayout inside a RelativeLayout.
Then you can use android:layout_alignParentBottom and android:layout_alignParentLeft to place it at the bottom-left corner of the Toolbar.
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/thunderstorm2"
android:padding="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.mjh.android.weathertestlayout.SlidingTabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#88ffffff"
android:paddingLeft="0dp"
app:tabTextAppearance="#style/TextAppearance.AppCompat.Small"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true">
</com.mjh.android.weathertestlayout.SlidingTabLayout>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffcccc">
</android.support.v4.view.ViewPager>
I have an activity with a drawer layout and a toolbar is included as follows:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<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.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
>
</include>
<!-- The main content view -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- The navigation drawer list-->
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
The toolbar looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/background_floating_material_dark"
android:elevation="4dp"
android:paddingTop="1dp"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
To this activity I keep on adding/replacing fragments #id/frame_container
Now I have a situation where I have a fragment with 2 tabs, which in turn have recycler views fed to a view pager:
And I am setting it up in java as follows:
TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.tab_layout2);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
viewPager = (ViewPager) rootView.findViewById(R.id.pager2);
adapter = new MyFragmentAdapter(
getFragmentManager(), 2);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
Layout of this Fragment:
<RelativeLayout ...
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.view.ViewPager
android:layout_marginTop="#dimen/abc_action_bar_stacked_max_height"
android:id="#+id/pager2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout"
/>
</RelativeLayout>
The fragments in the view pager have the recycler view.:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/listViewPO"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="2px">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
The problem is the action bar is not hiding when I try to scroll. I am not able to figure out the issue. I have spent days with this. Please help!
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.