How to get Adview below Viewpager in CoordinatorLayout

android android-recyclerview android-coordinatorlayout

18,206

Solution 1

You can add ViewPager and AdView inside RelativeLayout and specify android:layout_above="@+id/adView" property to ViewPager so that adView doesn't block the ViewPager contents.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.candyx.testapp.Activity">

    <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:layout_above="@+id/adView">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/main_button_background">

            <android.support.v7.widget.Toolbar
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"/>

            <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:tabIndicatorColor="@color/colorTabIndicator"
                app:tabIndicatorHeight="3dp"/>

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

    <com.google.android.gms.ads.AdView
        android:id="@id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_ad_unit_id"
        android:layout_gravity="center|bottom"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

Solution 2

Put ViewPager and Adview inside a another LinearLayout as below:

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
     <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <com.google.android.gms.ads.AdView
            xmlns:ads="http://schemas.android.com/apk/res-auto"
            android:id="@+id/adView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            ads:adSize="BANNER"
            ads:adUnitId="@string/banner_ad_unit_id"
            android:layout_gravity="center|bottom"
            />
    </LinearLayout>

Solution 3

This worked for me : just put inside the ViewPager the app:layout_behavior :

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

Solution 4

I tried the answer by @AvishekV but that didn't solve my problem. But I took THE IDEA of putting CoordinatorLayout and Adview inside a parent layout which in my case was ConstraintLayout. Below is the structure

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <android.support.design.widget.CoordinatorLayout
       android:id="@+id/content"
       android:layout_width="0dp"
       android:layout_height="0dp"
       android:fitsSystemWindows="true"
       app:layout_constraintBottom_toTopOf="@+id/adView"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent">

        <android.support.design.widget.AppBarLayout>
           //CollapsingToolbarLayout
           //ConstraintLayout, if you need to put anything inside collpasingtoolbar
           //Toolbar
           //TabLayout
        </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>

<com.google.android.gms.ads.AdView
    android:id="@+id/adView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    ads:adSize="SMART_BANNER"
    ads:adUnitId="your adunit id"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

View more solutions

18,206

Author by

Jacques Krause

Updated on June 04, 2022

Comments

Jacques Krause almost 2 years

At the moment the AdView is appearing inside the ViewPager so its blocking the content in the app. How can I get the AdView to appear below the ViewPager and not inside.

I have tried to put the AdView in a RelativeLayout below the ViewPager but then the AdView doesn't show at all.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.candyx.testapp.Activity">

<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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/main_button_background">

        <android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <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:tabIndicatorColor="@color/colorTabIndicator"
            app:tabIndicatorHeight="3dp"/>

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

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_ad_unit_id"
        android:layout_gravity="center|bottom"/>

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

</LinearLayout>

Audumbar almost 9 years

I edited my answer. Forgot to mention about LinearLayout earlier.
Jacques Krause almost 9 years

The problem with this is that now it pushes the content up and under the toolbar about the banner size so I think its the new coordinator layout that doesn't want to play along. I don't really want it nested inside the viewpager but I guess only solution so far is to put banner size bottom padding on my recyclerview
Jacques Krause almost 9 years

Nope it's still inside the viewpager at the bottom but it's ok ill just use the bottom padding on the recyclerview so when you scroll to the bottom there is a blank space for the ad
Abhishek V almost 9 years

Did u add this line android:layout_above="@+id/adView" to CoordinatorLayout? There is no way it is inside ViewPager . I have tested in a sample app :)
Jacques Krause almost 9 years

Oops I didn't see that. Yes now it works perfect thanks alot
Harsha over 8 years

please provide some xml layout for view pager circular page indicator and below recycler view with floating action button sample
irudyak over 8 years

consider also adding android:layout_centerHorizontal="true" to center your add banner.
kirtan403 over 8 years

It works but I am getting a white overlay in the status bar like shown in this question: stackoverflow.com/q/32428700/1820644
emboole almost 7 years

Thanks a lot for this, you deserve a nobel price.
Abhishek V almost 6 years

@40-Love Share the full layout
drmrbrewer almost 6 years

I'm finding that the main activity content is pushed up by the height of the adview, so that the top of the activity is under the toolbar. Any hints?
Abhishek V over 5 years

@drmrbrewer Can you share your layout structure?
drmrbrewer over 5 years

@AbhishekV I'm finding it difficult to know how to do this in a comment, so I'll summarise it. I have RelativeLayout at top level, and within that: Toolbar, CoordinatorLayout and AdView. Within the CoordinatorLayout I have a NestedScrollView and within that a LinearLayout with my main content for the activity. I have used your android:layout_above trick in the CoordinatorLayout to put it above the AdView, but this pushes it under the Toolbar. I can't help noticing that your Toolbar is within the CoordinatorLayout (mine is outside).
drmrbrewer over 5 years

Maybe I need an android:layout_above in the Toolbar to explicitly put it above the CoordinatorLayout? I also wonder why we have to use a RelativeLayout and be explicit about ordering like this... why can't we just lay out elements in the order we want, in a LinearLayout?
drmrbrewer over 5 years

Solution was to add android:paddingTop="?attr/actionBarSize" to CoordinatorLayout
Ganesh Chowdhary Sadanala over 4 years

This is the best answer. Worked for me!
NeoFar about 3 years

Excellent answer!