Collapsible Toolbar - Make Fragment Footer Always Visible in Android

Question

I am making an app that has a ProfilePage with three fragments - About | Posts | Gallery, and I am using a collapsible toolbar with user's image. My second and third fragment will have a footer that should always be visible, but this is what I get:

When my image is expanded the footer disappears. What I want is for my two fragments to have these footers always visible and not depending on toolbar being collapsed or not. My gallery footer should be similar to post footer.

profile_layout.xml:

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

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        contentScrim="?attr/colorPrimary"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/profile_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:contentDescription="@string/profile_photo"
            app:layout_collapseMode="none"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/toolbarEdit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:contentDescription="@string/block"
                android:paddingEnd="20dp"
                android:paddingStart="5dp"
                app:srcCompat="@drawable/ic_icon_edit" />
        </android.support.v7.widget.Toolbar>

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.design.widget.TabLayout
        android:id="@+id/myProfileTabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:tabContentStart="72dp"
        app:tabGravity="fill"
        app:tabMode="scrollable" />

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

posts_fragment.xml:

<LinearLayout 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:background="@drawable/tile_bg"
android:orientation="vertical" >

<ListView
    android:id="@+id/list_view_messages"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@null"
    android:divider="@null"
    android:transcriptMode="alwaysScroll"
    android:stackFromBottom="true">
</ListView>

<LinearLayout
    android:id="@+id/llMsgCompose"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="horizontal"
    android:weightSum="4" >

    <EditText
        android:id="@+id/inputMsg"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="3"
        android:background="@color/bg_msg_input"
        android:textColor="@color/text_msg_input"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"/>

    <Button
        android:id="@+id/btnSend"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/ppdColorOrange"
        android:textColor="@color/white"
        android:text="@string/send" />
</LinearLayout>

My PostsFragment (not yet implemented):

public class MyProfilePostsFragment extends Fragment {     
    @Override     
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {          
        View view = inflater.inflate(R.layout.navdrawer_my_profile_fragment_posts, container, false);         
        return view;
    } 
}

score 4 · Accepted Answer · edited Nov 09 '18 at 10:01

I had the same requirement for my one of apps. I just did workaround.
Add your required layout in tab layout:

<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:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            contentScrim="?attr/colorPrimary"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/profile_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:contentDescription="@string/profile_photo"
                app:layout_collapseMode="none"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin">

                <ImageView
                    android:id="@+id/toolbarEdit"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end"
                    android:contentDescription="@string/block"
                    android:paddingEnd="20dp"
                    android:paddingStart="5dp"
                    app:srcCompat="@drawable/ic_icon_edit" />
            </android.support.v7.widget.Toolbar>

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/myProfileTabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:tabContentStart="72dp"
            app:tabGravity="fill"
            app:tabMode="scrollable" />

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

    <-- Your required layout -->
    <LinearLayout
        android:id="@+id/tab123"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:gravity="bottom"
        android:orientation="horizontal"
        android:visibility="gone"
        android:weightSum="4">

        <EditText
            android:id="@+id/inputMsg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:paddingLeft="6dp"
            android:paddingRight="6dp" />

        <Button
            android:id="@+id/btnSend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="send" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Add following code in your Tab activity:

TabLayout tabLayout;    
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);//add your viewpager to TabLayout 

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
        LinearLayout l=(LinearLayout) findViewById(R.id.tab123);
        final EditText text=(EditText) findViewById(R.id.inputMsg);
        Button send=(Button) findViewById(R.id.btnSend);

        if (tab.getPosition() == 0) {
            l.setVisibility(View.GONE);
            System.out.println("About tab");
        } else if (tab.getPosition() == 1) {
            l.setVisibility(View.VISIBLE);
            System.out.println("Posts tab");

            send.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String msg = null;
                    msg = text.getText().toString(); //get input
                    // Perform your desired task.
                }
            });
        } else if (tab.getPosition() == 2) {
            l.setVisibility(View.VISIBLE);
            System.out.println("Gallery tab");

            send.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String msg = null;
                    msg = text.getText().toString(); //get input
                    //Perform your desired task.
                }
            });
        }
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

Thank you for your answer Shashidhar. Would I have to add my gallery_fragment.xml to tab layout as well? Also does this mean I would have to change my Fragments and add this layout to all of them them? Is there a cleaner solution for this? — Banana, Apr 01 '17 at 09:31
@Kemo, Just remove linear layout from all fragment as we have added to tab xml file. — Shashidhar Mayannavar, Apr 01 '17 at 09:35
Tried it and it works beautifully. One question - what should I do with my fragment - how should I implement it, because I would have to edit that as well. When I enter the message and click enter, how would I display it, in my fragment or activity? Do I need to combine it with MainActivity that has these fragments. I am using this [tutoiral](http://www.androidhive.info/2016/02/android-push-notifications-using-gcm-php-mysql-realtime-chat-app-part-1/). — Banana, Apr 01 '17 at 15:21
Also, how would I display listview from posts_fragment.xml above the footer? — Banana, Apr 01 '17 at 15:29
This is a very elegant solution, I have already used it on another part of my app to display different FABs for different fragments. Thanks again Shashidhar :) — Banana, Apr 03 '17 at 08:16

Collapsible Toolbar - Make Fragment Footer Always Visible in Android

1 Answers1

Linked