ViewPager with Toolbar and TabLayout has wrong height

tablayout with viewpager in android
custom tab layout in android example
android tab layout with fragments
tablayout in android
viewpager androidx
viewpager wrap_content height not working
viewpager height match_parent not working
android viewpager with tabs

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>

ViewPager with Toolbar and TabLayout has wrong height, 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� Usually, ViewPager is used to achieve a tabbed view by combining the TabLayout and collection of Fragments. But if you want to have static views without the Fragment class, you can do it using RecyclerView adapter class. Below is an example of implementing Intro Slides using ViewPager2.

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.

ViewPager with Toolbar and TabLayout has wrong height, 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� Hello, first of all thank you for this improvement of AppBarLayout. I managed to create a simple activity with collapsing toolbar and a nestedscrollview under it. I have encountered a problem when using tablayout: everything is setted fi

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>

ViewPager's height in Coordinator layout is more than available, I have a CoordinatorLayout with a Toolbar and a TabLayout inside the And this what I mean when I say that the ViewPager has the wrong height. Android Tablayout example with new Status bar background color. (Large preview) Android Tablayout with Toolbar(ActionBar) menu items. In this section, you will learn how you can show different Toolbar(ActionBar) menu items every time you swipe left and right using Android ViewPager.

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!

TabLayout, Set whether this TabLayout will have an unbounded ripple effect or if ripple will be bound to the tab item size. void, setupWithViewPager(ViewPager viewPager). Android TabLayout ViewPager Project Structure. Android TabLayout ViewPager Example Code. The activity_main.xml, MainActivity.java and ViewPagerAdapter.java classes are unchanged. Let’s look at the Fragments now. The layout of the fragments is given below. fragment.xml

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.

Tabs - Material Design, TabLayout>. TabItem s can then be added as children of the TabLayout and adjusted as needed: xxxxxxxxxx After the adapter has been set on the ViewPager, synchronize the TabLayout like so: xxxxxxxxxx. tabLayout. Height, N/A, N/A, 48dp (inline text) or 72dp (non-inline text and icon). Tab mode isInlineLabel, false� The AppBarLayout allows the Toolbar and other views (such as tabs provided by TabLayout) to react to scroll events in a sibling view marked with a ScrollingViewBehaviour . In the Above XML file ViewPager is a sibling view to appbar and to register the scroll behaviour the ViewPager is marked with a @string/appbar_scrolling_view_behavior .

How to Change Tab Indicator height in Android?, Android TabLayout provides a horizontal layout to display tabs on the screen. In the activity_main.xml file, we have used Toolbar, ViewPager, etc. <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item >� I tried to replicate the same behavior of coordinator layout with MotionLayout and i got almost the same design but i faced some issues . My design contains Motion Layout as a parent view and inside it it contains some child views and Ta

android – ViewPager with Toolbar and TabLayout has wrong height , you can try to add a LinearLayout between AppBarLayout and ViewPager. It works for me. :) share|improve this answer answered Jun 7 '16 at� A TabLayout can be setup with a ViewPager in order to: Dynamically create TabItem s based on the number of pages, their titles, etc. Synchronize the selected tab and tab indicator position with page swipes

TabLayout Example using ViewPager and Fragments in Android , This is material design and it came with Android Lollipop (5.0). Though we Now since we will be using Android Toolbar and TabLayout classes to show tabs , lets remove the action bar from layout by using styles, return inflater.inflate(R. layout.fragment_tab1, container, false); android:elevation="6dp". If you are using the latest android application then you have noticed that now days android is following a design pattern. This is material design and it came with Android Lollipop (5.0). Though we can still use this design pattern for the older versions (>4.0) by using the support libraries. One of the component of … Continue reading TabLayout Example using ViewPager and Fragments in Android

Comments
  • Can you shoot screen your app?
  • @NguyễnTrungHiếu Yeah, sure. Added a screen.
  • @Enrichman did you find out the solution to your problem?Asking because i am facing the exact same issue. :(
  • @Droidwala nope, in the end I've changed slightly the design.. :(
  • Looks like that's the only option left..what design change you made then in your case?Moved logout somewhere else?
  • This will have side effect of sticky action bar, will not hide on scroll.
  • Still the same. As you can see from the screenshot the logout button should be at the bottom, but the height of the fragment is more of the space available, and so all the view is scrollable. (I've added a screenshot from the design view)
  • Wrong answer, it works because view pager has no behavior
  • This worked for me too. Thank you