CODEWITHSUNDEEP
android
Skizo-ozᴉʞS ツ
Skizo-ozᴉʞS ツ

Reputation: 20626

ViewPager under the ToolBar not working

I'm trying to add a ViewPager under my ToolBar the thing is that the ViewPager is on the top of the layout eventhough if I put layout_below="@+id/toolBar that is the id from my ToolBar

This is my activiy_main.xml

<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=".MainActivity">

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerMainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/containerView">

        <android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?android:attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:id="@+id/toolBar"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark"
            />
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolBar"
            android:background="?attr/colorPrimary"
            android:elevation="6dp"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_below="@id/tab_layout"/>

    </FrameLayout>
    <android.support.v7.widget.RecyclerView
        android:layout_width="290dp"
        android:layout_height="match_parent"
        android:id="@+id/recyclerView"
        android:scrollbars="vertical"
        android:background="#FFFFFF"
        android:layout_gravity="left"
        />
</android.support.v4.widget.DrawerLayout>

Note: on this layout I also added the NavigationDrawer

This is the output:

enter image description here

What I'm doing wrong?

I've created this style

<style name="tabs" parent ="ThemeOverlay.AppCompat.Dark.ActionBar">            
        <item name="tabSelectedTextColor">@color/blue</item>
    </style>

And now I don't see the "shadow" because I've also deleted this line android:background="?attr/colorPrimary" but now I see the tabs white and I only see the selector line.

Upvotes: 2

Views: 461

Answers (2)

mfaisalhyder
mfaisalhyder

Reputation: 2284

Second thing you can also try is to have a linear-layout containing View Pagers directly inside a Main parent DrawerLayout. i've implemented it this way in my app. 

<android.support.v4.widget.DrawerLayout 
android:id="@+id/tab_layout_main_id"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <include
        android:id="@+id/app_bar" //app bar here.
        layout="@layout/app_bar" />

    <com.faisal.soccerworld.tab_layout.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager // here's view pagers.!
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

<fragment // this is navigation drawer.!
    android:id="@+id/fragmentNavDrawerID"
    android:name="com.faisal.soccerworld.tab_layout.NavigationDrawerFragment"
    android:layout_width="@dimen/DrawerWidth"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:layout="@layout/fragment_navigation_drawer"
    tools:layout="@layout/fragment_navigation_drawer" />

</android.support.v4.widget.DrawerLayout>

Upvotes: 1

Blackbelt
Blackbelt

Reputation: 157437

What I'm doing wrong?

The parent for both the items is <FrameLayout, and the latter stacks its children one on top of the other. You have to use a <RelativeLayout

Upvotes: 1

Related Questions