As you can see in the image. These two are not aligned properly. I am not able to understand why this is happening.
My toolbar is in Coordinator Layout in app_bar_main.xml and my Tab Layout is in fragment_main. I didn't add the tab layout in coordinator layout because I don't want to show it in all my views, just in my fragment main file.
My code in app_bar_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"
xmlns:tools="http://schemas.android.com/tools"
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:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Code in fragment_main.xml:
<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"
android:fitsSystemWindows="true"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:id="#+id/tabs"
android:backgroundTint="#FFFFFF"
app:tabMode="fixed"
app:tabGravity="fill"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_pager_1">
</android.support.v4.view.ViewPager>
</FrameLayout>
Can you tell what I am doing wrong?
Image
For those who were not able to solve this.
I was able to solve it through an approach.
I added the above code in Main Activity and then set the visibility of tablayout and Toolbar in other fragments as GONE and in fragment which I want it to enable as VISIBLE.
To set visibility as gone you do:
TabLayout tabLayout = (TabLayout) getActivity().findViewById(R.id.tabs);
tabLayout.setVisibility(View.GONE);
ViewPager viewPager = (ViewPager) getActivity().findViewById(R.id.view_pager_1);
viewPager.setVisibility(View.GONE);
And to set it as visible just replace GONE with VISIBLE.
app_bar_main.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"
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:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<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 -->
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
fragment_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="#color/empty_area"
app:tabSelectedTextColor="#android:color/white"
app:tabIndicatorColor="#android:color/white"
android:background="#color/colorPrimary" />
<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" />
<View
android:id="#+id/drop_shadow"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_below="#+id/tab_layout"
android:background="#drawable/shadow_bottom" />
</RelativeLayout>
The other way, as you mentioned is to put the tab layout inside the AppBarLayout in app_bar_main.xml
Related
I am using tablayout and in the fragment there are recyclerviews... the problem is that the tabbar is scrolling with the recyclerview and i want the tablayout fixed(it should not scroll with the scrolling of the recyclerview), also it was working just fine with a listview in the fragment..
The below is my layout..(main_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:orientation="vertical"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
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/drawer_layout_toolbar"
style="#style/Widget.Styled.ActionBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:elevation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/drawer_layout_content_main_tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabGravity="fill"
app:tabIndicatorColor="#ffffff"
app:tabMode="fixed"
app:tabSelectedTextColor="#ffffff"
app:tabTextColor="#color/white"
app:tabBackground="#color/colorPrimary"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/drawer_layout_content_main_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
(recyclerview-layout)
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:clipToPadding="false"
android:scrollbars="vertical" />
</android.support.v4.widget.SwipeRefreshLayout>
Try removing this line
app:layout_behavior="#string/appbar_scrolling_view_behavior" in TabLayout tag.
Why extra space in bottoms gets considered in screen calculation when i use CoordinatorLayout and not when i use RelativeLayout.
see the blue part which is been added in Coordinator layout at the bottom.
<?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="false"
tools:context=".MainActivity.controller.MainActivityNew">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:id="#+id/appbar"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
app:layout_scrollFlags="scroll|enterAlways"
android:background="?attr/colorPrimary"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:layout_below="#+id/toolbar"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/frame_container"
android:background="#android:color/white"
android:layout_width="fill_parent"
android:layout_below="#+id/appbar"
android:layout_height="match_parent"
/>
</android.support.design.widget.CoordinatorLayout>
i am adding fragments to the FrameLayout which has FAB. in case of CoordinatorLayout my FAB button gets hidden under navigation menu button.
what could be possible solution to this. or why this extra space gets added to screen layout and how to avoid this extra bottom space.?
Use this
In your Toolbar you have added app:layout_scrollFlags
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:titleTextColor="#android:color/white" />
Remove that scrollFlags in Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
There is no need to use layout_below in CoordinatorLayout
Avoid to use layout_below.
Here I have added complete code check this
<?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="false">
<android.support.design.widget.AppBarLayout
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="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I'm trying to add simple TabLayout on my application, but it doesn't visible, view pager work fine
this layout is toolbar_layout
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:titleTextColor="#ffffff"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/tabsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
and my main layout is:
<?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:background="#drawable/content_background">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
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 layout="#layout/application_toolbar"/>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="-25dp"
android:layout_marginRight="-25dp"
/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header"
app:menu="#menu/drawer"/>
<com.lapism.searchview.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
as i said view pager work fine, but tabs not visible on my application
TabLayout should not be in Toolbar.
Check this repository as sample of using CoordinatorLayout, DrawerLayout, Toolbar, TabLayout.
Here is activity_main.xml and include_list_view.xml.
The view hierarchy is like this:
DrawerLayout
- CoordinatorLayout
- AppBarLayout
- Toolbar
- TabLayout
- ViewPager
- NavigationView
Main 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:background="#drawable/content_background">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
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 layout="#layout/application_toolbar"/>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
<!-- Change this -->
android:layout_height="0dp"
android:layout_weight="1"
<!-- Code -->
android:layout_marginLeft="-25dp"
android:layout_marginRight="-25dp"
/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header"
app:menu="#menu/drawer"/>
<com.lapism.searchview.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
The android:layout_height of the LinearLayout is set to match parent that hides the TabLayout. Change android:layout_height to 0dp and set android:layout_weight to 1. I think this may solve your problem.
That's because you put your TabLayout inside the Toolbar.
Try to change your toolbar_layout to this:
<android.support.design.widget.AppBarLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:titleTextColor="#ffffff"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>
Try this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent"
android:layout_width="match_parent" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/action_bar"
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"/>
<!-- Tabs-->
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
app:tabMode="fixed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabTextColor="#d3d3d3"
android:minHeight="?attr/actionBarSize"
/>
</android.support.design.widget.AppBarLayout>
</FrameLayout>
The FrameLayout is the main content view of the activity.
I actually found someone else's answer here.
Tabs of TabLayout not showing
tabLayout.post(new Runnable() {
#Override
public void run() {
tabLayout.setupWithViewPager(viewPager);
}
});
Hope this helps
I have some problem with coordinator layout. I have activity toolbar inside appBarLayout with parent CoordinatorLayout (I want to make toolbar hideable) and fragment with tablayout inside appBarLayout and viewPager. Here is activity's 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_container"
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:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
And it's fragment's 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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"/>
</android.support.design.widget.CoordinatorLayout>
For now, I have this situation where the toolbar is somewhere.
If I change coordinator layout inside activity to linear layout I get toolbar visible, but as you can imagine with no hiding option.
Actually, I have play with coordinator layout a lot:hiding and showing toolbar in a few cases such parallax and others - https://github.com/Iamtodor/toolbars, so you can be sure, I have a little understand how it works :)
Also, I had wantch this sources:
- https://github.com/codepath/android_guides/wiki/Handling-Scrolls-with-CoordinatorLayout
- https://github.com/codepath/android_guides/wiki/Using-the-App-ToolBar#using-toolbar-as-actionbar
- https://github.com/chrisbanes/cheesesquare
But there is all examples when tablayout exists inside same appbarlayout with toolbar.
How can I fix it?
Here is what worked for me:
Fragment XML:
<android.support.design.widget.AppBarLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap" >
<include layout="#layout/include_time_line"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
style="#style/TabLayout"
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_gravity="bottom"
android:background="#color/egg"
android:elevation="0dp"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabIndicatorColor="#fcd131"
app:tabPadding="0dp"
app:tabIndicatorHeight="4dp"/>
</android.support.design.widget.AppBarLayout>
<com.woot.woot.productbrowse.ui.ConfigurablePagingViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<FrameLayout
android:id="#+id/selectByWeightKeyboard"
android:layout_width="match_parent"
android:layout_height="#dimen/weight_keyboard_container_height"
android:background="#color/keyboard"
android:clipToPadding="false"
android:elevation="16dp"
android:clickable="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<include layout="#layout/add_product_by_weight_keyboard" />
</FrameLayout>
Activity XML:
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/layout_done_button"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:elevation="8dp"
tools:visibility="visible"
android:background="#color/ice">
<Button
android:id="#+id/button_done"
style="?android:attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="#dimen/button_height"
android:layout_marginRight="#dimen/button_done_horizontal_margin"
android:layout_marginLeft="#dimen/button_done_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
android:background="#drawable/rounded_green_button"
android:text="#string/done"
android:textSize="#dimen/button_text_size"
android:textAllCaps="true"
android:textColor="#color/egg" />
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:contentDescription="#string/drawer_content_description"
app:menu="#menu/menu_navigation_product_browse" />
I have a ViewPager below an AppBarLayout (with a Toolbar and a TabLayout). I cannot understand why the height of the loaded fragments is more than the available space, even if there are no elements so big, making the tab scrollable.
This is the main layout 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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
As you can see in my Fragment I have a Button with a layout_alignParentBottom but I guess it's stretching the height of the viewpager too much.
Here the layout from the design view:
you can try to add a LinearLayout between AppBarLayout and ViewPager. It works for me. :)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
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" />
</LinearLayout>
Adding a padding to the ViewPager did the trick for me:
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Note that the padding has the exact same size as the toolbars height.
Instead of ?attr/actionBarSize, ?actionBarSize is also valid.
Try with this.
Here you need to declare android:fillViewport="false" property in Tab Bar.
<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: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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Do change here in Tab Bar.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="false" />
EDIT 1:
This is what working for me Refer this.
<?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:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="false" />
</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" />
</android.support.design.widget.CoordinatorLayout>
If you need a fixed toolbar without scrolling, then you can remove CoordinatorLayout and AppBarLayout from the layout design and use RelativeLayout instead. It is support library bug, and has no solution upto this date. You can simply use following layout code for ViewPager along with Toolbar and TabLayout. ViewPager won't overflow in this case as it has been pointed out in question.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".HomeActivity">
<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/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary"
android:layout_below="#id/toolbar"/>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tabs"/>
</RelativeLayout>
Hope it helps someone!
I have used Relative layout inside of CoordinatorLayout
<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">
<RelativeLayout
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:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="false" />
</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:layout_below="#id/appbar"
/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
You have to keep the TabLayout outside the AppBarLayout.
Something like this.
<android.support.design.widget.AppBarLayout
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/home_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
app:tabGravity="fill"
app:tabIndicatorColor="#color/primary_blue_dark"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/primary_blue"
app:tabTextColor="#color/primary_blue_light"
app:tabTextAppearance="#style/tab_layout_font_style"/>
<android.support.v4.view.ViewPager
android:id="#+id/home_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal"/>
This worked for me.
For me the only sollution that worked with a Coordinator Layout, so that Viewpager layout_height stays within limits was adding layout_behaviour to the Toolbar, like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:popupTheme="#style/AppTheme.AppBarOverlay">
Probably too late for you, but maybe it helps someone else.
This didn't bother me when I started my app, but later when I wanted to add a snackbar on another tab, the snackbar was only visible if I scrolled the page.
I solved this problem by changing android:layout_height="wrap_content" to
android:layout_height="0dp"
and setting
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/tl_WelcomeTabs"
in the ViewPager's XML attributes. 0dp in this case means something like match_constraint.
For example this layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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.TabLayout
android:id="#+id/tl_WelcomeTabs"
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"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mission"
/>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vp_welcomePager"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/tl_WelcomeTabs"
/>
</android.support.constraint.ConstraintLayout>
Left image: android:layout_height="wrap_content" right image: android:layout_height="0dp"
tldr;
Change
android:layout_height="wrap_content"
to
android:layout_height="0dp"
and set layout_constraintBottom_toBottomOf and layout_constraintBottom_toBottomOf in the ViewPager's XML attributes.
Override behavior of your view pager wit, and add your view pager to this.layouts
override fun onDependentViewChanged(parent: CoordinatorLayout, child: View, dependency: View): Boolean =
super.onDependentViewChanged(parent, child, dependency).also {
layouts.forEach { it.setPadding(it.paddingLeft, it.paddingTop, it.paddingRight, it.top) }
}