CODEWITHSUNDEEP
androidandroid-fragmentsandroid-viewpager
saprative
saprative

Reputation: 421

View pager is overlapping the tab fragments vertically

I am using Viewpager to browse through the tabs. But my viewpager is overlapping the top of the fragment due to which the top of all the fagments are not visible. Adding padding on the top does the work but is there any better way to do it rather than giving padding on the next view.

Layout

<?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"
       tools:context=".Activity.MainActivity">

<android.support.design.widget.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:fitsSystemWindows="true"
   android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

   <android.support.design.widget.TabLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:id="@+id/tabs">
   </android.support.design.widget.TabLayout>

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


<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#ffffff">

</android.support.v4.view.ViewPager>

</RelativeLayout>

Activity

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // ActionBar

    final ActionBar actionBar = getSupportActionBar();
    actionBar.setDefaultDisplayHomeAsUpEnabled(true);


    // ViewPage: Slider that helps to create a page that we can swipe
    PagerAdapter pagerAdapter = new TabPagerAdapter(getSupportFragmentManager());
    ViewPager tab = (ViewPager) findViewById(R.id.pager);

    tab.setAdapter(pagerAdapter);

    //Tablayout : Shows the tab bar that helps to find the ViewPager page
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(tab);

}

Upvotes: 1

Views: 1400

Answers (2)

Vishal Puri
Vishal Puri

Reputation: 843

You have used Relative Layout and not defined android:layout_below="@id/appbar_layout" . So I have edited your code. Just copy and paste below code in your xml file. It'll solve your problem.

<?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.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/appbar_layout"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabs">
    </android.support.design.widget.TabLayout>

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


<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/appbar_layout"
    android:orientation="vertical"
    android:background="#ffffff">

</android.support.v4.view.ViewPager>

</RelativeLayout>

Upvotes: 1

Dileep Patel
Dileep Patel

Reputation: 1988

Hope this can help you..

<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.design.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    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">

        <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" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            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="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Upvotes: 1

Related Questions