Add Footer to CoordinatorLayout

Question

I want to add a Footer to CoordinatorLayout which contains a TabView + ViewPager.

Here is the main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="com.entree.entree.activity.StoreActivity">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/appbar_padding_top"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/black"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_action_tray"
                    android:layout_gravity="right"
                    android:layout_marginRight="15dp"
                    android:scaleType="centerInside"/>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_action_find"
                    android:layout_gravity="right"
                    android:scaleType="centerInside"
                    android:layout_marginRight="10dp"
                    />
            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:background="@android:color/white"
                app:tabIndicatorColor="#00000000"
                style="@style/MyCustomTabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

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


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

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:visibility="gone"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_search"
        app:menu="@menu/activity_search_drawer" />
</android.support.v4.widget.DrawerLayout>

And here is the Xml Content:

<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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/container"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.entree.entree.activity.StoreActivity$PlaceholderFragment">


<GridView
    android:id="@+id/gridView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:numColumns="1"
    android:stretchMode="columnWidth">

</GridView>

<LinearLayout
    android:id="@+id/llTray"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="3"
    android:visibility="gone"
    android:gravity="center_vertical"
    android:layout_centerVertical="true"
    android:background="@color/divider"
    android:layout_alignParentBottom="true">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="left"
        android:gravity="left"
        android:layout_height="wrap_content">

        <ImageButton
            android:id="@+id/btnTray"
            android:src="@drawable/ic_action_tray_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_gravity="center_horizontal|center_vertical"
        android:gravity="center_horizontal|center_vertical"
        android:layout_weight="1"
        android:text="@string/view_tray" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:gravity="right"
        android:layout_marginRight="10dp"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tvTotalPrice"
            android:layout_width="wrap_content"
            android:textSize="20sp"
            android:textStyle="bold"
            android:text="@string/Rs"
            android:layout_height="wrap_content" />
    </RelativeLayout>
</LinearLayout>

The footer is in xml content.

If i remove:

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

in the main Xml View Pager, footer appears , else it's not shown.

How can i get the footer visible?

Answer 1

You already have:

<GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:numColumns="1"
        android:stretchMode="columnWidth" />

With match_parent for both height and width which it doesn't seems to be good.

Also, Perhaps you will need to show that ViewPager with NestedScrollView for scrolling the content in future.(needs a trick, but you can achieve this).

So, my suggest is, you should be able to show that footer all the time in the below of that ViewPager by adding it like this:

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

        <!-- Footer aligned to bottom -->
        <RelativeLayout
            android:id="@+id/footer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="#FC0"
            android:gravity="center"
            app:layout_anchor="@id/main_content"
            app:layout_anchorGravity="bottom">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:text="Fixed Footer"
                android:textColor="#000"
                android:textSize="20sp" />

        </RelativeLayout>

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

This should show the footer all the time (even when ViewPager is collapsing).

---

Or if you want to show it in your ViewPager:

you should add this in your contents:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

Which means, it will put the contents below the AppbarLayout

Anyways, your contents problem is coming from that GridView like i said, it will match all the content and you don't have ScrollView or even NestedScrollView to show the other contents.