CODEWITHSUNDEEP
android
MrG
MrG

Reputation: 169

ViewPager taking space below the bar

I have a layout coded like below

<?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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activities.HomepageActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/header_copy">
    <!--android:background="#072120"-->
        <!--android:background="@drawable/header_copy-->

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:titleTextColor="#FFFADE09"
            app:titleMarginStart="100dp"
            app:titleTextAppearance="@style/TabLayoutTextStyle"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            >
            <!--android:background="#FF008080"-->

        </android.support.v7.widget.Toolbar>

        <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"
            app:tabTextColor="#FFFADE09"
            app:tabSelectedTextColor="#F7FFFFFF"
            app:tabTextAppearance="@style/TabLayoutTextStyle" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

But this result the below UX

enter image description here

The viewPager is taking space below the bottom bar. But I do not want this behaviour. I want the viewPager take only that visible screen space. Please help me here.

Upvotes: 1

Views: 550

Answers (2)

Raja
Raja

Reputation: 2815

here you are using android.support.design.widget.CoordinatorLayout, the topmost behavior of CoordinatorLayout is appbar_scrolling_view_behavior so is getting extra space in bottom equivalent to the android.support.design.widget.AppBarLayout size.

in this case, you should use LinearLayout or RelativeLayout instead of android.support.design.widget.CoordinatorLayout

Upvotes: 0

Brandon Cheng
Brandon Cheng

Reputation: 84

Since your tab bar will always be at the top, and the rest of the views will be under the toolbar, you can replace CoordinatorLayout for a LinearLayout with orientation="vertical" fixes the overflowing issue.

Upvotes: 1

Related Questions